React- The introduction.
Posted on :: 3161 Words :: Tags: react, introduction

Introduction

This post starts a new series in this blog talking about a famous Javascript Framework named React JS. React is a reactive framework which aims for better responsiveness of the application where parts of your system "listen" to each other and at any change they react to it by doing some action like re-rendering or fetching data from a backend server, etc. This is an evolution of the Observable Pattern.

To better focus on React in these posts I will not talk about NodeJS and Webpack but if you want/need to learn these two things please refer to these previous posts I made:

  1. NodeJS- A very simple introduction
  2. Webpack- A complete introduction
  3. Webpack- Starting a frontend

All of them teaches with practice and working codes what you have to do to have a functioning basic Node/Webpack application with SASS. But if you already have knowledge on all of these and only want to focus on learning React, clone my bitbucket repo and checkout webpack_frontend branch:

git clone https://bitbucket.org/kiberStender/node_app.git
cd node_app/
git checkout --track origin/webpack_frontend

This branch has all the code developed throughout the three posts above. Everything said let's dive in and learn about React.

React JS

What does exactly React JS do that deserves your attention? I'm going to show you two pieces of code and I want you try to figure out which one executes faster:

  1. let arr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
let ul = document.querySelector("#a_ul"); // an unordered list <ul id="a_ul"><ul/>

for (const item of arr) {
  ul.innerHTML += `<li>${item}</li>`;
}

  2. let arr = [
  0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,
  21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,
  41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,
  61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,
  81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100
];
let ul = document.querySelector("#a_ul"); // an unordered list <ul id="a_ul"><ul/>

ul.innerHTML = arr.reduce((acc, item) => `${acc}<li>${item}</li>`, "")

If you are not well experienced with Javascript you would say that the first one is faster, because it's only 21 items. The thing here is: innerHTML is not a simple variable. Any changes to this triggers I/O(Input/Output) operations in your browser. I/O is a very expensive operation and not only expensive but unlike changing a variable value, doing I/O can fail due to many possible problems(like too much delay to process due to lack of cpu or memory resources at the time so browser cancel your IO operation) and given the decision of making it a variable instead of a function for example, it is not visible by the developer that it can fail and error may arise by lack of attention.

By executing the first code we are triggering 21 I/O operations while in the second piece of code, even though we have a bigger loop (101 items) we only do one I/O operation.

And what does React has to do with it?

React works with the idea of controlling the number of I/O operations you do by not allowing you to do it yourself. But how can React know when to perform I/O and when not? React performs comparison of variables, so whenever a variable changes something React triggers re-render operations only on the parts of your code that are affected by that value that changed. To control it, Reacts wants you to not change variables directly:

let a = 10
a = 5 // Do not do this

React has an 'interface' where it has a function/method named setState and by using this function, you control rendering or let React knows when a variable has changed and then triggers re-render operation(more on this later). By doing so, React always knows when and how many I/O to be performed, because it controls what it calls Components and any Component inside the Component that triggered setState will be updated too.

Instead of doing one I/O per Component it does what the function reduce does to the array, processing everything in one single batch and then returns a single object to React to do the I/O.

Adding React to our codebase

Now, before I go any further in explanation, let's re-write our simple "Hello World". The first thing we have to do is to add React in our dependency list. React is a framework like Bootstrap, so we're adding it to normal dependency list not the dev-dependency list:

npm install react@16.13.1 react-dom@16.13.1

PS: To guarantee that everything will work in the future as it is working right now, please install all the dependencies in the same version I put here in the snippet

React itself is inside react library, for now don't focus on react-dom as we will only use it in the application's start. Now go to your /src/javascript/greetings/DateGreetings.js file and change it to the given example:

import React from "react"; // 1
import moment from "moment";

import "greetings/dateTimeGreetings.scss";

export default class DateTimeGreetings extends React.Component { // 2
  render(){ // 3
    return React.createElement( // 4
      'div', {id:"date-time-greetings-component"}, `It is: ${moment().format(this.props.dateFormat)}` // 5
    );
  }
}

Let's go to the explanation:

  1. The first thing to be done is import React to your code.
  2. Then make DateTimeGreetings class extend React.Component so it will have some nice methods to take care of the lifecycles(I will explain it later)
  3. Then change the method greetDateTime name to render (This is one of the React lifecycles I mentioned)
  4. It returns an object that represents a virtual element using React.createElement.
  5. Notice that now it is using this.props.dateFormat instead of dateFormat. I will explain it later

