Navigate Select ESC Close

React Tutorial for Beginners

2023-03-12 Education
5.6m
94.8k
2.0k
Programming with Mosh
Programming with Mosh
5.1m subscribers

Unlock all features

FREE: Get instant access to 10 AI summaries, chats, or transcripts per day.

Description

Master React 18 with TypeScript! ⚛️ Build amazing front-end apps with this beginner-friendly tutorial. 🚀 Want the ultimate React deep dive? - Check out my full React course: https://mosh.link/react-course - Subscribe for more awesome content: https://goo.gl/6PYaGF ✋ Stay connected: - Twitter: https://twitter.com/moshhamedani - Facebook: https://www.facebook.com/programmingwithmosh/ - Instagram: https://www.instagram.com/codewithmosh.official/ - LinkedIn: https://www.linkedin.com/school/codewithmosh/ 📖 TABLE OF CONTENT 00:00:00 Course Intro 00:01:55 Prerequisites 00:02:43 What is React? 00:04:57 Setting Up the Development Environment 00:06:24 Creating a React App 00:09:17 Project Structure 00:11:20 Creating a React Component 00:16:41 How React Works 00:19:00 React Ecosystem 00:21:04 Building Components 00:21:40 Creating a ListGroup Component 00:27:15 Fragments 00:29:42 Rendering Lists 00:33:11 Conditional Rendering 00:38:36 Handling Events 00:44:43 Managing State 00:50:44 Passing Data Via Props 00:54:42 Passing Functions Via Props 00:58:27 State Vs Props 01:00:00 Passing Children 01:05:04 Inspecting Components with React Dev Tools 01:07:14 Exercise: Building a Button Component 01:14:15 Exercise: Showing an Alert #react #reactjs #javascript #coding

Top Comments (10)

@iggiebrightwell2502 2025-06-02

The part where you broke down creating a React component at 11:20 was super helpful. A smooth deploy with Sherpa-sh completes the picture.

718 3 replies
@avivhurvitz 2023-04-13

I'm a long time developer, but novice at web development. This tutorial was perfect for me. I appreciate how Mosh walks you through real development practices: incremental development cycles, using the IDE and tools, looking at errors, testing as you go. Thank you Mosh!

611 13 replies
@verywellrounded 2023-11-03

Transitioning from backend to full stack development a few years ago. Been developing react apps for the last two years. I picked up several neat shortcuts and several key takeaways for a project I am building from scratch now. Thank you!

356 7 replies
@sunilshastry 2023-03-18

For everyone asking what theme he's using, its called "oh lucy"

318 10 replies
@mwaikul 2023-07-06

Love the tutorial! Its the perfect balance of "show me the code" and "explain the concepts to me". Came here after a bunch of tutorials that jumped to deep into the code with no concepts or vice versa. Thankyou!

314 4 replies
@programmingwithmosh 2023-03-13

🚀 Want the ultimate React deep dive? Check out my full course: https://mosh.link/react-course 👍 Subscribe for more awesome content: https://goo.gl/6PYaGF

255 28 replies
@VideoUser47316 2024-04-06

Backend developer trying to be full-stack here. Best explanation of React concepts I've seen before. Thanks a lot!

171 4 replies
@unstoppablesiddharth-k2i 2025-09-04

Watchin this video before the interview

118 5 replies
@fido9745 2023-11-29

I was confused about using a <Fragment> instead of a <div>, but I looked it up on google and found In React, ` "Fragment" and "Div" are used interchangeably. The main difference between the two is that "Fragment" clears out all extra divs from a DOM tree while "Div" adds a div to the DOM tree. With React Fragments, we can create code that is cleaner and easier to read. `

85 3 replies
@KyleMaxwell 2023-11-25

I'm an engineering manager recently hired into a full-stack team that uses React - this was a great taste of how React works to give me a better sense of it!

60 2 replies

Unlock the Data Inside
Turn Videos into Knowledge

  • Get FREE 10/day: transcripts, summaries, chats
  • Chat with videos, export text & PDF
  • $1 free API credit for RAG, chatbots & research

Free forever plan • All features unlocked

App screenshot