Scribd
Upload
4 views4 pages

React JS - React Focus

This document serves as a comprehensive guide to React, covering its introduction, components, state management, and event handling. It includes detailed sections on hooks, forms, routing, context API, and custom hooks, as well as practical applications like creating a table of contents and managing focus. The final project involves building a documentation page that incorporates these concepts with a focus on user experience.

Uploaded by

trivedi.cropconnect
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views4 pages

React JS - React Focus

This document serves as a comprehensive guide to React, covering its introduction, components, state management, and event handling. It includes detailed sections on hooks, forms, routing, context API, and custom hooks, as well as practical applications like creating a table of contents and managing focus. The final project involves building a documentation page that incorporates these concepts with a focus on user experience.

Uploaded by

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

1: React Introduction

 What is React?

 React vs Vanilla JS vs Other Frameworks

 Setting up a React project (CRA or Vite)

 Folder structure explained

 Introduction to JSX

 Writing your first React component

2: Components and Props

 Function components vs Class components

 Passing data using props

 Children props

 Props destructuring

 Component composition

3: State and Events

 What is state?

 useState() hook

 Handling user events (click, input)

 Two-way binding using useState

 Conditional rendering with state

4: Lists and Keys

 Rendering lists using .map()

 Using key props correctly

 Creating dynamic lists

 Conditional rendering inside lists

5: useEffect Hook
 Why use useEffect?

 useEffect for side effects

 useEffect dependency array

 Cleanup function

 Multiple useEffect hooks

6: Handling Forms

 Controlled components

 onChange events

 Form submission and preventing default

 Validations (basic)

 Managing multiple form fields

7: Component Communication

 Parent to child (props)

 Child to parent (callback functions)

 Sibling communication via common parent

 Lifting state up

8: Conditional Styling and CSS

 CSS in React (CSS Modules, inline styles)

 Conditional styling

 Class toggling based on state

 Styling active elements

9: Routing with React Router

 Introduction to react-router-dom

 Setting up BrowserRouter

 Defining routes using <Route> and <Routes>


 Link and NavLink components

 URL parameters and nested routes

10: React Context API

 Why Context?

 Creating a context

 Providing context using <Provider>

 Accessing context via useContext

 Avoiding prop drilling

11: Hooks

 What are custom hooks?

 Creating a basic custom hook

 Reusing logic with custom hooks

 Naming convention and return pattern

12: Refs and DOM Manipulation

 Using useRef() hook

 Accessing DOM nodes

 Managing focus with refs

 Mutable values with refs

13: React Focus

Build Static TOC with Scroll Links

 Why TOC is useful in docs/blogs

 Autofocus on an input field

 Moving focus on validation error

 Focusing after button click

 Keyboard accessibility
 Preparing TOC data (id, title)

 Mapping TOC to links

 Linking TOC with content using id

 Enabling smooth scroll with CSS

14: React Focus TOC

Highlight Active Section on Scroll

 Using IntersectionObserver API

 useEffect for scroll detection

 Active section state management

 Updating class for focused TOC item

 Sticky sidebar with CSS

15: Final Project – Docs Page with Focus

 Project setup

 Creating multiple content sections

 Implementing TOC sidebar

 Scroll-based highlighting

You might also like