A Day with React

1.React Hooks

React hooks are some predefined functions of react. There are many hooks and some of them are usually used all the time.
#useState()
#useEffect()
#useContext()
#useReducer()

you can also build hook by yourself and use that over and over again

2.JSX
Jsx is a javascript syntex extension. Don’t confuse it’s not how react work. let’s understand the basic flow of jsx in react

as we know react don’t work with jsx it’s basically a way so that we can write code in javascript like html if you don’t use jsx than you have to write html codes like javascript

what jsx does is it have a translator or compiler what turns jsx codes into javascript code and input it into react way. In react we write codes like this

3.Props in jsx

There are many ways in jsx to define props let’s discuss about them.

js expression as props

<Component props={1+2+3}></Component>

you can pass strings like this

<Component props={‘helll world’}></Component>
<Component props=”hi there”></Component>

4.Children in jsx

anything you write between the starting and closing of the component is jsx child. example

<Component > hi there</Component>

hi there is a jsx child.
You can nest other components as a jsx children and you add more than 1.

example:
<BigComponent>
<SmallComponent/>
<MiddleComponent/>
</BigComponent>

Here’s SmallComponent and MiddleComponent is jsx children

5.DOM and Virtual DOM

DOM is actually Document Object Model. In web we use dom to do everything. You can imagine the whole document as a object and we work with object to manipulate it. like we see the full thing as a tree model. where we can use CRUD to create,read,update or delete data in document.

In react first time it will render the whole document but when you update it’s one part rather than re rendering the full dom again what it does is it’s create a virtual dom. than it compares the virtual dom with the actual dom and find the difference. And update only that thing rather than updating full dom.

6.What is React (A framework or library)

React is a javascript library. Framework and library are not the same thing. Framework is a full packed solliution where you have to follow their rules and system.

On the other hand library is not a complete sollution you need to install other libraries with it. but it’s very much flexible. and also fast.

In framework if you have to use only 2 line of code you need to call the full code but in library you just need to use the code you have written

Framework is not suitable for larger companies because they have so much complex things going on so it’s harder for them to follow a framework.

So react is basically a javascript library used for building user interface

7.ReactDom.render and React.createElement

React renders our written codes to web page readable. For this rendering work we need to call
ReactDom.render()

ReactDom.render() take 2 arguments html code and html elements

it’s work is to just render the code in dom

React.createElement is used for creating elements into react. It’s basically have 3things

import React from ‘react’;
import ReactDOM from ‘react-dom’;
const title = React.createElement(‘h1’, {}, ‘My First React Code’); const container = React.createElement(‘div’, {}, title); ReactDOM.render( container, document.getElementById(‘global’) );

here in react.createElement first you need to write the tag (html tag like div). 2nd thing is atribute if you want you can write attribute and 3rd thing is the value.

8.React js Props

Props is a keyword that stands for properties in react and it’s used for passing data from parent component to child components. This call props drilling method. You can only read props can’t change it from child components.

It’s a unidirectional data passing system. It can pass data only in one direction parent component to child component. But it can’t pass the data to the parent component from the child component.

9.Higher Order Component In React

10 . React Performance Optimization useMemo()

useMemo() is a react hook used for caching react components . Basically we can cache the components and cpu expensive functions .

Their are a lot of huge functions that take a lot of time to execute . It will kill the performance of our application. We can cache them with useMemo().