1.

Install VS Code
2. react developer tools add to chrome
3. Add extension in VS Code “thunder client” (Alternate of postman)
4. Add extension in VS Code ES7/React Redux Snippet (ES7 React/Redux/Styled-
components snippets)
5. Add extension in VS Code “bracket pair colorizer”
6. Add extension in VS Code “Auto Rename Tag”
7. https://legacy.reactjs.org/docs/introducing-jsx.html  this is a website that helpful for
getting information about react.js
Difference between npm and npx :
What is the difference between NPX and NPM medium? NPM is a package management
that is used to install, uninstall, and update JavaScript packages on your workstation, whereas
NPX is a package executer that is used to directly execute JavaScript packages without installing
them

What is react?
React.js is a JavaScript library that helps developers build user interfaces (UIs) for web and
mobile platforms:
 Declarative: React makes it easy to create interactive UIs by designing simple views for
each state in your application.
 Component-based: React components manage their own state and can be composed to
create complex UIs.
 Server rendering: React can render on the server using Node.
 Mobile apps: React Native can power mobile apps
In React, props, short for properties, is a built-in object that allows data to be passed from one
component to another:
 What are props used for?
Props are used to pass data between components in a React application.
 How are props used?
Props are passed from a parent component to its child components, similar to how arguments are
passed in a function.
 How do props work?
Props are read-only, meaning that data from a parent component cannot be changed by the child
component.
  What can be passed through props?
Any JavaScript value can be passed through props, including objects, arrays, and functions
 We need to work with two folders, first is “public” and second one is “src”
Always Add “Component” in “src” folder
 Index.html file in “Public” folder is import from where all the things are rendering
 Index.js is entry point
 App.js is a component. Whatever required component is created that should be added in
“App.js”.

 App. js : This is the main component of your React

application. It contains the structure and logic for
your app's user interface. You can define the
layout, components, and functionality within this
file.
 We can’t return multiple element from app.js. So
we need to enclose all element in <> ….. our
elements </>

 JSX (JavaScript Syntax Extension) is a JavaScript
extension that allows developers to write HTML-
like code in JavaScript files to describe UI
elements for React. JSX is a core concept of React,
and is used by most React developers
 So now onwards we will delete all the code from “return” and use our own component
code.
 For “App.css” we can add css for any particular class :

Points to Remember:
Rfc to import “import React from ‘react’
 Use “npx create-react-app “projects_name”  used to create project (NPX stands
for Node Package eXecute)
o Example: npx create-react-app react_projects
 Run Project: npm start (NPM is a node package manager)
 Use strict  use with script in react. it provides restriction
a. React Strict Mode is a tool that helps developers find potential problems in their
React application's code. It does this by enabling additional checks and warnings
for a component tree or part of it.
b. Here are some things that React Strict Mode can help with:
c. Finding bugs
Strict Mode can help find common bugs early in development, such as
those caused by impure rendering or missing Effect cleanup.
d. Identifying side effects
Strict Mode can help identify potential side effects in components, such as
making an API request or updating the browser's location.
e. Catching incorrect logic
Strict Mode can help catch incorrect logic in lifecycle methods, such as
missing cleanup logic.
f. Catching deprecated API usage
Strict Mode can help catch usage of deprecated APIs.
g. Strict Mode only runs in development mode and doesn't impact the production
build. It also doesn't render any visible UI.
h. To enable Strict Mode in a React application, you can wrap a component tree or
part of it with the <StrictMode> component. This is available in “index.js”
  Class based component and function-based component. Now function based component
are used everywhere. Because it’s too easy
a. Function that contains html. And with html, it also contains css.

 Single page application and multipage application

o Single page application takes less bandwidth while multipage application takes
too much bandwidth (because every time it load complete bundle of pages while
single page not)
The “node_module” folder contain all the packages and dependencies that helps to create react
project
 Node_modules folder can be recreate using packagelock.json and package.json files
using “npm install” command or “npm i” command. That’s why we include
“node_modules” in gitignore folder

Whenever new project build, make sure to execute “npm install” command
from terminal so that “node_module” folder can be re-create
 Bootstrap is a css’s framework
 Add script in body tag while css in head tab go to bootstrap web site
 npm start / npm run start)  to start project (run the project)
 Import component from bootstrap and add in “App.js” file
 Replace “class” to “className”
 Replace “#” to “/” if no link added in” href”
 If tag is not close then use “/” to close tag
 Again click ctrl+c to restart project and check warning if any. Resolve it and run again
 “Git add . “ error. =https://www.youtube.com/watch?v=uwgLVyJWtBY
