What is ReactJS or I should say Why it is called so? Let me answer the first part first and then we will discuss the second part.
ReactJs is a Javascript library which helps in building great and interactive user interfaces. It was developed by Facebook in 2011 and currently its the most powerful javascript library around.
It is called so because at the heart of all react applications are the Components. A component is essentially a piece of the User Interface. So when building applications with React, we build a bunch of independent, isolated and reusable components and then combine them to build complex user interfaces.
Every React application has at least one component, which is referred to as Root Component. This component represents the internal application and contains other child components. So, every react application is essentially a Tree of components.
For Example, if you want to build an application like Twitter, we can split the requirements into components like the navigation bar, profile section, trending section and many more. One can represent these components in a tree. If we visualize it as a tree, at the top we have an App and below that we have Nav Bar, Profile, Trending and Feed and so on. And all these are components.
Now the feed component might contain several tweet components, each tweet component can include a lightweight component which we can reuse on other pages or even is several other applications, so as you see each component is a piece of UI.
We can build all of these components in isolation and then put them together to build complex UI in terms of implementation. A component is usually implemented as a Javascript class that has some state and a render method.
The state here is the data that we want to display when the component is rendered. A render method is responsible for describing what the UI should look like. The output of this render method is a react element, which is a simple plain JavaScript object that maps to a DOM element.
A point to consider over here is, it's not a real DOM element, however it's just a plain JavaScript object that represents that DOM element in memory, so react keeps a lightweight representation of the DOM in memory which we are referring to as the virtual DOM unlike the browser or the real DOM this virtual DOM is easier to create when we change the state of a component, we get a new React element.
React will then compare this element and its children with the previous one if it figures out what is changed and then it will update a part of the real DOM to keep it in sync with the virtual DOM. So that means when building applications with React, unlike Vanilla JavaScript or JQuery, we no longer have to work with the DOM API in browsers.
In other words, we no longer have to write code and query and manipulate the DOM or attach the event handlers to dom elements. We simply change the state of our components and react will automatically update the DOM, to match that state. And that's exactly why this library is called REACT, because when the state changes, REACT essentially reacts to the state change and updates the dump.
Advantages of ReactJS:
-
React uses a Declarative Approach: Supply with the minimum requirements and rest React will implement itself.
-
Reusable Code
-
Component-based approach
-
DOM updates are handled gracefully.
-
React is designed for speed, simplicity, and scalability.
ReactJS Installation
-
Install Node.js (Node is the most popular platform for tools to make working with React easier). Following is the URL: https://nodejs.org/en/download/
-
Select your OS and Download the LTS version, which is recommended for most users and is the stable version.
-
Open command prompt, and type the following command: node -v, which will return the current version of the node installed on your system.
-
To install react, we need node package manager(npm), and with the following command, we can install ReactJs.
npm install -g create-react-app
- Now give a name to your app, with the following command:
create-react-app first-reactapp
-
While this intallation is going on, open the app folder, and you will notice a package.json file, where you can view the version for npm, DOM etc.
-
After the completion, you will find few instructions on command prompt, asking you to change directory to first-reactapp and then run the command npm start, to start the server.
-
Once your server is up an running, you will see the following screen on your browser.
- Open your folder location in your favourite editor(mine is Sublime Text) or IDE(VS Code) and you can study the whole folder structure over there.
So guys this is just the beginning. We will explore more about ReactJS in the upcoming sections of this tutorial.
You may also like:
