The objective of this document is to help a person who wants to learn and start working with ReactJS. It tries to covers the basic knowledge and elements of ReactJS and how to implement those in web applications and mobile app development and also why we should use React.
What is ReactJS
- ReactJS is used for handling the view layer for web and mobile apps.
- ReactJS allows us to create reusable user interface (UI) components, i.e., UI Library.
Components Make React Highly Reusable
A normal webpage has a lot of components, like it can have a header, a side bar and a main area where it can contain list and several list items, grid, etc. ReactJS takes up this concept to split up into components and also allows us to build reusable components which we can use throughout our webpage which not only holds HTML code but also JS logic that allows you to listen to user actions to display content dynamically and update the UI whenever needed without having to reach the server and fetch a new view.
The virtual DOM is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory. Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created. Updating the browser’s DOM is a three-step process in React.
- Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
- The difference between the previous Virtual DOM representation and the new one will be calculated.
- The real DOM will be updated with what has actually changed.
Small Learning Curve
React has a relatively small API so getting up and running should take only a matter of few weeks to a few months for most experienced developers.
React Can Be Used for Mobile Apps and VR
React API can be ported over to mobile development using their React Native project. We can also use the same architecture to design Virtual Reality apps with React.
Before we start, we should have a basic understanding of:
- HTML DOM
Steps to Create a React App
To create React App, we need to run the below comments:
npx instead of
npm because it will create the React app named "
react-training-app" with all the dependent libraries.
ReactJS – JSX Type
- Components are generally written in JSX.
- It helps to create a virtual DOM by returning HTML.
- It is also type-safe and most of the errors can be caught during compilation.
ReactJS – Components
Our first component in the following example is
App. It simply returns a text "
The below code shows how to call a component within a component:
ReactJS - Component Lifecycle Methods
The lifecycle methods are various methods which are invoked at different phases of the lifecycle of a component. We can categorize these methods into three based on component initialization, updation and destruction. They are:
- Mounting methods (initialization)
- Updating methods (updation)
- Unmounting methods (destruction)
Below are the Component lifecycle methods that will be called in the different stages:
componentWillMount is executed before rendering, on both the server and the client side.
componentDidMount is executed after the first render only on the client side.
componentWillReceiveProps is invoked as soon as the props are updated before another render is called.
shouldComponentUpdate should return
false which determines if the component will be updated or not.
componentWillUpdate is called just before rendering.
componentDidUpdate is called just after rendering.
componentWillUnmount is called after the component is unmounted from the Dom.
ReactJS – State
State is the place where the data comes from.
State of a component is an object that holds some information that may change over the lifetime of the component. Basically, it is an object of a set of observable properties that control the behavior of the component.
The below code demonstrates a simple use of
State where we increase the number (i.e., count variable) when a button is clicked and that is displayed in a
ReactJS - Props
Props are also used to hold data in a component but
Props are immutable. When we need immutable data in our component, we use
The below code demonstrates a simple use of
We have already learned about
Props and we got to know that both
State are objects for holding information to control the behaviour of that particular component, but
states are nowhere near the same. Let us differentiate between the two:
Props are immutable, i.e., once set, the
props cannot be changed, while
State is an observable object that is to be used to hold data that may change over time and to control the behaviour after each change.
States can only be used in class
Props don’t have this limitation.
I hope that with the help of this article along with examples, I have hit upon the important concepts of ReactJS and that this will give you a quick start with ReactJS development.
- 5th March, 2019 - Initial upload