React js basics 1.0 :

by Ahin Subhra Das

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Fb and a community of individual developers and companies.

installation of react js :

npx create-react-app initial0.1 , here initial0.1 is my project name .

What is the use of create React app?

: Create React App (CRA) is a tool to create single-page React applications that is officially supported by the React team. The script generates the required files and folders to start the React application and run it on the browser.

Difference between react ,angular :

Angular is a full-fledged framework, while React is a library. React. js uses virtual DOM and one-way data binding while Angular operates on real DOM & two-way data binding.

Why we use ReactJS ?

The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of the apps. It uses virtual DOM (JavaScript object), which improves the performance of the app. The JavaScript virtual DOM is faster than the regular DOM.

Basic structure of our folder:

From the top we have node modules that is fill with many plugins like babel , prompt etc , after that we have public folder that includes index.html that is our base html file . Then we have src folder that contains index.js and index.css file . Index.js is our root js file. Igonering other files we look into package.json file that includes our packeages .

Print hello world program :

index.js

import React from ‘react’;

import ReactDom from ‘react-dom’;

ReactDom.render(<h1> Hello World techbuddies!</h1>,document.getElementById(‘root’));

In modern js we use import instead of var . First two lines we import two packages one is react and another is react-dom . After that with the help of ReactDom.render we render our content where we want .

Here document.getElementById(‘root’) :’root’ is come from index.html file in our public folder .

After start the npm server we check our browser with default address of react http://localhost:3000 .