React JS - React Tutorial for Beginners

6,126,749
0
Published 2018-07-16
Watch the latest version:    • React Tutorial for Beginners  
React JS Tutorial - Get up & running with React JS: the most popular JavaScript library in the world!
- Want to master React? Get my React mastery course: bit.ly/3l0vWYR
- Subscribe for more videos like this: goo.gl/6PYaGF

Want to learn more from me? Check out my blog and courses:

Courses: codewithmosh.com/
Blog: programmingwithmosh.com/
Facebook: www.facebook.com/programmingwithmosh/
Twitter: twitter.com/moshhamedani

TABLE OF CONTENT

00:00 Introduction
01:14 What is React
05:48 Setting Up the Development Environment
09:27 Your First React App
16:03 Hello World
22:26 Components
24:06 Setting Up the Project
26:15 Your First React Component
31:38 Specifying Children
35:56 Embedding Expressions
40:49 Setting Attributes
46:36 Rendering Classes Dynamically
50:57 Rendering Lists
54:58 Conditional Rendering
1:01:04 Handling Events
1:03:56 Binding Event Handlers
1:08:34 Updating the State
1:10:51 What Happens When State Changes
1:12:58 Passing Event Arguments
1:17:31 Composing Components
1:21:18 Passing Data to Components
1:24:31 Passing Children
1:27:44 Debugging React Apps
1:31:55 Props vs State
1:34:22 Raising and Handling Events
1:39:16 Updating the State
1:43:57 Single Source of Truth
1:47:55 Removing the Local State
1:54:44 Multiple Components in Sync
2:00:39 Lifting the State Up
2:06:18 Stateless Functional Components
2:08:49 Destructuring Arguments
2:10:52 Lifecycle Hooks
2:12:32 Mounting Phase
2:18:09 Updating Phase
2:22:31 Unmounting Phase

#react #webdevelopment #programming

All Comments (21)
  • 2 years ago when I started to learn web development, I randomly came to this React Tutorial and back then I've doubted myself if I can get a job in software development. I almost quit this web development tutorial stuff but then I still believed in myself and now I am a React Developer and Tech lead in my team. thanks mosh!
  • @NN-gy7xl
    I am going to put "Trained by Mosh" on my resume and get all the jobs!
  • @robertn4996
    I did struggle a lot to learn React. A lot of time that I wasted. The problem? I did not know the basics of Javascript in first place. You need to walk before you can run. So I took a few very basic books (books, not complex tutorials!) and learned the fundamentals. After I learned the basics of Javascript, learning React became much easier. Edit: For those asking about the books, for the very basics I learned with Javascript In Less than 50 Pages. And to develop my knowledge I learned with Head First Javacript Programming.
  • @Dherlandsson
    43:12 If you, like me, installed the latest version of bootstrap (v5 at the time of writing this) the "badge-primary" won't work. In bootstrap v5 it's changed to "bg-primary" and "bg-secondary" etc instead, so try className="badge bg-primary m-2" for it to function correctly!
  • @lukaszp7827
    W10 update for VSC 1.38.1 8:30 : file -> preferences -> settings -> text editor -> formatting : format on save
  • @shaddygimmz948
    I had to pause the video to share my thoughts. It's just unbelievable how he explains everything so simply yet so effectively. I was looking for a perfect react video to get me started and I just landed on one..Thanks Mosh
  • @murugappanm9883
    This guy explains react better than the documentations. we are blessed to be living in the age of internet.
  • @simplesimon2960
    This is the fourth React app I've built from a tutorial but the first one where I was actually able to understand what was going on because of how it was all explained in detail. Really excellent style of teaching and much appreciated!
  • @imranq9241
    React is really elegant in the way it is designed and compiled. Kudos to the facebook team, and of course Mosh who taught us!
  • @fahimimtiaz4532
    The comment section of this video is so helpful. Really good to see so many people willing to help out someone else so that they don't go through the trouble they went through <3
  • @luisr1421
    Dude, I've literally watched 100 videos on this and nothing clicked until I saw this. I LOVE YOU MOSH!
  • @tolvajkergetok
    Mosh is by far the most awesome tutor on the entire net. I already took two of his Angular courses and it landed me in a pretty good job. For added difficulty I had concentration difficulties at the time due to serious trauma, so bad I literally couldn't read a page in one sitting. I genuinely felt that I can't carry on with my profession, but Mosh gave it all back to me. Now I'm switching to React, and he's still the only one who can flawlessly explain the entire mess. We have to come up with some super fancy award for this guy.
  • @angyloh
    Hadn't taken a course with you this is amazing the clear way you explain all the concepts. Amazing content, thanks for it!
  • you are good at explaining reactjs i've been watching this tutorial for an hour now and i didn't feel the time passing
  • @adeoke3086
    I’ve not even finished watching the video and already you have mastered how to give me a fluffy feeling that it’s gonna be interesting and fun. I think I’ll enjoy this.
  • 8:40 On windows, go to file -> Preferences -> Settings Edit: Then, at the search bar at the top, search for "format on save". Tick the small box to enable it :) Then, at setting, search for "Default format" At "Editor: Default formater", select from null to prettier-vscode for it to work :)
  • @smiling_assasin
    I appreciate how mosh makes things looks so much easier with great examples, and doesn't skip concepts like many other youtubers ... ❤️
  • @livu69
    Best React tutorial on youtube. I''ve been watching Mosh tutorials for a long time ago and the conclusion is pretty clear: he's a great teacher