PS: Notice that I did not create a constructor nor declared the this.state variable I told earlier. We don't need it right now because we are not updating anything yet

Now "reactify" /src/javascript/greetings/Greetings:

import React from "react"; // 1 
import DateTimeGreetings from "greetings/DateTimeGreetings.js"; // 2
import Person from "person/Person";

import "greetings/greetings.scss";

export default class Greetings extends React.Component { // 3  
  render(){ // 4
    const {name, surname} = this.props.person ? this.props.person : new Person("Unnamed", "Person"); // 5
    return React.createElement(
      "div", 
      {id: "greetings-component"},
      `Hello Mr/Ms ${name} ${surname}`,
      React.createElement(DateTimeGreetings, {dateFormat: "MMMM Do YYYY, h:mm:ss a"}) // 6
    );
  }
}

Allow me to explain:

  1. Again import react
  2. Import our class newly transformed to Component DateTimeGreetings
  3. Make Greetings a Component too
  4. Change greet name to render
  5. Greetings now receive person parameter via props(Calm down I will explain what props are) instead of via direct this as it was done previously
  6. Instantiate DateTimeGreetings as if it was one of the React's pre-defined HTML tags and pass dateFormat via props to the instance of the class

Update /src/javascript/App.js:

import React from "react";
import Person from "person/Person";
import Greetings from "greetings/Greetings";

import "app.scss";

export default class App extends React.Component{

  render(){
    const person = new Person("John", "Titor");
    return React.createElement(
      "div", 
      {id: "greetings-example"}, 
      React.createElement("h1", null, "Greetings Example"), 
      React.createElement(Greetings, {person: person})
    );
  }
}

I don't think there is much to be explained here that was not explained in the previous examples. At last, go to /src/index.js file and change it to this:

import React from "react"; //1
import ReactDOM from "react-dom"; //2
import App from "App";

ReactDOM.render( // 3
  React.createElement(App, null), // 4
  document.querySelector("#root") // 5
);

Explaning:

  1. Like previously, import React to our code
  2. Now import ReactDOM. This is the 'engine' of React. This is what makes React works the way it works. If you know Java, think about the class Thread. Just by creating an instance of this class won't make it work. You need to call start method and you will need to specify an Executor (usually GlobalExecutor) and then your Thread "will be executed"(If there are resources for it). If you are not Java dev or not familiarized with Thread class, React Dom is what starts your React app and control the lifecycle
  3. Here is where the command to React-DOM start the application to run is given
  4. Creating an element of type App, like it was done with Greetings and DateTimeGreetings previously in other components
  5. Here we say where we want our react app to be rendered. If for some reason you want to have a second app you can simply call ReactDOM.render again passing a different document.querySelector("another_element")

And voi là. To guarantee to you that it is working and it is not a cache, I changed "Node Dev" to "John Titor". So check it, if you see the different name, you can be sure you did everything correctly. Run now using npm run-script live and go to http://localhost:8080

Check out the generated pure HTML code:

And now you have React JS in your project. As you can see, React is not a framerwork to beautify your app, like for example, when you are learning JQuery. Even though you can use JQuery without adding CSS dynamically, it is counter intuitive. React is made for you to focus in the structure of you HTML and how to dinamically change values diminishing the maximum possible I/O operations. If you compare it to jQuery that does I/O almost all the time, React is mostly to improve performance while keeping your code (more) readable.

JSX

Wait a minute... What is this strange syntax? This is probably not what you have seen so far when people talk about React. You probably have seen React like this:

import React from "react";
import moment from "moment";

import "greetings/dateTimeGreetings.scss";

export default class DateTimeGreetings extends React.Component {  
  render(){
    return (
      <div id="date-time-greetings-component">
        It is: {moment().format(this.props.dateFormat)}
      </div>
    )
  }
}

So how to achieve this? This HTML syntax in the middle of the Javascript is called JSX. It is a transpiled language in the middle of the transpiled Javascript that is transformed in this 'weird' syntax seen above. To have this syntax in your code making it easier to write and read, you have to simply add another preset in our Babel configuration (in babel.config.js file). First install babel react preset:

npm install --save-dev @babel/preset-react@7.9.4

Now go to /babel.config.js and add the newly installed preset to our config:

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
    "@babel/preset-react",
  ],
};

