React Js 10 things you have to know

JSX: We know that React components have a render function. The render function specifies the HTML output of a React component. JSX is a React extension that allows writing JavaScript code that looks like HTML.

Props: Props is a unique keyword in React, which stands for properties and is being used for passing data from one component to another.

State: State is a JavaScript object that stores a component’s dynamic data, and it enables a part to keep track of changes between renders.

Functional Component: Functional components are common parts that will come across while working in React. These are JavaScript functions. We can create a functional component to React by writing a JavaScript function.

Example:

const example = () =>{

return (

<h2> function example </h2>

)

}

Class component: Class components are more complex than functional components, including constructors, life-cycle methods, render function, and state management.

Example: class MyComponent extends React.Component{

constructor(props){

super(props);

};

render(){

return(

<div> <h1> My First React Component! </h1> </div> ); } };

Hooks: When React 16.8 version release we see a additional API that we use useState without calling class. This API is called Hooks.

Example: useState, useEffect, useReducer.

Lifecycle of Components: React has a lifecycle in every component. In three main phases, we can monitor and manipulate. The three phases are Mounting, Unmounting, Updating.

React Events: React has the same events that look like HTML like change, click

Example: onChange, onClick

Redux: Redux is a state that which we can store data & pass this data from one component to another component easily.