MERN TECH STACK

FULL-STACK
FULL-STACK
FULL-STACK
FULL-STACK
FULL-STACK
3 weeks 2 tracks

COURSE
INDEX
What is React DAY - 01
Components , Props DAY - 02
Hooks DAY - 03
CSS Styling DAY - 04
React-Router DAY - 05
React Query DAY - 06
Redux Toolkit DAY - 07
 DAY 01

React
What is React?
React is a JavaScript library for building user interfaces (UIs) on the web. React is a
declarative, component based library that allows developers to build reusable UI
components and It follows the Virtual DOM (Document Object Model) approach, which
optimises rendering performance by minimising DOM updates. React is fast and works well
with other tools and libraries.  

React was invented by Facebook developers who found the traditional DOM slow. By
implementing a virtual DOM, React addressed this issue and gained popularity rapidly.

Features:-

1. Component-Based Architecture
React provides the feature to break down the UI into smaller, self-contained components.
Each component can have its own state and props. Each component is a part of the UI
design which has its own logic and design as shown in the below image.

2. JSX (JavaScript Syntax Extension)

React provides the feature to break down the UI into smaller, self-contained components.
Each component can have its own state and props. Each component is a part of the UI
design which has its own logic and design as shown in the below image.

3. Virtual DOM
React maintains a lightweight representation of the actual DOM in memory. When changes
occur, React efficiently updates only the necessary parts of the DOM.

Setting up the react project

To setup React.js in your PC’s make sure that you have node.js installed.

Create A React App :

‘npx create-react-app my-react-app’

This will create an application with the name my-react-app in your current

directory

There is another way of creating a lighter and faster version of react project

1
 DAY 02

Components

Class Components

The class components are a little more complex than the functional components.

We can pass

data from one class component to other class components. We can use JavaScript

ES6 classes to create class-based components in React. Below example shows a

valid class based component in React: Before React 16.8, Class components were the only

way to track state and lifecycle on a React component. Function components were

considered "state-less".

With the addition of Hooks, Function components are now almost equivalent to Class

components. The differences are so minor that you will probably never need to use a Class

component in React.

Even though Function components are preferred, there are no current plans on removing

Class components from React. Below is it’s example

Functional components

ReactJS Functional components are some of the more common components that will

come across while working in React. These are simply JavaScript functions. We can create

a functional component in React by writing a JavaScript function. The part we see later

here in the course. Below is the example

2
 DAY 02

Props

What are Props?

Props is a keyword in React that passes data from one component to another. But the

important part here is that data with props are being passed in a unidirectional flow. This

means it’s passed one way from parent to child.

Props data is read-only, which means that data coming from the parent shouldn’t be

changed by child components.

Let’s take an example:

In the App component, the Greeting component is used twice, passing the name prop with

different values (name="Alice" and name="Bob").

In the Greeting functional component, props are received as an argument.

3
 DAY 03

Hooks
Hooks are functions that let you “hook into” React state and lifecycle features from function
components. Hooks don’t work inside classes — they let you use React without classes.
Some of the hooks are-
UseState Hook
useState is a Hook (we’ll talk about what this means in a moment). We call it inside a
function component to add some local state to it. React will preserve this state between
re-renders. useState returns a pair: the current state value and a function that lets you
update it. You can call this function from an event handler or somewhere else

Example:-

UseEffect Hook
We call useEffect,when we are telling React to run our function after flushing changes to
the DOM. Effects are declared inside the component so they have access to its props and
state. By default, React runs the effects after every render — including the first render.

Example:

4
 DAY 03

Custom Hook
In React, a custom hook is a JavaScript function that allows you to reuse stateful logic
across different components. Custom hooks leverage React's built-in hooks (like useState,
useEffect, useContext, etc.) to encapsulate and share logic that can be reused, which helps
keep your components clean and focused on UI rather than logic.
Why Use Custom Hooks?
Reusability: If you find yourself writing the same logic in multiple components, you can
abstract that logic into a custom hook and reuse it across your app.

Separation of Concerns: Custom hooks allow you to separate logic from UI, making your
components easier to maintain and understand.

Testability: Custom hooks can be tested independently of the components that use them,
making it easier to write unit tests.

Creating a Custom Hook

