React Essential Training

Introduction

• Building modern user interfaces with React
• How to use Codespaces and what you should know

1. React Fundamentals

• What is React?
• How React works
• Understanding the React compiler
• Setting up Chrome tools for React
• Working with VS Code

2. Creating React Elements

• Initializing a project with Vite
• Creating React elements
• Working with JSX syntax
• Creating a React component
• Adding component properties
• Destructuring component properties

3. Writing React Components

• Working with lists
• Adding keys to list items
• Displaying images with React
• Using Fragments

4. Handling State in a React Project

• Destructuring arrays
• Understanding the useState hook
• Toggling state with a button
• Handling state with nested components
• Managing state with useReducer
• Working with the useEffect hook

5. React Server Components

• Creating a project with Next.js
• Using the App Router
• Building a server component
• Challenge: Creating a route
• Solution: Creating a route

6. Asynchronous React in Next.js

• Fetching data in React applications
• Passing data as props
• Creating a client component
• Building a form
• Creating a server action

Conclusion

• Designing performant apps with React Server Components