React is an excellent tool with which to create interactive applications for mobile, web, and other platforms.
JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.
Components are the building blocks of any React application, and a single app usually consists of multiple components. It splits the user interface into independent, reusable parts that can be processed separately.
React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.
We have to install a react-router-dom package to do routing
We have to use the onclick() function
Axios is a package with which we can get data or insert data into a database with API
We use props in React to pass data from one component to another (from a parent component to a child component(s)). Props is just a shorter way of saying properties.
Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. They are used in cases where we want to change the value of a child component, without making use of props and all.
React Router vs Conventional Routing: React Router is a library for React that provides routing functionality. It is different from conventional routing in a few ways.
First, React Router is declarative. This means that you specify what you want your route to look like, rather than specifying how to get there. This makes it more user-friendly and easier to read.
Second, React Router is modular. This means that you can use only the features you need, rather than having to include everything in the library. This makes it more lightweight and efficient.
Third, React Router is asynchronous. This means that routes can be loaded on-demand, rather than all at once. This makes the application more responsive and efficient.
Fourth, React Router is composable. This means that you can create complex routes by combining multiple routes together. This makes the routing process more flexible.
Example: Now we are going to use React router to add routing in our app. For this, we will create a new ‘pages’ directory in our ‘src’ folder. Inside this newly created directory, we will create two JavaScript files ‘Home.js’ and ‘Data.js’ with the below content.
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.
The useRef Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly
By using this Hook, you tell React that your component needs to do something after rendering. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.
Mounting - Mounting means putting elements into the DOM.
Updating - A component is updated whenever there is a change in the component’s state or props.
Unmount - The Unmount method is called when the component is about to be removed from the DOM.
A higher-order component (HOC) is an advanced technique in React for reusing component logic.
| PROPS | STATE |
|---|---|
| The Data is passed from one component to another. | The Data is passed within the component only. |
| It is Immutable (cannot be modified). | It is Mutable ( can be modified). |
| Props can be used with state and functional components. | State can be used only with the state components/class component (Before 16.0). |
| Props are read-only. | State is both read and write. |
| Functional Components | Class Components |
|---|---|
| A functional component is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX). | A class component requires you to extend from React. Component and create a render function which returns a React element. |
| There is no render method used in functional components. | It must have the render() method returning JSX (which is syntactically similar to HTML) |
| Functional components run from top to bottom and once the function is returned it can’t be kept alive. | Class component is instantiated and different life cycle method is kept alive and being run and invoked depending on the phase of the class component. |
| Also known as Stateless components as they simply accept data and display them in some form, they are mainly responsible for rendering UI. | Also known as Stateful components because they implement logic and state. |
| React lifecycle methods (for an example, componentDidMount) cannot be used in functional components. | React lifecycle methods can be used inside class components (for example, componentDidMount). |
| Constructors are not used. | Constructors are used as it needs to store state. |
| Hooks can be easily used in functional components to make them Stateful. | It requires different syntax inside a class component to implement hooks. |
Functional Components ->
example:
const [name,SetName]= React.useState(‘ ‘)
Class Components ->
example:
constructor(props) {
super(props);
this.state = {name: ‘ ‘}
}
| Controlled Components | Uncontrolled Components |
|---|---|
| The component is under control of the component’s state. | Components are under the control of DOM. |
| These components are predictable as are controlled by the state of the component. | Are Uncontrolled because during the life cycle methods the data may be lost |
| Internal state is not maintained | Internal state is maintained |
| It accepts the current value as props | We access the values using refs |
| Does not maintain its internal state. | Maintains its internal state. |
| Controlled by the parent component. | Controlled by the DOM itself. |
| Have better control on the form data and values | Has very limited control over form values and data |
| createElement | cloneElement |
|---|---|
| createElement is the code that JSX gets compiled or converted into and is used by reacting to create elements. | cloneElement is used for cloning elements and passing them to new props. |
| This method is used to describe how the User Interface looks. | This method is used to manipulate the elements. |
| createElement requires a type, props, and children as arguments. | cloneElement requires elements, props, and children as arguments. |
| It creates and returns a new element with the type as given in the arguments. | It clones and returns a new element with the properties of a given element. |
| Axios | Fetch |
|---|---|
| Axios is astand-alone third party package that can be easily installed | Fetch is built into most modern browsers; no installation is required as such |
| Axios performs automatic transforms of JSON data | Fetch is a two-step process when handling Json data-first, to make the actual requst; second, to call the .json() method |
| Asios requst is ok when status is 200 and statusText is ‘OK’. | Fetch requst is ok when response object contains the ok property |
| Axios allows canceling requst and request timeout. | Fetch doesnot allow cancelling requst and requst timeout |
| Fetch has built-in support fordownload progress | Fetch doesnot support upload progress |
| Axios has a wide browser support | Fetch only supports limited browser |