Ultimate React Course Overview

Course Introduction

• Comprehensive course from basics to advanced React concepts.
• Build and deploy a production-grade app for discovering video games.
• Features include:
  • Dark and light mode toggle
  • Search and filter games by genre and platform
  • Dynamic page title updates
  • Loading skeletons while fetching data

Instructor Information

• Instructor: Mosh Hamedani, software engineer with 20+ years of experience.
• Creator of the online school Code with Mosh.

Prerequisites

• No prior knowledge of React required.
• Good understanding of HTML, CSS, and JavaScript is necessary.
• Course will use TypeScript (static typing for JavaScript).

What is React?

• A JavaScript library for building dynamic and interactive user interfaces.
• Created by Facebook in 2011.
• Most widely used library for front-end development.

Why Use React?

• Simplifies working with the DOM through reusable components.
• Components enable better organized and modular code.

Setting Up Development Environment

1. Ensure Node.js version 16 or higher is installed (check with node -v).
2. Use Visual Studio Code (VS Code) as the editor.
3. Install Prettier extension for code formatting.

Creating a React App

• Use Create React App (CRA) or Vite for creating new applications.
• Example command for Vite:

  npm create vite@latest
  

• Choose React and TypeScript during setup.

Key Files and Folders in React Project

• node_modules: Contains third-party libraries.
• public: Public assets (images, videos).
• src: Source code of the application.
  • Contains the App component.
• index.html: Basic HTML template with a root div.
• package.json: Project metadata and dependencies.
• tsconfig.json: TypeScript configuration.

Creating a React Component

• Components can be created using functions or classes (preferably functions).
• Follow Pascal casing convention for component names.

Example Component: Message

• Create Message.tsx:

  const Message = () => {
      return <h1>Hello World</h1>;
  };
  export default Message;
  

• Import and use this component in App.tsx.

JSX Syntax

• JSX allows HTML-like syntax in JavaScript (gets compiled to JavaScript).
• Example of using variables in JSX:

  const name = "Mosh";
  return <h1>Hello {name}</h1>;
  

Understanding State and Props

• State: Internal data managed by a component that can change over time.
• Props: Inputs to components, treated as immutable.
• Each component has its own state.

Handling Click Events

• Use the onClick prop to handle click events.
• Example:

  <li onClick={() => console.log(item)}>{item}</li>
  

Building Reusable Components

• Pass data to components using props.
• Example:

  <ListGroup items={cities} heading="Cities" />
  

Conditional Rendering

• Use ternary operator or logical AND to conditionally render content.
• Example:

  {items.length === 0 ? <p>No items found</p> : <ItemList />}
  

Using TypeScript with React

• Define the shape of props using interfaces.
• Example:

  interface ListGroupProps {
      items: string[];
      heading: string;
  }
  

React Dev Tools

• Useful for inspecting and analyzing React applications.
• Available for Chrome, Firefox, and Edge.

Exercises and Assignments

• Create a bootstrap button component.
• Implement dynamic text and click handling.
• Implement an alert component that can be dismissed.

Conclusion

• Comprehensive coverage from basics to advanced topics.
• Encouragement to take the full course for a deeper understanding of React.