PS: Whenever you see three dots ..., it means: "keep whatever comes before this". Or if it comes after what we are adding/modifying, it means: "keep whatever comes after these dots"

Now You can start writing JSX HTML inside your Javascript files and Babel will transpile it correctly.

  1. /src/javascript/greetings/DateTimeGreetings.js
    ...
render(){
  return <div id="date-time-greetings-component">It is: {moment().format(this.props.dateFormat)}</div>
}
...
  2. /src/javascript/greetings/Greetings.js
    ...
render(){
  const {name, surname} = this.props.person ? this.props.person : new Person("Unnamed", "Person");

  return (
    <div id="greetings-component">
      Hello Mr/Ms {name} {surname}
      <DateTimeGreetings dateFormat="MMMM Do YYYY, h:mm:ss a" />
    </div>
  );
}
...
  3. /src/javascript/App.js:
    ...
render(){
  const person = new Person("John", "Titor");
  return (
    <div id="greetings-example">
      <h1>Greetings Example</h1>
      <Greetings person={person} />
    </div>
  );
}
...
  4. /src/index.js
    ...
ReactDOM.render(<App />, document.querySelector("#root"));

React.createElement and JSX

Understanding how JSX is transformed to React.createElement can helps us understanding some informations we will see with more details in the next topics. First let's see createElement prototype:

React.createElement(
  type,
  [props],
  [...children]
)
  1. type: A string or object containing the component we are instantiating. For any native HTML Tag, you pass it as a String like 'div', 'span', 'article', etc. For your own defined Components such as our Greetings, you pass it not as a String but as a 'anonymous class definition' or a type if you prefer
  2. props: It's an object literal {} containing the values you want to pass to your instantiated Component. In the prototype it is surrounded by [] not to say it is an array, but to say that this is optional
  3. children: It is a varargs array that you can pass anything you want, as long as it is serializable to a String. Usually customized Components do not have children. It's not a rule, it is just that usually you don't nest things inside your own Component from outside the file defining it. In the prototype it is surrounded by [] not to say it is just an array, but to say that this is optional too

Non JSX version:

React.createElement(
  'div',
  {prop1:"string", prop2:a_variable},
  "child1", "child2", React.createElement('span', {id:"abc"}, 'text')
)

React.createElement(
  Greetings,
  {person: new Person("Javascript", "Dev")},
  "child1", "child2", React.createElement(AComponent, {id:"abc"})
)

Now JSX representation:

<div prop1="string" prop2={a_variable}>
  child1
  child2
  <span id="abc">text</span>
</div>

<Greetings person={new Person("Javascript", "Dev")}>
  child1
  child2
  <AComponent id="abc"/>
</Greetings>

How does it work internally?

Now that you understand that the core of the React is the React.createElement and everything revolves around it(even JSX that it is just a syntax sugar for this function), I created a simple code, that actually does what React does. Of course it is very limited as it does not have State support, Lifecycles support, good perfomance, Virtual DOM, etc, etc. It is just a simple didactic example to better explain each part of what have been shown so far.

const React = (function(){
  class Component {
    constructor(props){
      this.props = props;
    }
    
    render(){
      throw new Error("Direct call");
    }
  }
  
  function addProps(element, props){
    for(const [key, value] of Object.entries(props)){
      switch(key){
        case "onclick":
          element.addEventListener("click", value);
          break;
        case "dbclick":
          element.addEventListener("dbclick", value);
          break;
        default:
          element.setAttribute(key, value);
          break;
      }
    }
    return element;
  }

  function createNode(type, props){
    if(typeof type === "string"){
      return addProps(document.createElement(type), props);
    } else {
      if(type.prototype instanceof Component){
        return new type(props).render();
      } else {
        throw new Error("Class must extend Component");
      }
    }
  }

  function addChildren(element, children){
    for(const child of children){
      if(typeof child === "object"){
        element.appendChild(child);
      } else {
        element.append(child);
      }    
    }
    return element;
  }

  function createElement(type, props, ...children){
    return addChildren(createNode(type, props), children);
  }
  
  return {Component, createElement};
})();
...

React Components

I said previously that React has something named Component. But what is a Component? A Component can be two things:

  1. A function that returns a JSX/React.createElement:
    //1
function Greeter(props){
  return <div id="greeter-component">{props.greet} {props.treatment} {props.name}</div>
}
//or
//2
function Greeter(props){
  return React.createElement('div', {id:"greeter-component"}, `${props.greet} ${props.treatment} ${props.name}`);
}
    or
    //3
