Full React in Definition itself: Things you need to know before starting React JavaScript

So as we know that React is the most demanding web technology these days. If you wish to get yourself onboard for the react development, you may need to know what actually the react is and how to start working with it.

Topics covered in the article are:

1. What is react and why to use it?

2. Steps to install React JavaScript

3. Folder structure and Architecture behind the. installed files

4. Basic work flow of a React app

So now we are going to see the explanation for the above points one by one.

Definition of React: As stated in the official documentation of react, react is a JavaScript library used for building up the user interfaces.

Now lets see this definition in deep:

React uses the components for building up the user interfaces, so now you might think what is component. A component is a function or class that contains the JSX (JavaScript XML)

IMPORTANT: BROWSERS DO NOT UNDERSTAND THE JSX, SO THERE IS A NEED TO CONVERT THIS JSX CODE INTO THE CODE WHICH IS UNDERSTOOD BY BROWSERS EASILY

later on this JSX code is converted to the the pure JavaScript code, by using the tool named as Babel, that is easily understood by the browser and hence is show to the end user at the front end.

functionality of a component of react application

Component contains JSX code

Jsx is set of instructions to tell react what content to show on screen.

Now as we have seen what a component is, now the question is what’s the use of this component and how to use it?

Once we have created a component and we can re-use it as many number of times as we want, simply by populating it with different data each time. We will see it with the help of a diagram:

This is the basic component used in the react documentation:

Base component

This component contains the basic structure i.e. the heading section, paragraph 1 section and paragraph 2 section.

Now in the below figure we can see that the base component has been used 3 times, The main point to note down is we haven’t written the code 3 times rather we have just populated 3 different datum's to the base component. WOW! isn’t that amazing yes this is the actual power of react component. We can reuse it as many times, we want and anywhere we want.

Reusing the base component by populating different data each time

So this completes the part: Why to use react. I hope this clears your doubt regarding the point why to actually use react.

Steps to install react:

Install stable version of the node js. Go to the link given below and install:

Node.js

Now confirm whether node has been successfully installed or not by typing the following command:

node -v

if node is installed successfully, the version of the installed version would be shown on the screen, if not then node is not installed successfully.

Once you are ready with node, now run the following commands to create the react application and get yourself up and running with react app:

npx create-react-app my-app
cd my-app
npm start

After running the following commands you will land up to the following screen in you browser:

Landing page once we have successfully created react application

Folder structure and the architecture behind the installed files:

Once we have successfully created our react app we will see the following folder structure:

Folder structure of a react app

.git: This folder includes the files, which git needs to be ignored i.e. node_modules. Also while we try to upload the code to GitHub repository node_modules folder is ignored while all others get uploaded and the changes made to the code in them are tracked by git.

node_modules: This folder contains all of the dependencies used up in react project.

public: This folder contains all of the static files i.e. (files that never change html file, manifest and favicon.ico)

src: This is the folder where we put all the source code we write.

package.json: This file records all of our dependencies which we are using in our project and the configuration of our project.

package.lock.json: This file records dependencies with the exact versions.

readme: This file tells how to run our project particularly.

Architecture:

So when we open node_modules folder we see that there are 1000+ folders there, what’s the use of them. I will try to explain this with a simpler examples

Example 1:

As I talked about converting the JSX into simpler code which can be understood by browser, so answer is babel will convert it, but where is babel present? Answer to this question is: inside the node_modules.

Example 2:

React use the react library to parse jsx in the code editor, so where is react present, answer is same inside node_modules.

So basically this folder contains all of the dependencies, which are useful for running the react application successfully.

Basic Workflow of React App:

Workflow