Eduzan / React
React Tutorial Roadmap
Worked examples are fully visible. Check-yourself items are study aids you can reveal one at a time.
What is React?
React is a JavaScript library for building user interfaces, primarily used for creating fast, interactive, and component-based web applications.
History and Origin of React
React was developed by Facebook (Meta) and released in 2013 to solve challenges related to building large-scale, dynamic user interfaces efficiently.
Advantages of Using React
- Component-based architecture
- Virtual DOM for improved performance
- Reusable and maintainable code
- Strong community and ecosystem
- Widely used in modern frontend development
Installing Node.js and npm
- Installing Node.js
- Understanding npm (Node Package Manager)
Creating a React Application
- Setting up a new project using create-react-app
- Running and building the development server
Project Structure
- Understanding folders and files in a React project
- Purpose of
src,public, and configuration files
What is JSX?
JSX is a syntax extension for JavaScript that allows writing HTML-like code inside JavaScript files.
JSX Syntax
- Writing JSX elements
- Using JavaScript expressions inside JSX
JSX Attributes and Children
- Applying attributes in JSX
- Passing children elements
Types of Components
- Function components
- Class components
Creating and Using Components
- Creating reusable components
- Importing and exporting components
Props
- Passing data using props
- Default props and prop validation
State Management
- Understanding component state
- Using the
setStatemethod
Rendering Components
- Rendering a React component to the DOM
Updating the UI
- Re-rendering components when state or props change
Conditional Rendering
- Rendering content conditionally using JavaScript expressions
Event Handling in React
- Adding event handlers in JSX
- Handling user interactions
Synthetic Events
- Understanding React’s synthetic event system
Passing Arguments
- Passing parameters to event handlers
Controlled Components
- Managing form inputs using state
Form Submission
- Handling form submit events
Using Refs
- Accessing DOM elements using refs
State Sharing
- Sharing state between components
Lifting State
- Moving state to a common parent component
Practical Example
- Building a temperature calculator
Introduction to React Router
- Understanding client-side routing
Navigation
- Creating navigation using
LinkandNavLink
Route Parameters
- Defining and using dynamic routes
Introduction to Context API
- Solving prop drilling problems
Creating Context
- Creating and providing context values
Consuming Context
- Using context in functional components
Introduction to Hooks
- Why hooks were introduced
Core Hooks
- Using
useState - Using
useEffect
Custom Hooks
- Creating reusable logic with custom hooks
- Rules of hooks
Introduction to Redux
- Understanding global state management
Redux Setup
- Setting up Redux in a React project
Core Concepts
- Actions
- Reducers
- Store
Connecting Redux with React
- Using Redux with React components
Planning the Project
- Defining project requirements
- Choosing features and structure
Initial Setup
- Configuring the React project
- Organizing folders and files
Component Development
- Creating and styling components
State and Props
- Managing component state and props effectively
Routing and Navigation
- Implementing page navigation
CRUD Operations
- Creating, reading, updating, and deleting data
API Integration
- Fetching and managing data from external APIs
Production Build
- Building the React application for production
Hosting
- Deploying the app using Netlify or Vercel
End of lesson.