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.
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
- DOM manipulation is the heart of the modern, interactive web. Unfortunately, accessing, rendering, rerendering real DOM is really very slow.
- 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.
2.The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
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.
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.
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 .