REACT JS

Installation and Run

 While working with REACT, we need to download node js, react.
 We also use here npm and npx.
We have two methods to create any project of React: -
 Using command (npx create-react file name) and to run it use command (npm run
start) and we have another command (npm start) but it can throw an error.
 Using command (npm create vite@latest) but in this method, we will not have a
module folder in it, so to get it we run a command (npm install) and to run it use
command (npm run dev).

1. ReactDOM use for Web & ReactNative use for Web App.
2. ReactDOM have a function createRoot () which is used for creating a root for
webpage.
3. In React we can make our own tags; we can use file name as a tag to use in
another file.

React and Vite library

In React library we have some conventions like: -
1. Function name should be starts with capital letter.
2. For better learning JavaScript file which return any HTML code should be jsx (not
mandatory) and file which doesn’t return any HTML code should be js.
3. It is common in both; we have to wrap a return code into a single tag (it may be div tag
or any other tag) and we also have a tag <> </> (known as fragment).
4. In React we will have index.html in public folder.
5. In React it will not have any Script tag inside the html file but React add the script file
while running the file.

Vite is also a library of React: -

1. Function and File name should be starts with capital letter.
2. In Vite it is mandatory to use jsx as a file type.
3. In Vite we will have all the files in src folder.
4. In Vite it has Script tag inside the html file.
Custom React
 While creating custom React, we need to create a custom render for that react element
and it will render the components and this function will be call through jsx syntax from
render and we also can directly call function but it is not a right way to do.
Custom Render & Custom Element

 We can also create elements using variable name which will be directly pass to render.

 React have its own for creating elements React.createElement which takes an object and this
object have some predefined values like tag name, object and sets properties {}, text which will
be shown on screen, variable value if needed.

Using custom element

Using React methods

 React have its own Render.

Reacts Render

Evaluated Expression
We use these expressions when we need to inject the value of any variable into React return
expression code directly using curly braces {}.

Style Attribute
style = {{}} is not a special syntax, but a regular {} object
inside the style = {} JSX curly braces. You can use the style
attribute when your styles depend on JavaScript variables.

Hooks
Functions starting with use are called Hooks. useState is a built-
in Hook provided by React.

1. useState ()
It is used when a user needs to update a value at multiple places in project, Hooks in React will
manage the change in UI & needs to import {useState} from ’react’.

 useState declares a state variable that you can update directly.

 useReducer declares a state variable with the update logic inside a reducer function.
 useContext reads and subscribes to a context. Etc.
While implementing the Hooks useState we need to create a variables array which have two
properties counter which holds value and setCounter is a function which will perform tasks.
 useState using with objects and arrays, Boolean, number, string.
 While using useState with objects and arrays like: -

2. useCallback ()

 useCallback is a React Hook that lets you cache a function definition between re-renders.
 Syntax: - const cachedFunction = useCallback (function, dependencies)
 Usage: - Skipping the re-rendering of components, updating state from memorized
callback.
 Every time my component render, useCallback returns a different function.
 On the initial render, useCallback returns the fn function you have passed.
 During subsequent renders, it will either return an already stored fn function from the last
render (if the dependencies haven’t changed), or return the fn function you have passed
during this render.
3. useMemo ()
 useMemo is a React Hook that lets you cache the result of a calculation between re-
renders.
 Syntax: - const cachedValue = useMemo (calculateValue, dependencies)
 Usage: - Skipping expensive recalculations, Skipping re-rendering of components,
memorizing a dependency of another hook, memorizing a function.

4. useEffect ()
 useEffect is a React Hook that lets you synchronize a component with an external
system.
 Syntax: - useEffect (setup, dependencies array [])
 While leaving dependency array empty, it’ll execute the useEffect () for only first
render.
 On passing the list of dependencies it’ll execute the useEffect () for every
render.
5. useRef ()
 useRef is a React Hook that lets you reference a value that’s not needed for
rendering.
 Syntax: - const ref = useRef ()
 Usage: - Referencing a value with a ref, Manipulating the DOM with a ref,
avoiding recreating the ref contents.

6. useContext ()
 useContext is a React Hook that lets you read and subscribe to context from your
component.
 Syntax for creating a context is export const value = React.createContext ()
 Syntax to receive a context value is const item = useContext (value)
 Usage: - passing the data deeply into tree, updating data passed via context etc.
7. useReducer ()
 useReducer is a React Hook that lets you add a reducer to your component.
 Syntax: - const [state, dispatch] = useReducer (reducer, initialArgument).
 Usage: - Adding a reducer to a component, Writing the reducer function, avoiding
recreating the initial state.
Custom Hooks
 In React, we can create our own hook using the predefined React hooks like (useState,
useCallback, useMemo, useEffect etc.)

Updater Function
 It’s a function which need a previous value to update a value in function.
 In useState Hook when we update the value by setcount function and it is used multiple
times in a single function then it’ll update the value only once, here the updater function
comes into a picture which needs a previous value and can update the value multiple
times while calling multiple times.

React-Router-Dom
 React-Router-Dom is a third-party library which helps React in building the multiple
page application or website.
 In this we’ll create a new folder name “Component”, in this all the components which
have to render in multiple pages are created.
 In “App.jsx” we’ll create a Browser router using import {createBrowserRouter} from
“react-router-dom”.
 We have studied that to link the webpages, we use <a> tag but in React we’ll not use it
because on clicking the anchor tag it’ll reload the whole page and then render the desire
components that’s why we don’t use it in React instead of this we’ll use <Link> &
<NavLink> tag to link the webpages.
 In order to create a router, we’ll follow this syntax given below:

Link
 Link tag is used to link the webpages and on clicking the link it’ll redirect you to the next
page.
 Link tag have attribute to = “/” indicates the path which have to followed by Tag.
 It’ll not reload whole page just to render the next page.

NavLink
 NavLink tag works same as Link Tag but the drawback with Link tag is that it’ll show on
Webpage on which page you’re, NavLink have an extra attribute isActive it indicates that
if you’re on current page then it’ll help you to apply conditional CSS for that Tag.
 In NavLink tag we’ll apply CSS in functional syntax.

Context API
 Context provides a way to pass data through the component tree without having
to pass props down manually at every level.
 In a typical React application, data is passed top-down (parent to child) via props,
but such usage can be cumbersome for certain types of props (e.g. locale
preference, UI theme) that are required by many components within an
application. Context provides a way to share values like these between
components without having to explicitly pass a prop through every level of the
tree.
 In Context API we have initial value which we don’t pass directly to the context.
 Then we have Context creation in which we create a context which returns a
context component not a variable and first letter of context variable name must be
capital letter.
 Then we have Context Provider, it is a property of context component, we pass
the value to provider which makes context to be accessible to the child
components and the value should be passed inside the double curly braces {{}}.
 Last, we have to consume the context data, to access the context data we have
useContext hook. As a parameter, we pass the whole context to useContext to
access all the values provided by the useContext Provider.