ReactJS

Posted on by

Although backend blood flows through our veins we are not afraid of frontend tasks. We are well experienced in AngluarJS and Angular 4 and we are experimenting with ReactJS whenever we can. Here is one simple ReactJS app that we use to try various ReactJS features. It can be used as a boilerplate code for any project where you need Redux, Router v4 and route redirection, user authentication, AJAX calls, Less, controlled components etc.

This simple application has menu, login form, table that displays objects administrated by this app (we called them “things”) and one form where we can create or edit the “thing”. Any user can see the table of things but only logged in user can create it or edit.

The source code and demo can be found on GitHub. Let’s now explore its features, one by one.

Router

For theoretical part about React Router v4 read this article.
For our implementation examples please check the components Main and Header. The only part that is not covered by the article above is redirection to other routes. It can be done in 2 ways:
  • With Redirect component – explained in this example. We simply keep the Boolean flag in local state or in store whether we need to redirect and where. When we need to redirect we set that flag to true. In render() function we will return <Redirect> component 
    if (shouldRedirect) {
return <Redirect to={route} />
}

    For our example check the Login component.

  • With history object 
    this.props.history.push(route);

    For our example check the Thing component and its redirectTo() function.

User authentication

If we have some
  • AJAX calls that can be made,
  • components that can be rendered or
  • action that can be performed
only for authenticated users and if we need to redirect the user to the login page if he tries to do something of the above as anonymous user, our solution is to :
  • Keep the user’s data (username) in Redux store
  • If user is not logged in and he tries to do something of the above we will redirect him to the login form. At the same time we will save in Redux store the current route so the user can be redirected back to that route after successful login.
For AJAX calls please check our Interceptor how we redirect the user to the Login route in case we get 401 error in HTTP response.
For components that can be rendered only for the authenticated users we have the component AuthenticatedRoute that we use instead of Route for restricted routes. It requires two properties: path and component, the same as Route from react-router-dom.

In AuthenticatedRoute we check whether the user is logged in or not. If yes, we will render the component. If not we will redirect him to the Login route. For both please check the render() function of the AuthenticatedRoute.

Form

Form that we use to create/edit Thing objects is implemented in the Thing component as described in React documentation. Form values we keep in local store and on form submit we “flush” them to the Redux store. But before that, for edit, we first need to load them from the Redux store, and if user tries to open the edit form and data are not loaded yet from backend then we need to :
  • Check if data is loaded – callback componentDidMount() in Thing component
  • Load the data with AJAX call – function loadAllThings() – keep in mind that this is asynchronous call
  • Save them in Redux store – dispatch “ADD_THINGS” action
  • Take the appropriate Thing object from Redux store and set it in local store – function prepareThingToEdit()
  • Render the form

Less to CSS transpiling

This is just a matter of proper configuration. In webpack.config.js put loader
{
test: /\.less$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
}
and in package.json use the script less-watch-compiler that will transpile less to css on every change in less files. Now to start both scripts less-watch-compiler and npm start in one command you can join them with npm-run-all as we did in scripts in package.json file.