ReactJS

**What is React?**

React is JavaScript framework with the help of this we can create more interactive user Interface (UI).React is all about creating components. Components are basically chunk of code like functions we create to perform a particular task and return certain result but in case of components it return HTML via a render Function.//later

We can create component in two ways-//define components

-Functional Component
-Class Components

In this blog I am going to talk about functional components

**Your mind might wonders why react?**

And I will say that’s a valid point to think you might think I know html, CSS, java script why do we even need Reactjs
-the main purpose of react is that it is fast , simple and scalable you will write hundred line of code in java script to perform a particular task but with the help of react you can do that in ten lines of codes apart from this it is easy and main plus point is that we have to create component and it is usable you have to just change the data no need to write same code again and again.//add reusable
- it allows developers to write their apps within js. This is due to the feature React provides for developers JSX (java script XML) it is one of the common features by which we can write HTML in JavaScript.
- Developers can break a complex UI in smaller components for the best rendering performance.
- It uses virtual DOM virtual DOM allows react to know when exactly to re-render. It compares with the actual DOM and render the changes if any.

Function App() {
return (
<div className =”App”>
<h1> Hello world </h1>
</div>
)}
ReactDOM.render(<App/>,document.getElementById(‘root’));

This is one simple app component in react in which it will render Hello world.
But what exactly happening here without JSX let’s see

Const App = React.createElement(‘h1’,{}, ‘Hello world’);
ReactDOM.render(<App/>, document.getElementById(‘root’));

Imagine your App contain thousands of line of code how difficult it will be without JSX !!! so in short React make it very Simple and reusable.

-Terminology in React
**Props**

Props stand for properties. You remember on declaring any function how do we pass arguments in the function and play with those arguments and return the result same thing we do here
Props are functional arguments in JavaScript and and seems like attribute in HTML. We pass data from one component to another component with the help of props let me show you and example

Function App(props) {
return (
<div className =”App”>
<h1> Hello world to {props.myName} </h1>
</div>
)}
Const element = <App myName = {ReactJS}/>
ReactDOM.render(element, document.getElementById(‘root’));

Here, myName is pass as a props in App component and on rendering it will display ‘Hello world to ReactJS’. See how simple is that, Now we can pass dynamic data(data coming from the API or any other sources) to component where we actually need that data and do our stuff.

**Hooks**

Hooks allow function components to have access to state and other React features. Because of this, class components are generally no longer needed.
Rules of Hooks
-only call hooks at the top level. Don’t call it inside loops, conditions or nested function
-only call hooks from react function components.

**State Hook**

Before declaring any hooks first we have to import it from React
useState hook is important for changing data of variable that we define Let me make you understand with an example

import React , {useState} from ‘react’;
Function App(props) {
const [count, setCount] = useState(0)
return (
<div className =”App”>
<p>You have clicked the button {count} times</p>
<button onClick = (()=> setCount(count+1)) >Click here </button>
</div>
)}

Here I define a count variable to 0 and with the onClick event when you click the button it will increase the count value by 1 and this dynamic change is happening because of setCount variable on every click it set the value of count.
You can define as many as useState variables.

**useEffect**

The useEffect Hook allows us to perform side effects in your Components some examples are- Fetching data , updating the DOM, and timers. It renders everytime the page get loaded unless you pass any dependency
useEffect accepts two arguments like
useEffect(<function>, <dependency>)

-here function may include fetching data from api, timers and whatever you want to updata on DOM
-dependency we can pass dependency so that it will render only when the only passed dependencies get changed