How to Run JSON server and shortcuts of making functions?

We can write custom commands in the package.JSON file. Here I have mentioned ”filename” to start my json-server.

Command to run any custom command is - npm run filename

RCC for new class-based component. RFC for new function-based component.

These are stateless components.

These are stateful components.
How to pass props in a class-based component
How to pass props in a function-based component
Use of States in class-based component
Use of States in function-based component

Instead of importing useState we can use

const[value1,value2]=React.useState(value3);
De-structuring in function-based component

De-structuring in class-based component

How to do event handling in React?
- In Function based component you have to write a Function inside the main
function.
- In Class based component you have to write a method inside the class but
outside of the render() method.
The simple difference between normal function and an Arrow function is :- A
Arrow function has the access to ‘this’ keyword.
 e.preventDefault() is a method which restricts the form to be submitted
React Lifecycle

Why we use componentDidMount?

We use componentDidMount to call the API, because first render method will call
and load all the html components ,DOM then APIs will be called.
 In class-based component first constructor will becalled followed by Render
and componentDidMount().
ComponentDidUpdate?
Every time a props or state will be updated the method componentDidupdate will
be called. It will always return the previous state or props of the current state or
props.So every time a condition should be there in the method.
When shouldComponentUpdate() returns false then componentDidUpdate will be
not called.
useEffect:

At line number 8 I have pushed [data]state as a second argument. It means

useEffect state will be called when there will be a change in [data]state.
At line number 8 I have pushed [data]state as a second argument, but if I will send
empty array [ ] as a second argument It means useEffect state will be called once
throughout the life cycle.

Array Listing with Map function

We cant use For loop or While loop because return statement In ReactJS cant
understand them. Instead of them we have to use “map” function.

React Fragment

Here to enclose all my elements I have put <React.Fragment></ React.Fragment>

It erad icates the use of one parent <div> tag.
In the latest React versions these React Fragment Tags now can be replaced with
empty tags <> <h1></h1> </>;
Lifting State Up or Sending data from child to parent
This is being used to send the child data into Parent(Any props ,variables or states
can bs passed)

Below App.js is the parent and Form.js is the child.

