In recent years the explosion and demand for robust frameworks and libraries to work in the front-end side of applications have been enormous. Each year a new flavor comes out and tries to take the throne as the Front-end king. One of those libraries that have stayed consistent since its creation is ReactJs.
Created by Facebook is one of the top Front-ends libraries right now, and its popularity is rising as time goes by. If you're new to ReactJS, you should clearly understand its basics concepts, especially if you want to become an advanced ReactJS developer.
So here a list of basic concepts you should master if you want to succeed with ReactJS:
Definition
ReactJS is a javascript library, so no, it's not a framework. Its primary purpose is to assist in creating interactive and stateful UI components that developers can reuse.
If you consider a software design pattern like MVC (Model–view–controller), you can consider React as the application's view.
React can also work on the server-side and render a page on the server before displaying it to the client.
To work with ReactJS, we need a package manager like NPM or Yarn to install all the files en dependencies required. We can use the command create-react-app to quickly start developing our application since it creates an environment with all the basics that we need. We have to set the name of the application when using that command.
npx create-react-app my-first-reactapp
cd my-first-reactapp
npm start //If using npm
yarn start //If using yarn
Virtual DOM
One of the main characteristics of ReactJS is that it makes a copy of the DOM (Document Object Model) called 'Virtual DOM (VDOM)' to work within your application. React makes updates to the UI much faster and fluid by updating just the components that need to be updated and not the whole page.
The actual page's DOM is updated through diffing and reconciliation processes, and it uses the Fiber engine for this purpose. In the virtual DOM, you can find the same properties as in the real DOM.
React compares the virtual DOM with a DOM snapshot to identify what components need to be updated. This task is known as diffing process.
All of these result in a performance improvement that helps React applications to run a lot faster.
JSX
JSX is another addition developed by Facebook, and its main objective is to help in the writing of cleaner React code and improve the overall readability of the solution.
JSX is like a fusion of Html and Javascript since you can integrate them in a single code to achieve better results.
Here is an example of JSX:
<header>
<Component1 />
{
console.log("Data Validation");
}
</header>
As we can see in the example above, we have HTML code with the
tag, we have a custom React component with the tag , and we have javascript code between the curly braces with the console.log statement.This way, it is easy for the developer to write their codes and integrate the different web development aspects.
Components
One of the Key elements of React is Components. If you're going to work with this library, you need to think about components and how they will interact with each other.
It is recommended that before you start with the developing phase of your project that you take a moment to identify all the components that the application is going to need, this way, you will have a clear path o everything you need.
A component is a piece of code that you build for a single part of the user interface. It must have a specific function and be reusable to present data that can change in the future. A component should return a single outer element, whether it is an Html element, another React component, or a null value.
React lets you build class and function components, but since versión 16.8 React recommends that they are created as a function component, class components will never be deprecated. However, you're still going to need to work with them if you have legacy code.
import React from "react";
const Component1 = () =>{
return (
<h1> This is a basic component </h1>
);
};
export default Component1;
Data Handling
To work with data, you have two main React options, and they are Props and State.
Props should be used for data not supposed to change in the component's lifetime, while state should be used for data that will change.
State should be considered the single source for data that is going to change over time. Usually, we are going to place the state in the highest component that needs that data. Then that component can pass that data to the child components via props.
According to the React documentation, props are a way of passing data from parent to child. Props should not change once they are set. To change the props value, it must be re-rendered by the parent component with the new value.
Let's consider this example:
//Parent Component
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";
const Component1 = () =>{
const [color, setColor] = useState("green");
return (
<ChildComponent color={color} />
);
};
export default Component1;
//Child Component
import React from "react";
const ChildComponent = (props) =>{
return (
<h1> This is a prop {props.color} </h1>
);
};
export default ChildComponent;
As we can see, we have two components, Component1 has a state for the color, and we are sending this value to the ChildComponent via props. Then in the child component, we are receiving the props and placing them inside an h1 tag.
Hooks
Since versión 16.8 of ReactJS, we can work with hooks.
Hooks are a way to 'hook' yourself into react state and other react lifecycle features.
React has several hooks that we can use, the more essential to use in our apps are:
- State Hook: this one allows the use of local state in a functional component. You can use more than one state hook in a component, depending on your needs.
import React, { useState } from "react";
const [count, setCount] = useState(0);
- Effect Hook: it allows to hook into the lifecycle of a component to perform specific tasks. This hook replaces the methods commonly used in class components.
import React, { useEffect, useState } from "react";
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count++)
}, [count, setCount]);
Other hooks available:
- useContext
- useReducer
- useMemo
- useCallback
- useRef
You can also build custom hooks based on different scenarios you want to include in your application.
Useful Links
Here are some useful links that can help you continue your path to master ReactJS.
How to deploy a React application to Netlify
ReactJS Official Documentation
You can find an excellent course on ReactJS and other technologies in the CloudAcademy Platform.