const Greeter = (props) => <div id="greeter-component">{props.greet} {props.treatment} {props.name}</div>
//or
//4
const Greeter = (props) => React.createElement('div', {id:"greeter-component"}, `${props.greet} ${props.treatment} ${props.name}`);
  2. A class that extends React.Component or React.PureComponent and has a method render that returns the JSX/React.createElement
    class Greeter extends React.Component {
  constructor(props){
    super(props)
  }
  render() {
    return <div>{this.props.greet} {this.props.treatment} {this.props.name}</div>
  }
}
//or
class Greeter extends React.Component {
  constructor(props){
    super(props)
  }
  render() {
    return React.createElement('div', {id:"greeter-component"}, `${this.props.greet} ${this.props.treatment} ${this.props.name}`);
  }
}
    PS: If you are not doing anything than calling super in your constructor, it is optional to have it:
    class Greeter extends React.Component {
  render() {
    return <div>{this.props.greet} {this.props.treatment} {this.props.name}</div>
  }
}
//or
class Greeter extends React.Component {
  render() {
    return React.createElement('div', {id:"greeter-component"}, `${this.props.greet} ${this.props.treatment} ${this.props.name}`);
  }
}

Go to src/javascript/ and create a new package/directory named greeter and inside this package/directory create a file named Greeter.js and copy your favorite Component implementation fom above and paste it to the newly created file. For sake of simplicity I will use example 3:

import React from "react"

const Greeter = (props) => <div>{props.greet} {props.treatment} {props.name}</div>

export default Greeter

Even tough it looks like we are not using React, do not remove the import because if you remember, once it is transpiled, the JSX expression will become React.createElement. Now change your src/javascript/greetings/Greetings.js:

...
import Greeter from "greeter/Greeter"

export default class Greetings extends React.Component {//2  
  render(){
    return (
      <div id="greetings-component" className="a-class-that-changes-font-to-red">
        <Greeter greet="Hello" treatment="Mr/Ms" name={this.props.name} />
      </div>
    )
  }
}

PS: Because of the interpreted nature of Javascript, you cannot jump lines after return otherwise the interpreter will return undefined. So if your JSX expression it too big you wrap parenthesis around it and you can jump as many lines as you want/need.

Or:

...
import Greeter from "greeter/Greeter"

export default class Greetings extends React.Component {
  render(){
    return React.createElement(
      'div', 
      {id:"greetings-component", className:"a-class-that-changes-font-to-red"}, 
      React.createElement(Greeter, {greet: "Hello", treatment: "Mr/Ms", name: this.props.name})
    )
  }
}

All of this to tell you that a Component is just you creating your own HTML Tag. By doing this, every Component you create is a part of your application, making it easier to compose these parts in the end, like it is just a big HTML file. If you run, you will notice that again nothing changed in the final result, but check the generated HTML:

Component as a Function vs as a Class

The advantage of having a Component as a function is that, it is less verbose and faster to be coded, see examples 1, 2, 3 and 4(specially 3 and 4). Usually you will use this way when you have a simple Component, such as our Greeter, that only displays something and has no interaction with the user like when you are creating a Header, Footer or any static part of your app that will not change by the Component own inner actions.

On the other hand having a Component as a class, will grant you way more control over your Component, because by then you will have support from React lifecycle and state changing using this.setState. You lose in amount of written code, but you gain in level of tunning or optimization of your Component.

But in any case, to change from a class to a function or vice-versa is not that hard, so if you're not sure what is the better approach to use, go for class approach, if you see that your Component is only changed by outside(via props), or you don't need to tune/lifecycle, you can easily change it to function approach later.

What are these "props"?

Props is short for "Properties". Think of your Component as a function, the props are your parameters, but instead of passing your parameters by position like you normally do in a function, here you are giving names to your parameters so you can pass them in any position.

Once you pass a props in your JSX or React.createElement you will have access to it inside your class/function that declares your Component using props.[the very same name] you declared outside your class/function when instantiating it. You can pass literally anything via props: functions, strings, int, double, complex objects, anything that Javascript allows you to put inside an object, because if you remember how we pass props in createElement function, it is just an object literal. See the example:

Declaring

Instantiating

