Scribd
Upload
3 views

React-session

React is an open-source JavaScript library developed by Facebook for building interactive UI components using a declarative syntax and Virtual DOM. It supports Single Page Applications (SPAs) for efficient user interactions and utilizes JSX for embedding HTML-like code within JavaScript. Key features include props for data flow, hooks for state management, and the Context API for sharing data across components, along with best practices for project organization and component structure.

Uploaded by

Ankush
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

React-session

React is an open-source JavaScript library developed by Facebook for building interactive UI components using a declarative syntax and Virtual DOM. It supports Single Page Applications (SPAs) for efficient user interactions and utilizes JSX for embedding HTML-like code within JavaScript. Key features include props for data flow, hooks for state management, and the Context API for sharing data across components, along with best practices for project organization and component structure.

Uploaded by

Ankush
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

An Introduction to

React JS
What is React?
- React is a JavaScript library that focuses on declarative syntax and
virtualization of DOM.

- It is an open-source library, developed by Facebook in 2013.

- It provides a declarative and efficient way to create interactive UI


components.

- It allows building more reusable and maintainable UI components with ease.


Why React? SPA vs Traditional HTML
Traditional Page Lifecycle
Once the user accesses the page and performs any kind of action on that page, the page gets
reloaded with the changes that were done on the server-side.
Why React? SPA vs Traditional HTML
Single Page Application (SPA) Lifecycle
Once the user accesses the page and performs any kind of action on that page, they get an
almost-instant reaction from the page (think of Facebook, when you comment on someone's post)
Virtual DOM & Rendering Flow
Initial Render: React builds a Virtual DOM (VDOM) tree to represent the UI in memory.

State Change: When state or props change, React creates a new VDOM tree.

Diffing Algorithm: React compares the new VDOM with the previous one to detect
changes.

Efficient Update: Only the changed parts of the real DOM are updated, improving
performance.
Virtual DOM & Rendering Flow
What is JSX?
- JSX (JavaScript XML) is a syntax extension for
JavaScript used in React.

- JSX allows writing HTML-like code within


JavaScript, making it easier to create and
manipulate the UI.

- JSX allows embedding JavaScript expressions


within curly braces {}.

- JSX needs to be compiled into plain


JavaScript to be understood by the browser.
Props & PropTypes
Props (Properties) -

- Props are inputs to a React component.

- They allow data to flow from parent to child.

- Props are read-only and help make


components reusable.
Props & PropTypes
PropTypes -

- PropTypes help validate the type of props a


component receives.

- Prevent bugs by catching incorrect or missing


props.

- Makes it clear what props a component


expects — helpful for teams and during
maintenance.
Create 3 Simple Components with Props (Real-World
Example)

1. UserProfile Component
This component will display the user's profile information, such as their name and email.

2. UserAvatar Component
This component will display the user's avatar (profile picture), passing the URL of the image as a
prop.

3. Parent Component (App)


The parent component will pass real data (name, email, and avatar URL) to the UserProfile and
UserAvatar components.
React Setup Instructions

1. Install Node.js & npm

2. Create a new app using Vite

npm create vite@latest my-app -- --template react


cd my-app
npm install
npm run dev
React Components (Function & Class)
- Components are building blocks of any React application.
- They let you split the UI into reusable, independent pieces of code/logic.

Two main types:

1. Function Components - Lightweight, Use hooks for state/lifecycle & uses in modern React

2. Class Components - Use this.props, this.state, and lifecycle methods like


componentDidMount() & Still supported, but less commonly used in new codebases.

✅ Function components for all new development.

🟡 Class components only if working on legacy code.

Hooks provide more flexibility and readability than class lifecycles.


React Components (Function & Class)
React Lifecycle (Class Components)
The React lifecycle is a series of stages a component goes through from its creation to its removal.
These stages include mounting (when the component is first added to the DOM), updating (when
the component's data or state changes), and unmounting (when the component is removed from
the DOM)

1. Mounting Phase - constructor(), render(), componentDidMount()

2. Updating Phase - shouldComponentUpdate(), render(),


componentDidUpdate()

3. Unmounting Phase - componentWillUnmount() (used for


cleanup)

4. Lifecycle with Hooks (Functional Components) - Replaced with


useEffect() Hook
React Lifecycle (Class Components)
Hooks in ReactJS

- Hooks are functions that let you “hook into” React state and lifecycle features from function
components.
- Simplifies stateful logic sharing across components.
- Enables cleaner, reusable, and more testable code.
- Eliminates need for this, constructor, and class-based syntax.
- Only call Hooks at the top level of the component.
- Only call Hooks from React functions (components or custom hooks).

Examples - useState, useEffect, useContext, useRef, useMemo, useCallback etc.


React Router DOM v6

- React Router DOM is a standard library for routing in React.


- Enables navigation among views, route protection, and dynamic URLs.
- Latest version: v6 introduces hooks, improved nested routing, and simplified APIs.
React Context API

- The Context API in React provides a way to share data between components without having
to pass props manually at every level of the component tree. It is particularly useful for
sharing data that is considered "global" for a tree of React components, such as the current
user, theme, or locale preferences

1. Creating a Context- React.createContext(defaultValue)


2. Providing a Context Value - <MyContext.Provider value={/* some value */}>

3. Consuming a Context Value - useContext(MyContext)


Best Practices for Organizing React Projects
- Use Functional Components
- Keep Components Small and Focused
- Use Context API or State Management Libraries
- Use Custom Hooks for Reusable Logic
- Organize Files by Feature or Domain Example - AuthContext, LoginPage, loginService.js
- Structure Routes with React Router DOM
- Styling Best Practices - Use CSS-in-JS (styled-components), CSS Modules, or Tailwind CSS.
- Maintain Consistent Naming Conventions - Use PascalCase for components & camelCase
for variables (e.g., handleSubmit)
- Centralize API Calls, Use Environment Variables & Keep Error Handling Robust
React Project Folder Structure
Mini Project Wrap-up Login, Dashboard, Routing
- Implemented a Login page with form and basic authentication logic.
- Created a Dashboard page accessible only to authenticated users.
- Set up React Router for navigation between pages (/login, /dashboard).
- Used Protected Routes to prevent unauthorized access to the dashboard.

Note : Followed clean folder structure and component reuse for scalability.
Let’s do some practical

You might also like