A custom hook is simply a function whose name starts with use (this is a convention to
indicate it's a hook) and inside it, you can use other hooks to manage state or side effects.

Here’s a simple example:

5
 DAY 03

How to Use the Custom Hook

Once you've created a custom hook, you can use it in any functional component:

6
 DAY 04

CSS Styling
Styling React components can be approached in several ways. Here are some common
methods:
1. Inline Styles
You can use inline styles by passing a JavaScript object to the style attribute of a React
component.

Example:

2.Css StyleSheet

You can create a css styling in a separate file,just save the file with css. file extension, and
import it in your react component file.

You can refer to the doc

https://www.w3schools.com/react/react_css_styling.asp 

Or refer to this part of the playlist

https://youtu.be/j5P9FHiBVNo?si=U-qL0EIdvcltERBM

Till n yow n e e t the l ylist

ou ca r f r o p a for b ette r

un e st n ing
d r a d :

https://youtube.com/playlist?list=PLC3y8-
rFHvwgg3vaYJgHGnModB54rxOk3&si=G8n3eMLwzgYjLCQe (from 1 to 76)

7
 DAY 05

React Router
React Router is a popular library used for handling routing in React applications. It allows
you to manage navigation and rendering of different views or components based on the
URL path. React Router helps you build single-page applications (SPAs) by providing a way
to navigate between different parts of your app without a full page reload.
Some of it’s key features:
<BrowserRouter>
It is a component in React Router that manages your app's navigation by keeping track of
the current URL in the browser's address bar. When you navigate to a different page in
your app, <BrowserRouter> updates the address bar to reflect the new location and
keeps a history of all the pages you've visited, just like a regular web browser.
<Navigate>
element changes the current location when it is rendered. It's a component wrapper
around useNavigate, and accepts all the same arguments as props.
<Link>
It is an element that lets the user navigate to another page by clicking or tapping on it. In
react-router-dom, a <Link> renders an accessible <a> element with a real href that points
to the resource it's linking to.
<Routes>
When the location (or URL) changes in a React application using React Router, the
<Routes> component acts like a switchboard. It examines all the child routes you have
defined inside it and figures out which one best matches the new URL. Once it identifies the
most appropriate route, it renders the corresponding component, effectively updating the
UI to reflect the new path.

For more information you can visit https://reactrouter.com/

You can follow the playlist here

https://youtube.com/playlist?
list=PL4cUxeGkcC9iVKmtNuCeIswnQ97in2GGf&si=aQpc5SvaAKxracQU  

8
 DAY 06

React Query
React Query is a powerful library for managing server-state in React applications,
particularly for fetching, caching, synchronising, and updating server data. Instead of
components, React Query provides hooks that you use within your React components to
manage data fetching and state.

Advantages
React Query provides several advantages for managing server-state in React
applications:  

1. React Query automatically caches fetched data, reducing the need for manual cache
management.

2.Hooks-Based API: React Query uses hooks to manage data fetching, making it easier to
integrate with React’s functional components.

3.Built-In DevTools for Query Inspection: React Query provides a set of developer tools to
inspect and debug queries, view cached data, and monitor query status, improving
development efficiency.

4.Error Handling: React Query provides built-in support for handling errors and retrying
failed requests, simplifying error management in your application.

Key components:
useQuery Hook:Usage: It allows you to fetch data from a server, cache it, and
automatically update your UI when the data changes.  

useMutation Hook:This hook is used for creating, updating, or deleting data on the server. It
helps you handle side effects and perform operations like posting data to a serve

QueryClient: This is the core of React Query's caching and management system.You
create a QueryClient instance and provide it to your application via a QueryClientProvider
to enable React Query's features across your app.

QueryClientProvider: This component provides the QueryClient to your entire app, making
React Query's features available throughout. Wrap your app with this provider to ensure
that React Query can manage your data fetching and caching effectively.

Video for React-Query

https://youtube.com/playlist?list=PLC3y8-
rFHvwjTELCrPrcZlo6blLBUspd2&si=1HI_NJ8WOygaI_Ww

9
 DAY 07

Redux Toolkit
Redux Toolkit is the official, recommended library for managing state in Redux
applications. It streamlines the setup and development process by providing a set of tools
and best practices, making it easier to write Redux logic and manage global state
efficiently.

Advantages
Redux Toolkit has the following advantages, making it one of the most effective solutions
for state management in React applications
Simplified Setup:

Redux Toolkit streamlines the setup process by reducing boilerplate code, allowing
developers to configure the store quickly and focus more on building features instead
of dealing with repetitive configurations
Prevention of Prop Drilling:

By offering centralized state management, Redux Toolkit eliminates the need for prop
drilling, enabling easy access to shared state from any component without the hassle
of passing props through multiple layers
Built-in Middleware:

Redux Toolkit includes Redux Thunk by default, simplifying the handling of
asynchronous actions like API calls without needing additional middleware setup,
making it easier to manage side effects efficiently
Immutable State Management:

With Immer integrated, Redux Toolkit allows developers to write code that appears to
mutate state directly while ensuring immutability, resulting in cleaner, more reliable
code and preventing unintentional state mutations.

Video for Redux-Toolkit

https://youtube.com/playlist?list=PLC3y8-rFHvwiaOAuTtVXittwybYIorRB3&si=

Extras
Tailwind CSS
https://www.youtube.com/watch?v=ft30zcMlFao

TypeScript
https://youtu.be/30LWjhZzg50?si=rU83y4-zjkcYMgyf

10