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: http://bit.ly/2KVl2A3
– Subscribe for more videos like this: https://goo.gl/6PYaGF

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

Courses: https://codewithmosh.com
Blog: https://programmingwithmosh.com
Facebook: https://www.facebook.com/programmingwithmosh/
Twitter: https://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

source

32 Comments

  2. I prefer Angular and I have been an Angular developer for 5 years working in Monorepo's utilizing Nx. I do not think Angular's functionalities and setup break from one version to another. Maybe they used to but nowadays Angular has very specific migration guides and CLI tooling to automate the process for you and it's relatively easy. The problem now comes in with integrating all the 3rd party libraries and tooling with Angular like Storybook, Cypress, and Nx which often fall behind.

  4. You delete a lot of code and re add stuff throughout the tutorial (e.g. after introducing lists you go back to a previous state of the code). It would be good if you regularly showed the entire code so viewers can properly sync up to what you're doing, in particular if you're not doing this all in one go.

  8. Great video, however saying that parts of Angular often break between versions is not really true for the last few years at least. We've been using the latest versions of Angular for the last four years and have not had to deal with any major breaking changes. We did have a number of those in third party libraries however.

    I totally understand that some of that frustration carries over from the Angular 1 -> 2 upgrade, which from what I know was like a completely different framework.

  14. What terminal does Mosh use here and does anyone have instructions on how to set it up?

    Also is it possible to set up using OhMyZsh in the VS Code built in terminal?

Leave A Reply

Please enter your comment!
Please enter your name here