07 Sep 2022 ‘React for Beginners’ explained by a Beginner
Here are some key points:
React uses JSX
Creating a React app
For beginners, it is advisable to use “create-react-app”. “create-react-app” is a script that generates the required files and folders to start the React application and run it on the browser.
To use create-react-app, first, install Nodejs, and then 👇
Document Object Model (DOM) and Virtual-DOM
The essence of the Virtual-DOM is that it is the reason React renders so quickly and efficiently. When objects are painted to the DOM directly (without using React), it takes significant time to render the element again and repaint the screen. However, when using React, objects are painted to the Virtual-DOM first, then compared to the actual DOM if there is a need to update.
If there is a need to update the actual DOM, react only and make changes to the change in the UI.
Every React application is made up of components. Components are the building blocks of a React Application. In React, there are two types of components, we have:
- Functional Component
- Class Component
A. Functional Component
A Functional component is an ES6 function that returns a React JSX element.
It starts with a capital letter and takes a prop as a parameter when necessary.
Below is an example of a Functional Component:
B. Class Component
Class Components are JS ES6 class that returns a react element (JSX). A class component takes props in the constructor when needed and must have a render method for returning JSX.
See example below:
Props in React
Props, short for “property a method” is used to transport data from one component to another in React. It is important to note that prop only transfers data in one direction. That is, from parent to child and not the other way.
Props can’t pass data from child to parent or component on the same level. Props are also used for passing data and not for manipulating it. Props make components more dynamic. See illustration below:
Thank you for reading!