📘

Ultimate React Course Introduction

Jul 8, 2024

Ultimate React Course Introduction

Overview

  • Presenter: Marsha Madani
  • Experience: Software Engineer with 20+ years of experience
  • Objective: Teach everything about React, from basics to advanced concepts, building a production-grade app for discovering video games.

Course Structure

  1. Basics to Advanced in React
    • No prior React knowledge required
    • Essential knowledge of HTML, CSS, and JavaScript is needed
    • Teaches Typescript from scratch
  2. Production-grade App
    • Building a video game discovery app
    • Features: Dark/Light mode, search & filter by genre and platform, dynamic page titles, sorting, loading skeletons
  3. Advanced Topics
    • Routing
    • State Management
    • React Query for data fetching
    • Authentication
    • Error handling
    • Performance optimization

Introduction to React

  • What is React?: A JavaScript library for building dynamic and interactive UIs, created by Facebook in 2011
  • DOM & React: DOM can become complex in large apps; React uses a virtual DOM for efficiency
  • Component-based Structure: Comprises reusable, modular components making code organization better
  • React Ecosystem: Not opinionated about other tools, allowing choice for routing, HTTP calls, state management, etc.

Development Setup

  • Node.js: Requires version 16 or higher
  • VS Code: Recommended editor with Prettier extension for formatting
  • Creating a React app: Using Veet (npm create vite@latest, project setup with TypeScript)

Building a React Component

  1. First Component: message.tsx
    • Created a functional component Message
    • Used JSX to return elements
    • Concept of JSX (JavaScript XML)
  2. Using the Component: Imported Message into App

State & Props

  • State vs Props: State is internal and mutable; Props are external inputs and immutable
  • Passing Props: Using interfaces in TypeScript to define component prop types
  • Handling Events & State: useState hook, event handling in function components

Bootstrap & Styling

  • Installing Bootstrap: npm install [email protected]
  • Dynamic Rendering: Using Bootstrap classes, rendering list items dynamically from an array, conditional rendering

Advanced React Features

  • Fetching Data: (Future topic)
  • Performance Optimization: (Future topic)

Course Extras

  • React Dev Tools: Useful for inspecting and analyzing React apps
  • Exercises: Practical implementation like creating buttons with Bootstrap
  • Complete Course: Includes exercises, summary notes, cheat sheets, and project development

Conclusion

  • Resources: Refer to Marsha's full course for in-depth learning
  • Additional Support: 30-day money-back guarantee

Important Links

Full transcript