React JS Tutorial for Beginners

Last weekend, I was trying to find the boilerplate repo for ReactJS SPA (Single Page Application) to figure out the best folder structure that can be adopted for React js projects. I could not find anything on the folder structure, but was able to find two starter/boilerplate repos. I decided to learn more about the two starter/boilerplate repos in order to make a sample folder structure by myself, to be used in ReactJS projects.

1) create-react-app –
The create-react-app is developed/configured by Facebook as part of the Facebook incubator.  This tool will help you to create React apps without the need for any build configuration.

2) generator-react-webpack –
The “generator-react-webpack” is a yomen generator for ReactJS applications and can be used to quickly set up a project along with the karma test runner and the Webpack module system.

 

I have installed  the create-react-app in my local system –  it has a very simple installation procedure and doesn’t require any configuration. I suggest going through the “README.md” file to know more about the installation procedure to create-react-app.

 

I have created another repo to implement sma-react-boilerplate. You should make sure that the repo is cloned to see the related files as shown in the image below. I have not worked on developing a CSS to make the page more attractive as this tutorial is just a basic demonstration of the tool.

 

The “public” folder contains index.html and .favicon files, and they should not be messed with. The folder that requires our utmost attention is “src” – more commonly known as ‘a developer’s playground.’ This folder contains an index.js file, which is one of the core elements of the application. This file is used to write the router characteristics of the application. The root(“/”) router here is pointed to Home components for the user to see the ‘Home Page’ when attempting a call.

 

Inside the “src” folder, I have created separate files for each page like Home.js, About.js, Contact.js, etc. Each file contains a “components” folder. This folder is used to keep the components of each page. You can refer the Contact.js file and the Contact folder for more clarity. Each folder may have different components and can be saved in different files.

Finally, we have three more folders –  “Common”, “layout” and “Forms” – within the “components” folder. The “Common” folder is used for generic components while the “Layout” folder is used to save files related to the Header and the Footer. The “Form” folder can be accessed for elements like Textbox, Textarea, etc. These folders can be considered as common components depending on the scenario.

 

I hope that you have got a general idea about developing a sample application and the folder structure associated with it. These simple concepts can be used in developing small and large scale applications, but keep in mind that the heavy applications require a more modular folder structure. You can reach out to me at https://twitter.com/shemeermali for any queries that you may have on the subject.

 

Happy Reactive Coding