ReactJs Training
Prepared by: Samir Alam
Introduction to ReactJs
Topic Virtual DOM
ReactJS Core Concept
Overview ReactJS Bonus Tips
Before You should know basics of
JS
starting You should
clone this repository
Typescript knowledge will
be a plus
Introduction to ReactJs
● React is a JavaScript-based UI development library.
● React is a free and open-source front-end JavaScript
library for building user interfaces based on UI
components.
● It is maintained by Meta(Facebook) and a community
of individual developers and companies.
● React can be used as a base in the development of
single-page or mobile applications. The future of web
development
Introduction to ReactJs
What is ReactJS?
What ReactJS is not?
History of ReactJs
Jordan Walke Software
later deployed on React 16.0 was
engineer Facebook
Instagram released to the
Released an early public.
prototype of React
May Sep
2011 2011 2012
2013 2017
First deployed on Open-sourced at
Facebook's News JSConf US
Feed
Advantages of ReactJS
● Improved performance:
○ Uses virtual DOM which is a JavaScript object.
○ Improve apps performance (JavaScript virtual DOM is faster than the regular DOM).
● Reusable components:
○ React is all about components.
○ You need to think of everything as a component. (Will help you maintain the code when
working on larger scale projects.
● Unidirectional data flow:
○ React implements one-way data flow which makes it easy to reason about your app.
● It can be used for the development of both web and mobile app and desktop
applications
○ Electron
○ React Native
Disadvantages of ReactJS
● Only a UI library. You still need to choose other technologies to get a complete tooling set for
development.
● JSX
Virtual
Document
Object Model
(DOM)
Real Document Object Model (DOM)
● Problem:
○ DOM manipulation is expensive.
○ Re-render all parts of DOM make our app slow.
● Solution:
○ Virtual Document Object Model (DOM)
Virtual Document Object Model (DOM)
● The Virtual DOM is React's lightweight version of
the Real DOM.
● Real DOM manipulation is substantially slower than
virtual DOM manipulation.
● When an object's state changes,
○ React will compare with DOM element to
detect changes to make smallest change in
DOM
○ Virtual DOM updates only that object in the
real DOM rather than all of them.
Virtual Document Object Model (DOM)
How do Virtual DOM works?
This Virtual DOM works in three simple steps.
● Step 1: Whenever any underlying data changes, Step 1
the entire UI is re-rendered in Virtual DOM
representation.
● Step 2: Then the difference between the previous
Step 2
DOM representation and the new one is
calculated.
● Step 3: Once the calculations are done, the real
DOM will be updated with only the things that have
actually changed. Step 3
Installation
and Setup
NodeJS installation
Node
● https://nodejs.org/download/
NVM
● https://codedamn.com/news/nodejs/nvm-insta
llation-setup-guide
ReactJS library Setup
● ReactJS library installation using vite.
○ npx create-vite my-react-app --template react-ts
○ cd my-react-app
○ npm install
○ npm run dev
● Alternatively
○ find a suitable template
○ use degit to init the template
ReactJS Main
Concept
React App
● To get started with any framework you need to
understand what all files you need to install.
● With React you don’t need to worry about this.
● React will install all the files required for you to get
started with a single command.
● It will have all the necessary packages installed and
you can start rendering and building your project at
once.
Benefits of using React Scaffolded with
vite
● It helps you to create and configure React projects in a smooth and easy manner. It an easy to
start developing your project.
● The project is structured by default. All the components changes will be done in the source
folder. Node modules have a separate folder with dependencies mentioned in the
package.json file.
● The project should already configured for both dev and prod environments.
● Compiler and Build process should already be configured.
● For testing @testing-library/jest-dom and @testing-library/react can already be installed
depending on the template selected.
Hello World
The smallest React example looks like this:
It displays a heading saying “Hello, world!” on the page.
JSX in ReactJS
● JSX is a syntax extension to JavaScript
● It's a term used in React to describe the markup for user interface.
● You can write HTML structures in the same file as JavaScript code by utilizing JSX.
const element = <h1>Hello, world!</h1>
The above code shows how JSX is implemented in React. It is neither a string nor HTML. Instead, it embeds
HTML into JavaScript code.
JSX in ReactJS (Continue)
● Expressions in JSX
○ With JSX you can write expressions inside curly braces { }
const myelement = <h1>React is {5 + 5} times better with JSX</h1>;
JSX in ReactJS (Continue)
● One Top Level Element
○ The HTML code must be wrapped in ONE top level element.
○ So if you like to write two paragraphs, you must put them inside a parent element, like a
div element or a React fragment (<>).
JSX in ReactJS (Continue)
● Elements Must be Closed
○ JSX follows XML rules, and therefore HTML elements must be properly closed.
const myelement = <input type="text" />;
Eg: <br />, <img />
JSX in ReactJS (Continue)
● Attribute class = className
○ The class attribute is a much used attribute in HTML, but since JSX is rendered as
JavaScript
○ And the class keyword is a reserved word in JavaScript, you are not allowed to use it in
JSX.
const myelement = <h1 className="myclass">Hello World</h1>;
Day 2
Components in ReactJS
● Components let you split the UI into independent, reusable pieces, and think about
each piece in isolation.
Components in ReactJS (Continue)
Here are some of the features of Components -
● Re-usability: A component used in one area of the application can be reused in another area.
This helps speed up the development process.
● Nested Components: A component can contain several other components.
● Render method: In its minimal form, a component must define a render method that specifies
how the component renders to the DOM.
● Passing properties: A component can also receive props. These are properties passed by its
parent to specify values.
Props in ReactJS
● Props stand for "Properties."
● They are read-only components.
● It is an object which stores the value of attributes of a tag and work similar to the
HTML attributes.
● It gives a way to pass data from one component to other components.
● It is similar to function arguments.
● Props are passed to the component in the same way as arguments passed in a
function.
Props in ReactJS (Continue)
● Add a "brand" attribute to the Car element:
const myelement = <Car brand="Ford" />;
● The component receives the argument as a props object:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Passing Data from Parent to Child
Component
Handling Events in ReactJS
● Handling events with React elements is very similar to handling events on DOM
elements.
● There are some syntax differences:
○ React events are named using camelCase, rather than lowercase.
○ With JSX you pass a function as the event handler, rather than a string.
Handling Events in ReactJS (Continue)
HTML Events: ReactJS Events:
- onclick - onClick
- “activateLasers()” - {activateLasers}
State in ReactJS
● React components has a built-in state which is a property or value that we can use
in our application.
● When the state changes, the component re-renders.
Important note: React compares the new state and the previous state to determine
whether a re-render is necessary. If the state values are the same, React may choose to
bail out of the re-render process to avoid unnecessary updates and improve
performance. This is often referred to as "shallow comparison”.
State in ReactJS (Continue)
State in ReactJS (Continue)
const Car = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
count+1; Don’t X
};
return (
<>
<h1>My {count}</h1>
<button type="button" onClick={incrementCount}>
Increment
</button>
</>
);
};
export default Car;
Conditional Rendering in ReactJS
● In React, you can create distinct components that encapsulate behavior you need.
● Then, you can render only some of them, depending on the state of your application.
● Conditional rendering in React works the same way conditions work in JavaScript.
● Use JavaScript operators like if or the conditional operator to create elements
representing the current state, and let React update the UI to match them.
Conditional Rendering in ReactJS
(Continue)
Conditional Rendering in ReactJS
(Continue)
const Ball = () => { function
const MissedGoal
MissedGoal()
= ()=>
{ {
... return <h1>MISSED!</h1>;
const isGoal = true;
}
function
const getGoal
getGoal()
= ()=>
{ {
return (
function
const MadeGoal
MadeGoal()
= () {
=> {
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/>} return <h1>Goal!</h1>;
</>
}
)}
render()
return <>{getGoal()}</>;
{
} return (
<Goal isGoal={false} />
)}
}
Lists in ReactJS
● Lists are used to display data in an ordered format and mainly used to display
menus on websites.
● In React, Lists can be created in a similar way as we create lists in JavaScript.
● The map() function is used for traversing the lists.
Lists in ReactJS (Continue)
Keys in ReactJS
● A “key” is a special string attribute you need to
include when creating lists of elements in React.
● Keys are used to React to identify which items in
the list are changed, updated, or deleted.
● We can say that keys are used to give an identity
to the elements in the lists.
● Keys should be given to the elements inside the
array to give the elements a stable identity
Keys in ReactJS (Continue)
Keys in ReactJS (Continue)
So, what should be good to be chosen as
key for the items in lists?
Keys in ReactJS (Continue)
const data = [
function MenuBlog(props) {
{
return (
id: “2345678987654”,
<ol>
content: 'ReactJS!!'
{
}, {
data.map((show) =>
id: “8764327866769”,
<li key={show.id}> {show.content}
content: 'It is the best ReactJS
</li>
Tutorial!!'
)
}, {
}
id: “3456789876548”,
</ol>
content: “Learn all the ReactJS
)}
topics!!'
ReactJS Hooks Day 3
Hooks in ReactJS
● Hooks were added to React in version 16.8.
● Hooks allow function components to have access to state and other React features.
Because of this, class components are generally no longer needed.
● Although Hooks generally replace class components, there are no plans to
remove classes from React.
● Hooks are the functions which "hook into" React state and lifecycle features from
function components. It does not work inside classes.
● Hooks are backward-compatible, which means it does not contain any breaking
changes. Also, it does not replace your knowledge of React concepts.
Hooks in ReactJS (Continue)
● Rules of Hooks
○ Only call Hooks at the top level:
■ Do not call Hooks inside loops, conditions, or nested functions.
■ Hooks should always be used at the top level of the React functions.
■ This rule ensures that Hooks are called in the same order each time a
components renders.
○ Only call Hooks from React functions:
■ You cannot call Hooks from regular JavaScript functions.
■ Instead, you can call Hooks from React function components.
■ Hooks can also be called from custom Hooks.
Hooks in ReactJS (Continue)
● Pre-requisites for React Hooks
○ Node version 6 or above
○ NPM version 5.2 or above
Hooks in ReactJS (Continue)
Hooks in ReactJS (Continue)
● Basic Hooks
○ There are three types of Basic built-in Hooks in ReactJS.
■ useState Hook
■ useEffect Hook
■ useContext Hook
Hooks in ReactJS (Continue)
● Additional Hooks:
○ There are seven types of Advanced built-in Hooks in ReactJS.
■ useReducer Hook
■ useCallback Hook
■ useMemo Hook
■ useRef Hook
■ useImperativeHandle Hook
■ useLayoutEffect Hook
■ useDebugValue Hook
ReactJS Forms Day 4
Forms in ReactJS
● HTML form elements work a bit differently from other DOM elements in React,
because form elements naturally keep some internal state.
Forms in ReactJS (Continue)
● Handling forms is about how you handle the data when it changes value or gets
submitted.
○ In HTML, form data is usually handled by the DOM.
○ In React, form data is usually handled by the components.
● When the data is handled by the components, all the data is stored in the
component state. You can control changes by adding event handlers in the
onChange attribute.
● We can use the useState Hook to keep track of each inputs value and provide a
"single source of truth" for the entire application.
Forms in ReactJS (Continue)
Forms in ReactJS (Continue)
Submitting Forms
● React Router
● React State Management
ReactJS Other ○ ContextAPI
Concept ○ React Query
○ React-redux
● Async Await
React Router Day 5
React Router
● React itself doesn’t provide routing. And the vite bundler(The one we used to scaffold our react
app using npx create-vite my-react-app --template react-ts) does not provide routing.
● React Router is the most popular solution for routing in react application.
● Some of the features that it provides are
○ Client side routing
○ Nested routing
○ Dynamic Segments
React Router (Continue)
● Installation
○ npm install react-router-dom
React Router (Continue)
● Adding a router
○ Replace the code of the main.tsx to render router instead of <App/>.
React Router (Continue)
● Adding a new route
○ You can add your new route as well by adding a new object in router
React Router (Continue)
● Using links
○ Links allows adding link to the jsx element and enables client side routing.
React Router (Continue)
● Nested Routes
○ It allows to exchange specific fragments of the view based on the current route. For example, on a user page one
gets presented multiple tabs (e.g. Profile, Account) to navigate through a user's information.
React Router (Continue)
● Nested Routes Code
○ Code link here
React Redux Day 6
Introduction to Redux Concepts
● Redux is a powerful state management library used in JavaScript/Typescript applications
to manage state centrally.
● It operates on the principles of a single source of truth, state immutability, and pure
functions.
● We will explore how Redux organizes actions, reducers, and the store to manage
complex application states efficiently.
Actions - The Signals of State Changes
What are Actions?
● Actions are simple information packets that tell the store what happened in the app.
● They contain a type property indicating the kind of action performed.
● Optionally, they can carry payload data necessary for state updates.
● Actions are dispatched in response to user interactions or events to trigger state changes.
Reducers - Defining State Transformations
The Role of Reducers
● Reducers are functions that determine how the state should change in response to an action.
● They accept the current state and an action as arguments and return a new state.
● A reducer must be a pure function — it should solely compute the next state without causing
side effects.
● Reducers break down the app's logic into manageable parts, each responsible for handling
state updates for a particular slice of the application.
Store - The Central Hub
● The store brings together actions and reducers, maintaining the entire state of the application.
● It provides methods such as getState() to access the current state, dispatch(action) to update
the state, and subscribe(listener) to listen for state changes.
● By adhering to Redux's pattern, we ensure a predictable state management mechanism where
the flow of data follows a strict unidirectional path:
1. Dispatch an action
2. Handle the action in a reducer
3. Update the store
4. Reflect changes in the UI
Sample Structure
├── src/
│ ├── app/
│ │ ├── store.ts
│ │ └── rootReducer.ts
│ ├── features/
│ │ ├── counter/
│ │ │ ├── counterSlice.ts
│ │ │ └── index.ts
│ ├── App.tsx
│ ├── Counter.tsx
│ └── index.tsx
├── package.json
└── tsconfig.json
Counter app using modern redux
Counter app using legacy arc pattern
Thank You
