ImmersiveAmbientModecolor: #efd7cc (color 2)
Video Format : 22 (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz
Audio Format: Opus - Normalized audio
PokeTubeEncryptID: 3d4564e692e72dc30ecc4dc06e0913dfb78e000690325245a3d76a3795b45bc8bd6747e445d2962457b7f2d6f481c106
Proxy : eu-proxy.poketube.fun - refresh the page to change the proxy location
Date : 1716386350606 - unknown on Apple WebKit
Mystery text : S2U5MFRqZTdWUzAgaSAgbG92ICB1IGV1LXByb3h5LnBva2V0dWJlLmZ1bg==
143 : true
6,117,594 Views • Jul 16, 2018 • Click to toggle off description
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
Views : 6,117,594
Genre: People & Blogs
Date of upload: Jul 16, 2018 ^^
Rating : 4.939 (1,419/92,259 LTDR)
RYD date created : 2022-04-09T19:09:07.606256Z
See in json
YouTube Comments - 5,017 Comments
Top Comments of this video!! :3
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!
656 |
I am going to put "Trained by Mosh" on my resume and get all the jobs!
4.9K |
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.
146 |
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!
495 |
W10 update for VSC 1.38.1
8:30 : file -> preferences -> settings -> text editor -> formatting : format on save
369 |
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 :)
66 |
This guy explains react better than the documentations. we are blessed to be living in the age of internet.
111 |
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
39 |
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!
58 |
How to fix: "npm ERR! missing script: start" when trying to run.
1. Uninstall the global version of the create-react app :
Write in your console: uninstall -g create-react-app
2. Delete the folder react-app (if this is the name of your react project)
3. Recreate your new project locally
Write in your console: npx create-react-app react-app
4. go into your react-app folder and type
npm start .... Have fun
This error is happening because create-react-app is not allowed to be used globally for some time
107 |
If anyone is having trouble installing and using create-react-app (because the one he is using is very outdated), here are the commands to install the latest version and create a new application:
npm init
npm install create-react-app (don't use -g)
npx create-react-app react-app
cd react-app
npm start
28 |
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
8 |
Some error fixes that might be helpful --
1:23:25 If you get "TypeError: Cannot read property 'value' of undefined" after adding this.props.value, try removing the Counter constructor in counter.jsx
1:40:07 If your counterId is undefined, add prop "id={counter.id}" to your Counter component in counters.jsx
2:04:13 Change your App.js to match the other classes ie. from "function App()" to class "App extends Component" ...and add "render()" to return your React.Fragment
99 |
React is really elegant in the way it is designed and compiled. Kudos to the facebook team, and of course Mosh who taught us!
83 |
Some tips from my side where you could face some issues-
1. If you are watching this tutorial after April 2022 you should use react version 17 because version 18 is fairly new and it would be difficult to follow the tutorial.
2. Components names in react should always start from capital letters.
62 |
My god, cannot believe that you provide this for free, really really appreciate it !!!
15 |
Dude, I've literally watched 100 videos on this and nothing clicked until I saw this. I LOVE YOU MOSH!
16 |
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.
587 |
Hadn't taken a course with you this is amazing the clear way you explain all the concepts. Amazing content, thanks for it!
1 |
@programmingwithmosh
1 month ago
- Want to learn more? Get my complete React mastery course: bit.ly/3l0vWYR - Subscribe for more videos like this: goo.gl/6PYaGF
2 |