Getting Started with React JS
If you want to create rich and efficient web apps with minimal coding, then React Js is perfect to work with. Originally developed by Facebook, React is a JavaScript library that builds user interfaces by dividing the UI into reusable components. And today it forms a major element of an array of applications such as Netflix, Instagram, Reddit, and many more. Before getting started let us go back to when react was introduced by Facebook.
History
In 2013, Facebook had spent a bit more effort integrating a live chat application that would be live and available across the app integrating virtually on every page of the site.
Facebook made two key innovations:
1. Unidirectional data binding.
2. Component state immutability i.e state doesn’t change existing view state. Instead, they trigger a new view render with the new state.
Why React Js?
“Codeless, do more!”
Imagine you want to build a commenting widget for a web app. You can split it into the toolbar, Text-Area, Social widget, etc. You need some magical solution for it. React allows you to do component-oriented abstraction and it solves the view portion of the Front-end.
Purpose of using React Js
1. JSX
JSX means that you can write JavaScript as well as HTML in combination which makes React js more powerful and efficient.
2. Reusable components
React uses a component-based approach. We can compose separate components such as header, footer and then write a wrapper component for it which can be rendered.
3.Virtual DOM
In the above figure, the colored circles represent changes made in the state. Virtual DOM calculates the difference between the previous and current versions and updates the same by re-rendering the entire tree. React analyze only those components that have changed in virtual DOM and then updates those in real DOM.
4.React Native
React js comes with a bonus. Yes, one can develop iOS and Android apps with react native. It is learning once, write anywhere. Although the code will not be the same, the methodology remains the same.
Installation
1.First of all, you need to have npm installed. Download and install it from the link.
2.Install node modules and run the application.
npm install
3.Start React Server.
npm start
You can quickly check the version of Node Js installed in your system by running the following command.
node --version
Create Our React Project
After completing the installation, let us create our first react project using a create-react-app script.
npx create-react-app <project name>
Now we can enter in our project by simply typing the command:
cd <project name>
Before Creating Our First application, let us first understand how to react js works behind the scene.
You might have been knowing DOM that forms the backbone of any web application. However, react architecture depends on virtual DOM. Now you might be thinking what is the virtual DOM?
Why is DOM slow?
Let’s first understand what happens in DOM. Every time the Layout changes, the browser needs to recalculate the CSS, do the layout and repaint the webpage. This often takes a bit more time. The biggest thing that can be done is to minimize and batch the DOM changes that make necessary redraws. Here the idea of Virtual DOM takes birth.
How do virtual DOM works?
Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.
Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created.
Browser DOM is updated in three processes.
1.Whenever anything changes, the entire UI is re-rendered in Virtual DOM.
2.Difference between previous and new Virtual DOM is calculated.
3.The Real DOM is updated with the changes that have taken place.
Props and States
What are Props?
Props, short for “properties” are single values, or objects containing values that can be defined or “stated” in a Parent component and passed down to its Children i.e in unidirectional flow. Here is an example is given below :
Initially, we need to define data from the parent component and assign it to the child component’s prop attribute. Here, “React js” is the data that we pass with props like an argument to function. Generally, props are immutable. But we can still use a callback function to update and change the prop value.
What is State?
React has another special built-in object called state, which allows components to create and manage their data. So unlike props, components cannot pass data with state, but they can create and manage it internally.
Also state can be modified using this.setState() method. In the below example using this.setState() state object “name” has been changed upon clicking the button. It will ensure that the component knows it’s been updated and calls the render() method.
Building first React Application
Open /src/App.js containing a React component, “App”. A component is like an instruction you write to tell React what you want it to render on the screen. You can even make your methods, but render() is the most important and commonly used method. You can use render to return a React element which is nothing but a description of how it should look on the screen.
Let’s create a simple increment and decrement Counter when clicked on the button.
First, we set the initial state using a constructor. As you can see, the state is an object with property clicks. It stores the value of how many times we click on the button.
The function Increasenum() will change our State clicks by incrementing the value by 1 while Decreasenum() will change our state clicks by decrementing the value by 1 using the setState() method.
Two buttons are created and we pass onClick methods to them while rendering the class components.
The index.js file is responsible for App component delivery to the final destination to give us the desired output. It imports App that we exported at the end of the App.js file and renders it into a container (DOM node) in public/index.html using ReactDOM.
Go to the project folder from the command prompt and type npm start, you can see that localhost:3000 is open in your browser .
