Developing modern offline apps with ReactJS, Redux and Electron – Part 2 – ReactJS Basics

The following table shows two examples on how to write React code. On the left hand side, you see React code written in JSX syntax. On the right hand side, JSX syntax transpiled to plain JavaScript. At first glance, it may seem a little strange to mix JS and HTML code. The HTML notation on the left hand side is not actual HTML – you can think of it as a short notation for the elements you create. But instead of writing React.createElement() all the time, it is much cleaner and shorter to use the JSX notation.

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         counter: 42
      }
   };
   render() {
      return (
         <div>
              Count: {this.state.counter}
         </div> 
     );
   }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

class App extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
          counter: 42
       };
    }
    render() {
       return React.createElement(
          'div',
          null,
          'Count: ',
          this.state.counter
       );
    }
 }
 
ReactDOM.render(
  React.createElement(App, null), 
  document.getElementById('container')
);

If you want to see this example in action and tweak it a bit, use this JSFiddle link: https://jsfiddle.net/xbtzz2zo/2/

Nested React Components / Reuse

We extend the previous example and create a Counter component that we will use in our app. The Counter component extends React.Component, and simply renders a title and the state of the counter prop variable. We use the Counter component in the app component by adding it inside the render function. In our example, we added two Counter components to show how easy it is to reuse components in different places of your application. The counter property is passed by the parent component to the child component using counter = {this.state.counter}. The child component can access the counter property via this.props.counter.

To change state variables of the App component, i.e. to increment the counter variable, you can use the setState() method of the React component. As method parameters you only need to provide the properties you want to change. In this example, we render a button, and when this button is clicked, we trigger the event handler increment(). To access properties, state and component methods from event handlers, you need to register and bind them explicitly to the component. The best place to bind your event handlers is the constructor.

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         counter: 0
      }
      this.increment =
         this.increment.bind(this);
   };

   increment() {
      this.setSate({
         counter:
            this.state.counter + 1
      });
   }

   render() {
      return (
         <div>
            <button
               onClick = {this.increment}>
               Increment
            </button>
            <Counter
               counter =
                  {this.state.counter}>
            </Counter>
            <Counter 
               counter =
                  {this.state.counter}>
            </Counter>
         </div>
      );
   }
}

class Counter extends React.Component {
   render() {
      return (
         <div>
            <h3>
               Count: {this.props.counter}
            </h3>
         </div>
      );
   }
}

Counter.propTypes = {
   counter: PropTypes.string,
};

ReactDOM.render(
  <App />,
  document.getElementById('container') 
);

class App extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
          counter: 0
       };
       this.increment =
          this.increment.bind(this);
    }

    increment() {
       this.setState({
          counter:
             this.state.counter + 1 
       });
    }

    render() {
       return React.createElement(
          'div',
          null,
          React.createElement(
             'button',
             { onClick: this.increment },
             'Increment'
          ),
          React.createElement(
            Counter,
            { counter:
               this.state.counter }
          )
          React.createElement(
            Counter, 
            { counter:
               this.state.counter }
         )
       );
    }
 }
 
 class Counter extends React.Component {
    render() {
       return React.createElement(
          'div',
          null,
          React.createElement(
             'h3',
             null,
             'Count: ',
             this.props.counter
          )
       );
    }
}

Counter.propTypes = {
   counter: PropTypes.string,
};
 
ReactDOM.render(
   React.createElement(App, null),
   document.getElementById('container'));

JSFiddle link: https://jsfiddle.net/8pxafpyq/2/

Stateless Functional Components

As of React 14, you can use stateless functional components that are very useful when you have dumb components without any behavior. They have less boilerplate code and typically focus on the UI. The Counter component in our example only displays a counter variable that the parent component passes on to the child. Therefore, we do not need to extend the React.Component class and implement the render() function. With a stateless functional component, you can destructure all props in the function parameters and simply return the elements that should be rendered. You do not have to use the keyword this any more since you are not using a class. This makes stateless functional components easy to test, easy to understand, easy to reuse, and the code does not have any side effects. It is imported to note that stateless functional components do not have any lifecycle methods that standard React components implement. Once you need to use a lifecycle method, you need to convert your stateless functional component to a regular React component.

class Counter extends React.Component {
   render() {
      return (
         <div>
            <h3>
               Count: {this.props.counter}
            </h3>
         </div>
      );
   }
}

const counter = ({ counter }) => (
   <div>
        <h3>Count: {counter}</h3>
   </div>
);

PureComponent

All React Components, except stateless functional components, have a lifecycle method shouldComponentUpdate() to check if the state has changed and the component needs to be re-rendered. The default implementation always returns true to trigger a re-render of the component. PureComponents use shallowEqual() to check if props or the state have changed. As a developer you have to evaluate and measure which implementation works best for your use case. In a later example we will show how to override shouldComponentUpdate()lifecycle method to optimize the render process of the React application.

