React JS Tutorial for BeginnersPosted on 29 Sep by

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.

 
React js tutorial for beginners


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.

 
React js tutorial - react js app tutorial


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.



React js tutorial - contact-js-react-app


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   

This resource was published by
29 September 2016

POST YOUR COMMENT

2 responses to “React JS Tutorial for Beginners”

  1. mobile app prototyping says:

    Pretty! This has been an incredibly wonderful article.
    Thanks for supplying these details.

  2. Ramya says:

    Hi,
    Nice article.very nice information about the ReactJS
    Cloud you explain the How do I write a simple login or signup form using React framework?

Leave a Reply

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