Ultimate React Course

Course Overview

• Comprehensive and practical React course.
• Suitable for beginners—no prior React knowledge needed.
• By end of the course, you will be able to build fast and scalable apps.
• Builds a production-grade app for discovering video games:
  • Features include dark/light modes, search, filtering, sorting, and dynamic page titles.
  • Advanced topics: routing, state management, data fetching, authentication, error handling, performance optimization.
• Instructor: Marsha Madani, software engineer with over 20 years of experience.

Prerequisites

• Good understanding of HTML, CSS, and JavaScript.
• Familiarity with Typescript is recommended; will be covered in the course.

Introduction to React

• React: JavaScript library for building dynamic and interactive user interfaces.
• Created at Facebook in 2011.
• Uses a tree structure called the Document Object Model (DOM) for managing web pages.
• React components help create reusable, modular, and organized code.
• React applications are composed of a tree of components.

Development Setup

• Need Node.js version 16 or higher.
• Recommended editor: Visual Studio Code (VS Code) with Prettier extension for code formatting.

Creating a React App

• Tools: Create React App (CRA) or Veet.
  • Veet preferred due to speed and smaller bundle sizes.
• Basic steps to create a project:
  • Terminal commands:
    • npm create veet@latest or specific version
    • cd project-name
    • npm install
    • code . to open project in VS Code
    • npm run dev to run the server

Project Structure

• Key files and folders:
  • node_modules: Third-party libraries
  • public: Public assets like images, videos
  • src: Source code
  • index.html: Basic HTML template
  • package.json: Project details and dependencies
  • tsconfig.json: Typescript compiler settings
  • vite.config.js: Vite configuration

Creating and Using Components

• Function-based components recommended.
• JSX Syntax:
  • Write HTML/XML-like code within JavaScript.
  • Converts to JavaScript using Babel.
• Creating a component:
  • File naming conventions (PascalCase)
  • Export and import components
  • Dynamic content with JSX
• State Management with Hooks (useState)
• Event Handling
  • onClick for click events
  • Handling complex logic within components
• Making Components Reusable
  • Using props for passing data and handlers
  • Treat props as immutable
• Rendering Lists Dynamically
  • map function for generating elements from arrays
  • Handling conditional rendering
• Key Techniques:
  • Fragments for grouping elements
  • Prop destructuring
  • Conditional Unmounting

Styling and Libraries

• Using Bootstrap for styling:
  • Installing Bootstrap
  • Importing Bootstrap in CSS
  • Using Bootstrap classes and components
• Creating List and Button Components

Advanced Concepts

• Props vs State
• Event Handlers and State Changes
• Conditional Rendering
• Component Tree and Virtual DOM
• React Dev Tools for debugging and inspection

Course Conclusion

• Encouragement to enroll in the full course.
• Full course features: 8 hours of content, exercises, summary notes, cheat sheets, production-grade project.
• 30-day money-back guarantee.
• Link to enroll in the complete course.