Learn React JS in 5 minutes

What is React JS ?

React is a Javascript library for creating User Interfaces.
Simple For Interactive UI designs.
Efficiently update the screens & render UI components with dynamic data from server.

What is Single Page Application?

In a Web Page, dynamic data will be loaded from server to page, without reloading the entire page.,
So the web page will be more interactive., part of the components only required will be loaded based on states.

Pre Requistics For React JS

Since React JS is a Javascript Library, to setup React JS we have to install Node JS & install Node Package Manager.
Download Node JS and install it in your System based on your Operating system.

https://nodejs.org/en/download/

Once installed, automatically the node package manager will be installed., (npm)

Assuming the latest version of npm installed., npm versions > 5.2.0 has default npx binary.
where npx is just a simple binary/tool required for using the packages in npm.

Steps:

Open a terminal/command prompt., and navigate to any folder where we need to execute the React JS application.
Execute the below command to get the template to kickstart the React Js application.

$ npx create-react-app my-app

Naviagate to the folder “my-app” which is created by the above npm command., You could see the following structure., common for React JS.

public/index.html -> Main file which is called initially which contains the HTML content.
The index.html contains the <div id=”root”> where the React JS (Index.js) will render the components dynamically., replacing the div tag.,

Source code of generated index.html

The index.html calls the index.js scripts and default loads the <App/> tag., which is created by App.js using React JS.,

Generated App.js

Execute the following command to start the react JS Application

$ npm start

Once the npm started, the web page will be displayed as below.

Components: App

There are different ways in creating a component in React JS.,

  • Stateless Functional Component (Like above)
  • Stateless Functional Component – With Lambda Expression (using const)
  • Create a React Component class – with return
Stateless Function Component

The above code will render for <App/> tag with <div>Test</div> in the final HTML page.,
To learn more deeply on React Js, we need to learn more on

Leave a Reply

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