React is one of the hottest frontend libraries today. Its component based structure makes projects easy to manage. Although it is popular and powerful, it’s still only the view of the MVC framework. Personally I enjoy using Nodejs and Express for backend development. In the past 2 years, I have started many personal and work projects with this stack, so I put together a light boilerplate project to help me kick things off. Now I am not going to go into too much details, but I’ll give a brief explanation about the project structure and what each folder and file is responsible for.

Git repo: https://github.com/rjzheng/REWBoilerplate

Technologies

  • React
  • Express
  • Nodejs
  • Webpack
  • Karma

Project Structure

 

 

 

 

 

– app

The app folder contains all of the React files as follows

 

 

 

 

— actions

Actions contains a file called actions.js. It is responsible for managing communications with Redux. You can learn about Redux and what its role in the project through their documentation and some googling, but on a high level, Redux is a state manager for React projects. Unlike regular HTML and Javascript sites, when Redux is updated with newer states, the React component that is connected to the reducer automatically updates its views with the most recent states. Now actions.js contains logic that inserts, removes, or does any magic that you want to manage the reducers.

— components

Components is the core of React projects. Components contains js files that return each view of the project. These components can be included in other components to put together the entire web page, and can also be routed to a path in routes.js

— reducers

As introduced earlier, reducers are the building blocks of Redux. Inside of each reducer, you can initiate different state variables which can be connected to React components to display their values using connect from the react-redux library.

— store

Store allows you to integrate different middleware into your React project. I have seen a lot of developers adding this block of code in app.js, but I find it more organized to have its own location.

— test

This folder is self explanatory, it contains tests for your project.

Getting started

First start by cloning the git repo

 git clone https://github.com/rjzheng/REWBoilerplate [app_name]

Before doing anything else, we need to install all of the node libraries

 npm install

Now that you have a local copy of this boilerplate project, you need to use webpack to build your React code into vanilla javascript in a generated file /public/bundle.js

 webpack

At this point, all of the preparations are done, and we can start up our project

 npm start

The project should be started and open your favorite browser and direct to “localhost:8080” to access your web app. If everything’s done with no errors, you should see your boilerplate running successfully.

Please let me know if I left out any important details and if you have any questions.

Leave a Reply

Your email address will not be published. Required fields are marked *