Notice that props.greet in the first picture is being populated in the second picture via greet="Hello". If you forget to populate it like that, your props.greet will be undefined in your class/function. So always remember to either protect your props with some if else or to always populate your props correctly when instantianting your Component. See a simple example on how to protect your Component against undefined variables:

...
const Greeter = (props) => <div id="greeter-component">{props.greet ? props.greet : "Hello"} {props.treatment} {props.name}</div>
...

This way whoever is using your Greeter Component and forget to populate greet, the Component will assume it's value as "Hello".

So the state is ... ?

While props are external values provided to your Component via parent Component, they are fully immutable and changing them inside your Component won't trigger any re-rendering. So how can we mutate values to interact with our users? As mentioned in the beggining, React has a function named setState to deal with mutations that will only be available if your Component is a class extending React.Component or React.PureComponent. You have to create a variable named state(and pay attention to not give any other name, it has to be state) and this variable should be an object holding, if possible, only values (like String, Int, Double, Complex classes representing a value like Date) or anything that can be comparable:

...
constructor(props){
  super(props)
  this.state = {
    greet: "",
    treatment: "",
    title: "",
    aNumber: 0
  }
}
...

And in order to change one of those values you have to use setState like that:

...
myFunctionThatChangesGreet(newGreet){
  this.setState({greet: newGreet})
}
...

Or:

...
myFunctionThatIncrements(value){
  this.setState(state => ({aNumber: state.aNumber + value}))
}
...

Or:

...
myFunctionThatChangesGreetAndIncrementsANumber(newGreet, aNumberToIncrement){
  this.setState(state => ({aNumber: state.aNumber + aNumberToIncrement, greet: newGreet}))
}
...

Independently of what you choose to use (simple object passing or anonymous function passing) this command will trigger React to compare old greet with newGreet and aNumber to the new value to check if there are differences. If there are differeces, React re-renders your Component and any child inside it. Pay attention to this part React re-renders your Component and any child inside it. So if you don't break your application in as smaller Components as you can, you might have performance issues because it will have too many things to re-render everytime you change a single variable.

Changing treatment

All of these examples of how to change values inside this.state are awesome but, how actually to do this in real world? Let's add a input to allow the user to type what "treatment field" they want to be displayed instead of "Mr/Ms". Inputs in React are simple Components that demands you to bind/attach/implement the listener onChange and optionally bind/attach a variable to the props value. Bind/Attach are the terms used to describe when you are passing a variable to some prop in an given Component, in this case an input. This onChange is a listener and it is just a function with the signature:

onChange(event: Event): void

Let's modify our src/javascript/greetings/Greetings.js a bit so you can have an example:

...
  constructor(props){
    super(props);
    this.state = {
      treatment: ""
    }
  }
  
  whenTreatmentChanges(newValue){
    this.setState({treatment: newValue})
  }
  
  render(){
    return (
      <div id="greetings-component" className="a-class-that-changes-font-to-red">
        <div className="row">
          <div className="col-1">Treatment</div>
          <div className="col-2">
            <input value={this.state.treatment} onChange={event => this.whenTreatmentChanges(event.target.value)} />
          </div>
        </div>
        <Greeter greet="Hello" treatment={this.state.treatment} name={this.props.name} />
      </div>
    )
  }
...

setState callback

setState function is asynchronous, so if you change something outside another statement right after it in the next line expecting it to have the new values already it won't work. So if you need to fire something exactly when setState finishes updating your state variable, you can pass an anonymous function as a second parameter to setState:

...
whenTreatmentChanges(newValue){
  this.setState({treatment: newValue})
  console.log(this.state.treatment) // print old treatment value
}
...

This will show you the old value because as explained, setState is asynchronous, so in order to correctly do something after setState finishes updating you'll need to do the following way:

...
whenTreatmentChanges(newValue){
  this.setState({treatment: newValue}, () => console.log(this.state.treatment)) // print updated treatment value
}
...

Testing Components

Conclusion

We are going to stop it right here, because this is becoming too huge. So to not lose details, I'm leaving the more complex side of React to the next post . You learned in this post (I hope ^^) how to add React to your project, how to have JSX and what are the diffences when not using it, what props are, what Components are and how many types of Components we can have and how to deal with state.

We did almost no code here, we had more explanations than examples, but it was enough for you to have a good start with React. From this point on, you will be able to code an application in React even if you don't read next post(please do it xD). If by any chance you would like to read this in portuguese, feel free to go to the Brazilian Portuguese version of this page. See you next time.