× logo Home HTML CSS Javascript React-App Angular.js logo

The roadmap to learn React


What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
It lets you compose complex UIs from small and isolated pieces of code called "components". We can build any type of modern web apps such as single-page apps, progressive web apps by using React.

What are the major features of react?
- React Features
- JSX.
- Components.
- One-way Data Binding.
- Virtual DOM.
- Simplicity.
- Performance.

Basic Folder Structure Explained

When you created the project, you would have noticed that it created a bunch of files. Here I will list out some of the important files and folders that you should be aware of .

public/index.html:When the application starts this is the first page that is loaded.This will be the only html file in the entire application since React is generally Written using JSX which I will cover later. Also, this file has a line of code. <div id= "root"></div> This line is very significant since all the application components are loaded into this div.

/src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for "source code".

src/index.js: This is the javascript file corresponding to index.html.
This file has the following line of code which is very significant.
ReactDOM.render(, document.getElementById('root'));
The above line of code is telling that App Component ( will cover App Component soon) has to be loaded into an html element with id root. This is nothing but the div element present in index.html.

src/index.css: The CSS file corresponding to index.js.

src/App.js : This is the file for App Component is the main component in React which acts as a container for all other components.

src/App.css : This is the CSS file corresponding to App Component

gitignore: This file tells git which files it should not track / not maintain a version history for.

Package.json:This File has the list of node dependencies which are needed.

package.json: A manifest file for Node.js projects, which includes things like metadata (the project's name, author, etc). This manifest is how npm knows which packages to install for your project.

Package-lock.json: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project.(You won’t change this file directly).

README.md: A text file containing useful reference information about your project.

build: This is the folder where the built files are stored. React Apps can be developed using either JSX, or normal JavaScript itself, but using JSX definitely makes things easier to code for the developer :).
But browsers do not understand JSX. So JSX needs to be converted into javascript before deploying. These converted files are stored in the build folder after bundling and minification. In order to see the build folder Run the following command