React is one of the most popular and extensively used JavaScript libraries to build web user interfaces. It was introduced by Facebook. React offers state of the art elements, components, and structures to build fast Single Page Applications and websites. It only deals with the front end specs of a webpage. React enables developers to create big-scale web applications that can update the data in the DOM, without having to reload the page. The core objective of React is to make web application development simple, fast, and scalable.
React simplifies the web application building process by dividing the webpage into different sections known as Components. Hence, components are the heart and soul of the React development. Understanding the basics of React mainly interprets into understanding how React works and how components are created.
React Component Driven Development
A Component is basically just the composition of HTML, CSS, and JavaScript. Simply put React component is a function that takes some properties and returns a UI template or element.
There may be many unorthodox ways to create a component in React. But, here we are going to make ourselves familiar with the two most used and essential ways:
- Class-based components
- Functional Components
Components that are written using ES6 classes instead of functions are called class components. Class components are basically the old traditional system of formulating classes in React. They are stateful that holds the state data as well as returns the UI template. The class components reflect the dynamic data as they can re-render on the basis of change in states.
Functional components a new way of representing a component in the React ecosystem where we define components as a function. Here, we use a simple function instead of methods defined in class components. It accepts the props optionally and returns the React template to be rendered to the page. These components reflect the stateless component which does not hold any state variables or state changes. Hence dynamic data binding and state changes do not occur in the functional component.
However, with the introduction of React Hooks in the latest updates of React, we are now able to inject states inside the Functional components as well. With the availability of hooks such as useState, useEffect we can trigger the state changes inside the functional component as well.
Virtual DOM
Another major element provided by the React ecosystem is the virtual DOM. We all must have a simple knowledge of the Document Object Model (DOM). Basically, DOM is the representation of the HTML markups in a webpage. The document here refers to the webpages. The objects are the HTML tags inside the webpage that forms a tree-like structure.
View Website
View Website
View Website
React offers another layer of DOM before the actual DOM which we call the React Virtual DOM. What happens is, if any changes occur in code, the DOM will be completely rewritten and updated with new changes. This process in long run can be expensive in terms of time as each new change can re-render the whole Document. The main issue here is any smallest of changes triggers the re-render of the whole document which is inefficient in its own way. Hence, React Virtual DOM provides the solution to it.
In case any changes occur, React creates a copy of the actual DOM, which here is a Virtual DOM. Then it identifies the areas in which the changes were made and updates those sections in the Virtual DOM. And finally, React reflects only the updated parts from Virtual DOM to actual DOM. This prevents the complete re-writing of the DOM. Hence, Virtual DOM plays a key role in optimizing the performance of React apps.
Getting Started with React
In order to create a React project, we must have Node installed in our system. You can simply download Node from its official site. Once Node is installed, we can simply download the React starter project by executing the following command in the terminal addressed to the desired local repository:
npx create-react-app example-react
The command will download the React boilerplate project which you can open on any Code Editors. (Recommended: VSCode). The create-react-app is a library that offers the latest version of the boilerplate React project with everything installed. It makes the React web app development process simpler.
Now, by opening the terminal addressed to the project repository, we can execute the following command to run the React project in the localhost:
npm start
Lastly...
The article dealt with the basic concepts when it comes to React development. There is no doubt that React has become one of the leading web technology for web apps and websites. The community it has to establish is huge. There is no mistaking that React is component-driven development and it is essential to grasp its concept before embarking on the development process.
Moreover, there are regular updates to the React library optimizing the overall workflow and performance. Hence, one must be up to date with the latest happenings in the world of React.
Comments (0)