Ultimate React Course

Introduction

• Learn everything from React basics to advanced concepts
• By the end of the course, build fast and scalable apps with React
• No prior knowledge of React required
• Building & deploying a production-grade app for discovering video games
• Features: dark/light modes, search, filter by genre/platform, dynamic page title updates, loading skeletons, sorting games
• Advanced topics: routing, state management, fetching data with React Query, authentication, error handling, performance optimization
• Instructor: Marsha Madani, software engineer with 20+ years of experience

Prerequisites

• Intermediate knowledge of HTML, CSS, JavaScript
• Typescript basics (covered in course)

What is React?

• React: JavaScript library for dynamic and interactive UIs, created by Facebook in 2011
• Advantages: Efficient UIs, modular components, reusability
• DOM and Virtual DOM: React creates a virtual DOM, updates only changed components in actual DOM
• Components: Modular building blocks, can be combined to create complex UIs

Setting up the Development Environment

• Node.js: Version 16 or higher
• Editor: Visual Studio Code (VS Code) recommended with Prettier extension for code formatting

Creating a React Application

• Tools: Create React App (CRA) or Vite (preferred for speed and smaller bundle sizes)
• Steps to create a React app using Vite:
  1. npm create vite@latest or specific version 4.1.0
  2. Install third-party dependencies with npm install
  3. Open in VS Code with code .
  4. Run development server with npm run dev
  5. Access the app at http://localhost:<port>

Project Structure

• Node_modules: Third-party libraries
• Public: Static assets (images, videos, etc.)
• Src: Source code of the application
• App.css and Index.css: Stylesheets
• Main.tsx: Entry point
• Package.json: Project information and dependencies

Creating and Using Components

• Function-based components (preferred over class-based components)
• Naming convention: Pascal casing
• Using JSX to describe UIs
  • JSX: JavaScript syntax extension for HTML in JavaScript code
• Conditional Rendering
  • Use JSX expressions within {}
  • Using ternary operators and logical && for conditional rendering
• Dynamic Content Rendering with map()
• Event Handling
  • Using onClick for click events
  • Update state and re-render components dynamically

State and Props

• Props: Input to components, immutable, passed by parent component
• State: Internal data managed by component, mutable, changes re-render component
• Using useState hook for state management
• Passing props and children to components

React Developer Tools

• Browser extension for inspecting and debugging React applications
• Components tab: Inspect the component tree, view props and state
• Profiler tab: Analyze app performance

Project: Building a List Group Component

• Install Bootstrap for styling
  • Command: npm install bootstrap
  • Import in CSS file: import 'bootstrap/dist/css/bootstrap.css'
• Create reusable components with props

Exercises

• Implementing a Bootstrap Button
  • React component with props: children, color, onClick
  • Handling dynamic CSS classes and click events
• Building a Dismissible Alert Component
  • State management for visibility
  • Props for dismissible functionality (e.g., onClose callback)

Key Takeaways

• React is robust for building dynamic UIs
• Beginner-friendly but powerful for creating scalable applications
• Enterprise-level capabilities through components, state management, and props
• Integration with tools like TypeScript, Bootstrap, and various React libraries

Additional Course Information

• Complete course: 8 hours with advanced techniques, exercises, summary notes, and cheat sheets
• Money-back guarantee for 30 days

Conclusion

• Emphasize the practicality and hands-on nature of the course
• Encouragement to practice and implement examples provided