ReactJS| Introduction and Creating react app

What Is React?

React is an open source Javascript library for building fast and interactive applications.This library is mainly used for building the UI or view of our application.The beauty of react is that because its just the view it doesn’t necessarily mean that it’s only for web applications.

It can be used with mobile devices to build native apps.

You can also build desktop apps , virtual reality apps with react.

 

Components

React follows component based approach which lets you split your entire application into encapsulated parts which can then be composed together to form complex UI. In particular we can say, A component is a function or a Class which optionally accepts input (as props) and returns a React element.

Functional Component

Const MyComponent = (props)=>{

Return(

<ElementOrComponent…/>

);

}

Class Component

Class MyComponent extends React.Component{

Render(){

Return(

<ElementOrComponent…/>

);

}

One way data flow

In react there is one way data flow that means data always flow from top to bottom. Now to understand this look at this tree like structure as shown below.

tree

In the above diagram you can see we have parent A, A has children C and C has its own child F and G.Now consider C as a component ,if there is any change in this component than only its children F and G and their children J and K know about its change and the parent have no idea about its change.So due to this unidirectional flow in react niether parent component nor the components around it get affected by this change.

Virtual dom

Problem with real DOM

  1. DOM manipulation is the heart of the modern, interactive web. Unfortunately, accessing, rendering, rerendering  real DOM  is really very slow.
  2. Inefficient updating has become a serious problem with real DOM.

As an example, let’s say that you have a list that contains ten items. On changing any of the item in the list the entire list get rerendered again and again. That’s ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before.

Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation,which reduces the performance of our webpage.

To address this problem, the people at React popularized something called the virtual DOM.

Virtual DOM

 In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy or in particular we can say its a javascript representation of exact real DOM.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.

How virtual DOM works:
This Virtual DOM works in three simple steps.

1.Whenever any underlying data changes, the entire virtual DOM gets updated.

vdom1

2.The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.

vdom2

3.Once the calculation is done, the changed objects, and the changed objects only, get updated on the real DOM and then finally changes on the real DOM cause the screen to change.

vdom3

Rich Ecosystem

React work very well mainly with one thing and that is the view of our applications .Now what about routing ,http calls ,state management and other functionality of our applications.To achive this react has a really good ecosystem that works with latest javascript  technology to build fully fledged applications.

react

npm: You can find react package in npm.

babel : It converts JSX code into javascript so that browser can understand it.

redux : It manages the application state.

react-router : You can use this library for routing in our application.

Webpack : Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Creating React App

 

 

To create react application firstly we have to install two things in our machine.

1.nodejs

Now to install nodejs go to official website of nodejs  https://nodejs.org/en/ .

2.code editor

Now to install code editor you can use any editor of your choice like visual studio code, sublime, atom etc.

Create-react-app

To create react applications we have to use create-react-app tool.It is a command line interface tool by using which we can quickly create and run react applications without doing any configuration.

To run create-react-app tool simply run the command:

npx create-react-app <project-name>

Eg: npx create-react-app hello-world   

Npx is npm package runner.Whenever we installed nodejs in our machine npm also get automatically installed and with npm version 5.2 and above comes with npx using which we can simply run create-react-app tool without having to installed it.

After running above command will create project directory(ie.hello-world) inside the directory where you want to create your react project.

Now to run the application firstly go to the project directory then write the command:

cd <project-name>

npm start

This will launch a development server in the new tab of your browser at  http://localhost:3000/ and this is a place where you find your project is up and running.

There is one more approach that you can use to create react application and that is using create-react-app package.

You have to globally install create-react-app package using npm by running the command (in terminal):

npm install -g create-react-app

Then using create-react-app package you can simply create the react project by running:

create-react-app <project-name>

Now to run the application do the same as we do with npx.

cd <project-name>

npm start

I recommend you to use npx instead of npm because in case of npm we have to installed create-react-app package and also update it constantly but in case of npx we can easily run create-react-app tool without having to installed it.

I hope this tutorial will help you in understanding the basics of react and also how to create react application .

 

Leave a Reply