Top 10 uses of React

React: React is an open-source library used for building user interface and interactive for single-page applications. React allow to use the large application without reloading the page. If you use react the web applications' load speed is awesome. The main purpose of using React is to be fast, scalable, and simple.

Using React’s API: The ReactDOM.render method and React.createElement method are core API methods in react. A React web application can not exist without using this method.

Example:

ReactDOM.render(
React.createElement(
“div”,
null,
“Hello React”,
),
document.getElementById(“your id name”),
);

JSX use in React: JSX is not understood by the browser if you type JSX in the browser console its shows an error. The browser has to React library includes its React.createElement API calls. This example is written below:

Example:

const button = (props) => {
return React.createElement(
“button”,
{ type: “submit”},
props.label
);
}
ReactDOM.render(
React.createElement(button, { label: “save”}),
);

onClick property in React: Its a very useful in React. If you have a button and need to clickable this You need to add onClick on the button. When you add this then open the browser console and click this button you see this will work every time once you will be click.

Example:

<button id='btn' onclick="click()">Click me</button>
function click() {
document.getElementById("btn").innerHTML = "Hello World";
}

useState use in React: useState is very common to use in React and if you use it your life is easier. Firstly when you use useSate remember to import this hook. This useState function returns the array two times. Simply declare a useState then destructuring to give this item name. I give some example below —

Example:

const btn = {} => {
const [count, setCount] = useState(0);
return(
<button onClick={() => setcount(count + 1)}>{count}</button>
);
};

Props use in React: You can use props to dynamic your website. simply declare the first component and map it to another component to use props. Then you can use all in other component and does not write many.

Example:

vehicle.map(data => <Vehicle data={data} key={data.id} ></Vehicle>)
const Vehicle = (props) => {    const { name, image, id } = props.data;

Conditional Rendering in React: Conditional rendering is the most useful thing. it will be needed anytime to render. Think you have a login page when a new user comes he/she can’t log in because she/he is new to this purpose you can use conditional rendering.

Example:

const [newUser, setNewUser] = useState(false);
return(
{
loggedInUser.success && <p style={{ color: 'green' }}> user 
{newUser ? 'created' : 'Logged In'} 
successfully
</p>                     
}
)

useEffect use in React: If you have API simple use useEffect hook you can easily get all data to use this hook. You need to declare useState hook first then set two values like products setProducts. Then declare useEffectall fetch API then all data load into setProducts then use products to load all data in the website.

Example:

const [products, setProduct] = useState([])
useEffect(() => {        
fetch('your API or backend adress')
.then(res => res.json())            
.then(data => setProduct(data))     
}, [])

Context API on React: You can use context API on react on the home page means you have many components like 5–10 or more you can easily defined context API on app.js then all components can access this context.

Example:

<UserContext.Provider value={[loggedInUser, setLoggedInUser]}><Router> 
</Router>        
<Switch>
</Switch>
 </UserContext.Provider >

Link Use in React: The most common uses of Link tah. You can easily go one page to another page by use Link tag just define the page you want to go.

Example:

<Link to="/dashboard/serviceList">Get The Service</Link>