Pure Component
Pure component is used to constrain the re-rendering;
Re-Render should be there when there is a change in any state, but render will be
there if state is changed(let state value is 1 and I am changing state value to 1
again and again so here the page performance will be slow. So we can use Pure
component to restrict this.
UseMemo hook

Here the issue is I have declared a function “multiCount()” insdide the render
method. Where multicount function returns when count state update takes place.
But this function is also called with the change of Item state because the function
is defined in the middle of render Method without any condition. By this type code
the page will become slow and performance issues will be there.So to overcome
from this type of issue we can use useMemo hook.
Ref use in ReactJS(Class Based Component)
React tells to use Ref incase of emergency or in a very minimum way.
It always manipulate the DOM. If you will manipulate DOM then ReactJS will
become slow.
Below image shows how to use “Ref”

If you will go to browser and see the condsole will show all the properties of input
box. See the below image
Line number 16 can change the input text value into red after clicking the button.
Line number 17b can change the background color of input box after clicking
button.

These all examples were for class based component.

useRef hook use in ReactJS(Function Based Component)
Similar like when we wanted to manipulate DOM in function based component we
use useRef hook. If there is need to change the direct properties of a input box like
value or color or focus then have to use it.

forwardRef in ReactJS(Function Based Component)

This is nothing but just a advance version of Ref.
CaseStudy – Let you want to change the DOM of a element like input box which is
present in child component by a button which is present in parent component.
Here we have to use forwardRef.
This forwardRef is a wrapper in itself.
Same way we can write this forwardRef code for class-Based component.

Controlled Component in ReactJS

In React when we control input fields through States then we call it as a Controlled
component.

Its not showing the defaultvalue because we have set the value={val}. Remove it
and it will show the defaultValue or by state array destructuring.
Uncontrolled Component in ReactJS

Uncontrolled means we are not controlling the input fields through states. We are
manipulating the DOM by using Refs.
Higher Order Components in React
A component which takes a different component as a props and returns another
component

React Router
To install React Router type npm install react-router-dom
Setup Wrapper for React Router. i.e. Import {BrowserRouter} from “react-router-
dom”. Or
 In the below Picture we have to import BrowserRouter,Route and Routes.
 Always have to give path as /“YourComponent Name“
Use of Params in React Router
You can’t apply any class for CSS purpose in “Link” tag, instead of this you have to
use ”NavLink”. So if you are directly applying inline style then it will have the
utmost priority rather than any className

Active Link styling in React JS

use SearchParams and setSearchParmas in

React Router
This is a hook used in React Routers
Pic-1

Pic-2
In the above picture-1 we have written the code how to use useSearchParams
hook. What is the use of it? – Its used to get the value from any
queryParams(QueryParams is the value which is shown in the URL section) shown
in the picture 2. I have used useQueryParams hook to get the value of city from
the query params. Here the city value is Noida and Age value is 10. So its showing
these values in the console.
If I want to set the QueryParams value into some user provide value then I can use
the setSearchParams hook.

We can also use both the QueryParams type in a single code. Here both the text
value and age value.
Navigation through Button Click

Here I have used useNavigate hook from react router.

useLocation Hook in React Router

When we route from location to another location, if we want to check what we got
in the new route or old route then we have to use useLocation hook. All other
hooks don’t give us datas in object with hash or key but this hook does.

What is key – when we route from different location to another then all the routes
will have their unique key. Its not being used frequently and every time while
routing it will generate a new key.
What to modify and how to get different type of properties value –
To get the value of property ‘key’

Hash is also a type of route. It can be a ID of an route.

To get the value of pathname property.

How to get the states value :
What is Routing?
If we convert all the components into pages then we give them specific links where
they will perform differently according to their functionality, that is what called as
Routing.

Always use switch as a wrapper in while using Routers

Dynamic Router in React

API calls in React.
API stands for Application Programming Interface.
React or Angular, both can’t be connected directly to Databases.
When we need to show some data’s then we must use GET method.
When we need to store something in the data base then we must use POST
Method.
When we need to update any data then we must use PUT method.
When we need to delete any data then we must use DELETE method.
Postman is used to test the APIs.

POST Method in Rest API

Post method is used to create a new data.
Delete Method in React
Pre-Filled Form data in React
Previous state in functional component

State with Object | Reactjs Hooks

Context API with example
Provider – It sets the data and provides the Data to the application.
Consumer – It consumes the data or uses the data.
Context provides a way to pass data through the component tree without having
to pass props down manually at every level.

Below SS shows how to use Provider.

Write the function before state because state is using our Function.

How to use consumer, how to pass down the data into several children
How to change the color by clicking button
React Redux

Let you want to store some data like User Login or API data’s after refreshing a
page then we can use Redux there. It’s not a data base but kind of a big array
where you can store all data’s.
You can consider a Redux as stored container where you can store all your
Datas

You will get the whole data of the application inside the Store.
React sends the data of redux through props type only,like how we send data from
one component to another component through the props same like we will send
the data from one component to another by Redux which will be same as of props
sending
Redux architecture

 View is what we can see on our browser or through React. Exe –

Buttons,Colors, Images, input boxes and videos
 Any event called upon the view elements like clicking the button and giving
any response to the input box that is called as Action. The function of Action
elements is to collect the data either from API or from the View elements.
 Function of Reducer is to receive the data from Action element and store it in
the Store Element.
 Store elements saves all the data or state of the application. We can send the
Store data to any of the View element.
 In one application we can only create 1 redux to store the data. We can t
make 2 Redexues in one application it will make two Applications.

Install redux in react-app

Type npm install redux and npm install react-redux

filer folder structure

components -> Home.js
container ->HomeContainer.js
Services-> Action ->actions.js
Services -> Reducers ->reducers.js & index.js
Services -.constants.js
Code to understand Redux – How to create Folder Structure - redux-tut/src/components/Home.js at master · anil-
sidhu/redux-tut · GitHub

Code to understand Redux Actions - redux-tut/src/service/actions at master · anil-sidhu/redux-tut ·

GitHub

How to create Reducers - redux-tut/src/service/reducers/reducer.js at master · anil-sidhu/redux-tut · GitHub

How to create Root Reducers - redux-tut/src/service/reducers/index.js at master · anil-sidhu/redux-tut ·
GitHub

Container - mapDispatchToProps -
mapStateToProps

When you will send the data from component to your Redux store to save then
you have to use mapDispactchToProps.
Now let the data which is stored inside the Redux Store need to be used anywhere
else / some third component then we can send the data from Store to any
component by mapStateToProps.
Have to import createStore from redux to create a store.
Have to import provider from react-redux to create a wrapper of provider in app.js
file.
How to share data’s between different component - redux-tut/src/components/Header.js at
master · anil-sidhu/redux-tut · GitHub
Learning from Project
 How to install emmet -> emmet is used to complete your tags if you are typing
only class names -> ctrl+comma -> then search emmet -> Include Languages ->
javascript and javascriptreact -> Ctrl +P to relaod your vs code.
 To install Material UI - npm install @mui/material or @material-ui/core

 For Icons - npm install @mui/icons-material

Display : flex; what it does It will make all the css components in a line like below
instead of one by one cloumn

To install VITE - npm create vite@latest. Have to rename all component files with
extension like .jsx instead of .js
For installing styling component - Npm Install styled-components
We can use <Themeprovider props={theme}> where theme is a function where we
have written our CSS code. We have used this tag to implement same CSS
properties in all the components
- Have to install laravel. 1 -laravel,2 -laravel new project_name
To run it - php artisan serve
- How to make a controller - php artisan make:controller UserController

Change the DB_DATABASE name as per you DB name

Router Setup

To Test the api;

Redux Toolkit

Let GrandChild 2 needs a data from grandparent , so this will what happen next.
The Grand Parent component will pass the data to parent component then parent
component will pass the data to child component then child will pass the data to
Grandchild component. So in this way the parent and child get involved in a data
passing method where they did not want the data for them. This is what called as
Props drilling.
This is the fundamentals which is being used by Context API and Redux.