VIRTUAL CODE
The ULTIMATE
REACT
COURSE
Ultimate React Course VIRTUAL CODE
Level – 1 : Introduction to React
Level – 2 : Create Our First React App
Practice Project 1
Level – 3 : Props In React
Practice Project 2
Level – 4 : Hooks In React
Practice Project 3
Level – 5 : React Router
Practice Project 4
Level – 6 : Context API
VIRTUAL CODE
LEVEL-1
Introduction To React
Introduction To React VIRTUAL CODE
- REACT ( also known as React.js or ReactJs ) is a free and open source
FRONT-END JAVASCRIPT LIBRARY for building user interfaces based
on components by Facebook inc.
- REACT can be used to develop single-page application
- A key Advantage of REACT is that it only rerenders those parts of the
page that have changed, avoiding unnecessary rerendering of
unchanged DOM elements.
- You can use CDN for add React in your JavaScript file
ReactDOM
react
ReactNative
Introduction To React VIRTUAL CODE
Document
html
head body
h1 button
VIRTUAL CODE
LEVEL-2
Create our First React App
Create our first React app VIRTUAL CODE
There are some popular utility for creating React App
1. Create-react-app
2. Vite (recommended)
Some frequently used words-
1. npm - npm is the package manager for the javascript runtime
environment Node.js
1. npx- node package Executor
Create our first React app VIRTUAL CODE
JSX - JSX ( Javascript XML , formally Javascript Syntax Extension)
Create our first React app VIRTUAL CODE
Some Important KeyPoint For JSX-
HTML JSX
class className
ffor htmlFor
You can write javascript in JSX using curly brackets
Practice Project 1 VIRTUAL CODE
Create this layout using React JS-
LOGO HOME ABOOT CONTACT US
THIS IS FOOTER
VIRTUAL CODE
LEVEL-3
Props in React
Props In react VIRTUAL CODE
- Props stands for Properties
- Props are arguments passed into React Components
- React Props are like function arguments in Javascript and attributes
in HTML
- To send props into a component use the same syntax as HTML
attributes
Props In react VIRTUAL CODE
Example-
add a “brand” attribute in car element
The component receives the argument as a props object
Practice Project 2 VIRTUAL CODE
Create this layout using React JS-
LOGO HOME ABOUT CONTACT US
Range Rover BMW Lamborghini
RS 1.89cr RS 2.89cr RS 8.89cr
THIS IS FOOTER
VIRTUAL CODE
LEVEL-4
Hooks in React
Hooks In react VIRTUAL CODE
- Hooks allows function components to have access to state and other
React features . Because of this , class components are generally no
longer needed.
- Now what is state in React?
- In React , State is a javascript object that holds data and information
about a component.
Hooks In react VIRTUAL CODE
- There are so many Types of Hooks in React-
1. useState( ) Hook
2. useEffect( ) Hook
3. useRef( ) Hook
4. useMemo( ) Hook
5. useCallback( ) Hook
6. useContext( ) Hook
7. useReducer( ) Hook
8. useLayoutEffect( ) Hook
9. customHook( ) Hook
Hooks In react VIRTUAL CODE
1. useState( ) Hook-
The react ,useState Hook allows us to track state in a function
component.
State generally refers to data or properties that need to be tracking in
an application.
We initialize our state by calling useState in our function component
useState accepts an initial state and returns two values .
1. Current state
2. A function that updates the state
Hooks In react VIRTUAL CODE
2. useEffect( ) Hook-
The useEffect Hook allows you to perform side effects in your
components.
Some examples of side effects are –
1. Fetching data
2. Directly updating DOM Element
3. Timers
useEffect accepts two arguments . The second argument is optional
Hooks In react VIRTUAL CODE
2. useEffect( ) Hook-
When No dependency passed-
When An Empty array passed-
Hooks In react VIRTUAL CODE
2. useEffect( ) Hook-
When state values or props passed-
Hooks In react VIRTUAL CODE
3. useRef( ) Hook-
The useRef hook allows you to persist values between renders
It can be used to store a mutable value that does not cause a re-render
when updated.
It can be used to access a DOM element directly
useRef( ) only returns one item . It returns an object called current.
When we initialize useRef we set the initial value useRef( 0 )
VIRTUAL CODE
LEVEL-5
React Router
React Router VIRTUAL CODE
- React Router is a library for handling routing and navigation in React
JS Application .
- It enables navigation in single page Application (SPA) without
refreshing the entire page
React Router VIRTUAL CODE
Method 1-
React Router VIRTUAL CODE
Method 2-
Practice Project 3 VIRTUAL CODE
Create This single page application using react
VIRTUAL CODE
LEVEL-6
Context API
Context API VIRTUAL CODE
- Context API in React is used to share data across the components
without passing the props manually through every level.
- Context API is used to pass global variables anywhere in the code
without the prop drilling
- It helps when there is a need for Sharing state between a lot of
nested components.
- It is light in weight and easier to use, to create a context just need to
call React.createContext() .
- No need to install other dependencies or third-party libraries like
Redux for state management.
Context API VIRTUAL CODE
<App/>
<Right/>
<Left/> <Card/> <RightTop/>
<RightBottom/>