o https://www.youtube.com/watch?v=1yCE2a7rjF4

i. T
h
e
n
use “git init” command
 j. “Git add .”
k. git commit -m "Video 5"  to commit the branch
2. Props : properties

video 6
export data from one module to another module
node '.\module2.mjs'  to run module

 Whenever start new project, add ( https://getbootstrap.com/docs/5.3/getting-

started/introduction/) bootstrap css and java script in “index.html” available in
“public” folder
Component name always start with capital letters

prop types 
After creating component, use “rfc” to import react base function component
Props :  how to use props. This is use to just pass the values. Don’t forget to use “isRequired”.
Props always read-only.
Props for validation : (Always use props types and default props if implemented in any
component)
Whenever user propsTypes , need to import “import PropTypes from 'prop-types'; “

don’t forget to use “isRequired” 

Props and useStates

React Hooks : (most useful in react js)

const [count, setCount] = useState(0);
“count” is used as a variable while “setCount” use as a function
(vertical space)
<div class= 'container my-3'>
<button button type="button" class="btn btn-primary mx-1" >Enable Dark
Mode</button>
</div>

horizontal space
<button className="btn btn-primary mx-1" onClick = { handleLowerClick } > Covert to
Lower Case
</button>

$--> use as a variable like ${props.mode}

<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>

1. To make a text light mode

<div class="form-check form-switch text-light">
<input class="form-check-input mx-1" type="checkbox" role="switch"
id="flexSwitchCheckDefault" />
 <label class="form-check-label" for="flexSwitchCheckDefault">Dark
Mode</label>
</div>

Task :
1. Insert CM logo in navigation bar.
Video 7:
Use container class to manage controls so that we can arrange controls properly

How to handle Event change  onChange() method allow to “Handle event”

Video 10 
using object, we can set properties to particular container:
let’s see example

I want to set proper text and background color. For this

create a object and using style apply required things
Video 12:
 Use back tick in class for whole string so that we can use template literals

 text-dark / text-light use with class to make text light or dark

Video 16. : React routers

Official page of react router

(https://v5.reactrouter.com/web/guides/quick-start)
Use below command to install react router
npm install react-router-dom

React Router is a JavaScript package that allows developers to create Single-Page Applications
(SPAs) with dynamic routing:
 Routing: React Router allows users to navigate between different parts of an application
by entering a URL or clicking on an element.
  Separation of content: React Router allows developers to separate content without
breaking the user experience with page reloads.
 URL and state management: React Router makes it easy to manage the URL and state of
an application.
 Code reduction: React Router reduces the amount of code an app needs to maintain its
state.
 New feature addition: React Router makes it easier to add new features to an app.
Instead of “Switch” use “Routes” in all the places.
Old Code
New Code
import React from "react";
import { import React from "react";
BrowserRouter as Router, import {
Switch, BrowserRouter as Router,
Route, Routes,
Link Route,
} from "react-router-dom"; Link
} from "react-router-dom";
export default function App() {
return ( export default function App() {
<Router> return (
<div> <Router>
<nav> <div>
<ul> <nav>
<li> <ul>
<Link to="/">Home</Link> <li>
</li> <Link to="/">Home</Link>
<li> </li>
<Link to="/about">About</Link> <li>
</li> <Link to="/about">About</Link>
<li> </li>
<Link to="/users">Users</Link> <li>
</li> <Link to="/users">Users</Link>
</ul> </li>
</nav> </ul>
</nav>
{/* A <Switch> looks through its
children <Route>s and {/* A <Routes> looks through its children <Route>s and
renders the first one that matches the renders the first one that matches the current URL. */}
current URL. */} <Routes>
<Switch> <Route path="/about" element={ <About />} / >
<Route path="/about"> <Route path="/users" element={ <Users />} /
<About /> <Route path="/" element={ <Home /> /}>
</Route> </Routes>
<Route path="/users"> </div>
<Users /> </Router>
</Route> );
<Route path="/"> }
<Home />
</Route>
</Switch>
</div>
</Router>
);
}