Intro to React JS Part 1 | Declarative UI, Vite, and the Virtual DOM - Class 7

Welcome to Part 1 of our Introduction to React JS! In this lesson, we dive into the core fundamentals of the React ecosystem. We explore why React won the framework wars, how it speeds up web performance using the Virtual DOM, and how to get your very first app scaffolded in seconds using Vite.

We also take a quick commercial break to showcase a past student's Capstone project (Otaku Vault) and share valuable industry advice on how to use AI tools (like ChatGPT or GitHub Copilot) the right way—to become a better software architect rather than just relying on them to write code. Finally, we wrap up by looking at how to manage state, and we take a peek at what's possible with a custom React 360 Pokémon demo!

🕒 Chapters & Timestamps
[00:15] Class Intro, Open PRs & Capstone Project Discussion

[12:35] What is React JS? (Declarative vs Imperative & Composability)

[22:00] Capstone Showcase: Otaku Vault

[28:40] Industry Advice: How to Use AI the Right Way as an Engineer

[40:00] The Old Way: Scaffolding a React App in React 15

[49:50] The Modern Way: Scaffolding with Vite (npm create vite@latest)

[01:05:05] How React Works Under the Hood (Virtual DOM vs. Real DOM & Diffing)

[01:11:15] Understanding JSX (Mixing HTML & JavaScript)

[01:23:05] HTML Attributes in React (className vs class)

[01:28:50] Intro to React State (useState), onClick Events, & Lab Assignment

[01:35:35] Wrap Up & React 360 Pokémon VR Demo Showcase

💻 Helpful Commands from the Lesson
To quickly scaffold your new React application, open your terminal and run:
npm create vite@latest

Don't forget to like and subscribe for Part 2!

#ReactJS #WebDevelopment #CodingBootcamp #Vite #JavaScript #FrontendDevelopment #SoftwareEngineering #MadeInBrooklynGames

Видео Intro to React JS Part 1 | Declarative UI, Vite, and the Virtual DOM - Class 7 канала Hessvacio Hassan (Made in Brooklyn Games)