Ultimate React Course Notes

Course Overview

• Comprehensive course from basics to advanced concepts in React.
• Build and deploy a production-grade app for discovering video games.
  • Features: Dark/light mode toggle, game search, genre/platform filters, dynamic page title updates, loading skeletons, etc.
• Instructor: Marsha Madani, software engineer with over 20 years of experience.
• Previous teaching experience: YouTube channel and online school (codebitmarsh.com).

Prerequisites

• No prior knowledge of React required.
• Good understanding of HTML, CSS, and JavaScript is necessary.
• TypeScript will be used throughout the course (superset of JavaScript).

Introduction to React

• React is a JavaScript library for building dynamic, interactive UIs.
• Created by Facebook in 2011.
• Replaces the complexity of DOM manipulation with small reusable components.
• Components help in writing modular and organized code.

Development Environment Setup

• Node version 16 or higher is required.
• Use Visual Studio Code (VS Code) as the editor and install the Prettier extension for code formatting.
• Create a React app using either Create React App (CRA) or Vite. Vite is recommended for faster builds.

Creating a React App with Vite

1. Run npm create vite@latest.
2. Specify the project name and select React framework.
3. Choose TypeScript as the language.
4. Install dependencies using npm install and run the web server with npm run dev.

Key Files and Folders in React Project

• node_modules: Contains third-party libraries.
• public: Public assets (images, videos).
• src: Source code of the application, including components.
• index.html: Basic HTML template; root div for React app.
• package.json: Project information and dependencies.
• tsconfig.json: TypeScript configuration settings.

Creating React Components

• React components can be created using functions or classes (functional components are preferred).
• Naming convention: PascalCase for component names.
• JSX: Syntax that combines HTML with JavaScript.
  • JSX gets compiled to JavaScript method calls.
• To create a component, define it in .tsx file.

Example Component

• Create a component Message that returns an <h1> element.
• Export the component and import it in another component (e.g., App).
• Use the component in JSX syntax.

Component Structure

• React applications are structured as a tree of components.
• The virtual DOM represents the component tree and allows efficient updates.

Props and State Management

• Props: Read-only inputs to components, passed as attributes.
• State: Internal data managed by components that can change over time.
• Use useState for managing state in functional components.

Handling Events

• Events can be handled using props (e.g., onClick).
• Use event handlers to manage actions (e.g., clicking a button).

Dynamic Rendering

• Use arrays and map to render lists of items in components.
• Ensure each item has a unique key prop.

Conditional Rendering

• Use conditional statements or ternary operators to render content based on certain conditions.

Children Prop

• Components can accept children, allowing for nested elements.
• Access children using the children prop.

React Dev Tools

• Useful for inspecting and analyzing React applications.
• Allows viewing component hierarchy, props, and state.

Exercises and Projects

• Create a Bootstrap button component.
• Implement a dismissible alert component.

Conclusion

• The tutorial provided a solid foundation in React.
• Full course includes more content, exercises, and projects with a 30-day money-back guarantee.