class Counter extends React.Component {
   render() {
      return (
         <div>
            <h3>
               Count: {this.props.counter}
            </h3>
         </div>
      );
   }
}

class Counter extends React.PureComponent {
   render() {
      return (
         <div>
            <h3>
               Count: {this.props.counter}
            </h3>
         </div>
      );
   }
}

Lifecycle methods

React Components (except functional components) have lifecycle methods that can be used to change the behavior of components. One common use case in our project was implementing shouldComponentUpdate() to specify which prop changes should trigger a re-render of a component. We have a lot of components on our pages, and this helped us increase the overall app performance a lot.

Here is a list of all lifecycle methods and the order in which they are called. As of React 16 (release September 2017), there is an error handling lifecycle method that you can use to catch exceptions inside your components.

• Mounting:
  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()
• Updating:
  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()
• Unmounting:
  • componentWillUnmount()
• Error handling (since React 16):
  • componentDidCatch()

The following code snippet prints all lifecycle events to the console log. When you run the JSFiddle example, you will see the following output. First the Counter component is mounted and rendered. Then we click the increment button and trigger a props change. This will trigger a re-render of the component. After 10 seconds, we unmount the component and the componentWillUnmount() method will be triggered.

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         counter: 0
      }
      this.increment =
         this.increment.bind(this);
   };

   increment() {
      this.setState({
         counter:
            this.state.counter + 1
      });
   }

   render() {
      return (
         <div>
            <button onClick = {this.increment}>
               Increment
            </button>
            <Counter counter = {this.state.counter}>
            </Counter>
         </div>
      );
   }
}

class Counter extends React.Component {
   constructor(props) {
     super(props);
     console.log('constructor');
   }

   componentWillMount() {
      console.log('componentWillMount');
   }

   componentDidMount() {
      console.log('componentDidMount');
   }

   componentWillReceiveProps(newProps) {    
      console.log('componentWillReceiveProps',newProps);
   }

   shouldComponentUpdate(newProps, newState) {
      console.log('shouldComponentUpdate');
      return newProps !== this.props ? true : false;
   }

   componentWillUpdate(nextProps, nextState) {
      console.log('componentWillUpdate');
   }

   componentDidUpdate(prevProps, prevState) {
      console.log('componentDidUpdate');
   }

   componentWillUnmount() {
      console.log('componentWillUnmount');
   }

   render() {
      console.log('render');
      return (
         <div>
            <h3>{this.props.counter}</h3>
         </div>
      );
   }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(
      document.getElementById('container'));}, 10000);

JSFiddle link: https://jsfiddle.net/6yhtjydv/4/

Component Styling

In our project, we use Twitter Bootstrap as CSS framework, which provides us with a large set of CSS components. Bootstrap allows us to write responsive web pages with minimal effort. To create a theme that matches our customer’s CI/CD best, we had to do a little tweaking. To customize the theme, we first chose a theme that our customer liked best. In our case, the Cerulean theme from Bootswatch.com was a great starting point. We copied the Cerulean LESS variables and imported them into the Bootstrap Live Customizer website. On this website you can see all styled Bootstrap components and further customize all Bootstrap LESS variables. In our case we had to tweak the brand primary color as well as a couple of other base stylings. After that we downloaded the Bootstrap resources (LESS variables, CSS stylesheets) and integrated them into our application. This approach covered most of our components.

For custom components that required special styling, we used the following flexible approach. Each component can have a custom CSS file that is saved parallel to the component. In the example below, the Spinner component imports the Spinner.css file and uses the custom CSS properties.

Spinner.jsx

import React from 'react';
import PropTypes from 'prop-types';
import './Spinner.css';

const Spinner = ({ message }) => (
   <div className="background">
      <div className="spinner">
         <p className="spinner_text">
            {message}
         </p>
      </div>
   </div>
);

Spinner.propTypes = {
   message: PropTypes.string,
};

export default Spinner;

Spinner.css

.spinner {
   position: fixed;
   z-index: 1100;
   height: 10em;
   width: 10em;
   margin: auto;
   color: white;
}

.spinner_text {
   color: white;
   padding-top: 5px;
}

/* transparent overlay */
.background {
   z-index: 1400;
   background-color: rgba(0,0,0, 0.7);
   display: block;
   position: fixed;
   width: 100%;
   height: 100%;
}

Summary

You might wonder why we only covered so little on how to pass state from one component to another and how to manipulate the state. Especially with large React applications, it can get very complicated to keep the state in sync and in the correct parent components. The next article will show you a very elegant and powerful solution to that problem. We will introduce Redux, which is an implementation of a state container. You will learn about the uni-directional data flow pattern and how to write large complex React applications.

References

• ReactJS – https://reactjs.org/
• Bootstrap – http://getbootstrap.com/
• Cerulean Theme – https://bootswatch.com/cerulean/
• Live Customizer – http://bootstrap-live-customizer.com
• React Boostrap Components – https://react-bootstrap.github.io/components.html