Entering the 21-st century: Learning React

I am a front-end developer for a while now. That said, I still have not touched any of the popular front-end frameworks: no Vue, no React and (thank god) no Angular. But, but, but, HOW? Well, what I work on is a heavy front-end client, which has multiple layers and my job usually is on the business layer of this client. No rendering. Not really. Call me a back-end front-end developer. Or don’t, it doesn’t really sound as good as I thought.

Anyhow, I’m updating now! Let’s make a React app! Served by nginx. With Flask back-end. In a Docker swarm. Oh, and by the way, I’m going to be learning those too. So, expect failure. A lot of it. But that’s fun, right?

So, shall we?

Why React?

It’s the thing nowadays, isn’t it? A lot of people are using it (which isn’t that important, but sigh), it is not Angular (which I refuse to learn for about 7 years now, and plan to do so forever) and some people are using it where I work. All arbitrary reasons, I know, but there you have it.

What are we building?

A login form. This usually takes me a year, so it’ll be nice and boring. Also it is probably the most popular component of a site on the internets. So it might help people too.

How do we start building the app?

Now that’s the fun part already, isn’t it? I’ve heard about a tool, that goes and creates a bunch of folders and files and all you need to do afterwards is start the server. Since we’re entering the 21-st century with this article, we’re using it! Let me ask Jeeves about its name. So! It seems the tool is called “Create React App” and is created by Facebook. That looks legit. I’ll use it. All I need to do is install it and run:

$> npx create-react-app <loginFormName>

And the console started doing stuff. Alright, it stopped. It says something, but it’s not important. Let’s run it!

$> npm start

It runs! i’m getting a little disappointed with the lack of failures so far… I almost promised them to you. Never mind, it’s time to look at some fireworks – let’s open the browser and write “localhost:3000” in it. Let’s be honest, the hard stuff starts here.

Actually building the Log-in Form

Now I’m going to create a login form, which slides down when activated. I’m going to reuse the “Learn React” link, because I’m lazy. And I’m just going to make it print stuff in the console for now. So, here it is

1. Make a click-handler in the App function:

const openLoginForm = function() {
    return
    console.log("Bazinga!");
};

2. Add it to the link as a click handler:

<a
  href="#"
  onClick={openLoginForm}
  />

Oh, this doesn’t work! What’s the problem? Let me work on it for a while…

There it is! Don’t put empty “return” statements on the first line of the handler. I should have learned that by now… Alright, let’s cut to the chase and make that form! We need to put it in a new component I think. I’ll make a component that has only a div with a string in it:

function LoginForm() {
    return (
        Bazinga!
    );
};

And I’m going to create an instance in the event handler and return it:

const openLoginFrom = function () {
  console.log("Bazinga!");
  return Object.create(LoginForm);
}

It doesn’t do anything more! Should I call the render method of the new object?

const openLoginFrom = function () {
    console.log("Bazinga!");
    return Object.create(LoginForm).render();
}

Nope, that didn’t work either. What if we use this strange html syntax for the return statement:

const openLoginFrom = function () {
  console.log("Bazinga!");
  return <LoginForm />;
}

Not even that. Hmm. Oh, right, this is not inheriting the React.Component object! Let’s fix that. So, we’re going to switch from constructor function to class syntax, because the tutorials use it, and I can’t be bothered to think right now :)

class LoginForm extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
        Bazinga! 
      </div>
    );
  }
};

And then render it in the click handler:

import ReactDom from 'react';
ReactDOM.render(
  <LoginForm />,
  document.getElementById("logIn")
);

Does that work? No, it breaks because render is not a function, apparently. I think I got to my first developer’s block. I think Jeeves won’t help me anymore. I have to switch to Google.

The import was wrong! I should import ReactDOM from ‘react-dom’ instead of ‘react’. Always know your import files!

And now we have a container popping under the header, when you click the link. Yay! Progress! I feel it would be much easier from now on.

That’s why I’ll stop here. To leave something for next Saturday.

Until then, happy coding!

PS: If you are from the future, you can continue reading the series here: Entering the 21-st Century by Learning React: Creating the Form

In case you like some more philosophical topics, I have a take on approaching automated testing here: Always Test Your Code

Not interested? I have plenty other posts too! Feel free to browse them from the home page.