React Tutorial with Examples – Learn React from scratch with this React Crash Course 2019.
🔥Get the COMPLETE React Course: http://programmingwithmosh.com/courses/react
🔥Subscribe for more videos like this: https://goo.gl/6PYaGF
Want to learn more from me? Check out my blog and courses:
http://programmingwithmosh.com
https://www.facebook.com/programmingwithmosh/
Tweets by 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
Original source
47 responses to “React Tutorial – Learn React – React Crash Course [2019]”
I am going to put "Trained by Mosh" on my resume and get all the jobs!
Nice and easy to follow. Thanks Mosh.
I am stuck at 1:39:56 where Mosh is asking to pass the counterId to OnDelete event handler. I get an error when I click on Delete button says: counter.jsx:23 Uncaught TypeError: this.props.OnDelete is not a function.
Anybody any help? Suggestions??
My app.js doesnt have a class. It looks like a function App(). Could you let me know why is that?
Ctrl + Shift + i on windows
I'm 13 years old. Is this possible for me to learn React & Nodejs?
Wanted to clarify an issue with create-react-app and npm start. At this time, the method of installing create-react-app is no longer supported as this tutorial uses the older global installation method. The documentation says "If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version" – https://create-react-app.dev/docs/getting-started. If you are having trouble, run the uninstall command, and make your react app using "npx create-react-app my-app". Then. cd to the directory as explained in the guide and npm start will work as expected.
i have a problem when using the comman npm start ,they tell me that the script start is missing, any solutions please.
This video explains way better than any other book that I’ve read and tried to follow them just typing their codes, which I did not get any of it. I more thank you for your contribution to beginners like me!
Thx
Hey, how do you get those cool icons for various NodeJS folders and files?
Can someone please help me out? I have been trying all night to find some kind of mobile app building ide that uses javascript. I landed here. Is react even for mobile apps? If it is, is there really nothing simpler? This is so confusing compared to android studio. I'd just use that, but it doesn't offer java script support. I want to learn java script and app building, so an app building ide that supports java script would be perfect, but can't seem to find one.
when npm start
it says npm ERR!
start script: missing
I only saw tutorials in Spanish, but after this video, will only see tutorials in English!
Repeat 1:04:00 several times.
Please upload this course on udemy
One of the best tutorials I've come across. Well done.
why I got an error? I used $sudo npm i -g create-react-app@12.13.1 please help
Awesome lesson! Thanks!
React Tutorial – Learn React – React Crash Course [2019]
1.583.594 Aufrufe•16.07.2018
–> I see what you did here ^^
the setup configuration won't work you have to run this.
npx create-react-app my-app
cd my-app
npm start
instead of:
npm i -g create-react-app
Hii Mosh!!! can i get code of this shopping cart project?
mosh, after watching this video everybody could become react js developer. awesome boss
I'm confused where do I do the create-react-app command? in what directory?
This appears to be out of date in terms of the initial setup and installation. When I run create-react-app I get : A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.
what does extends do?
I really like your presentation but it looks like this course is outdated. Can you please update material?
Lol, don't ever give npm (or any package manager) sudo privileges. That's a sure fire way to open yourself up to attacks or damage to your system due to developer negligence.
Great tutorial! Thank you soooo much!
mosh you are best teache kheli mamnonm azat dost man
Aahaa what I needed !!
Hi Mosh, thanks for and other well before studied tutorial. Have a question, on 1:17:31 Composing Components, I don't see props. My version of react is different than yours. Do you have an explanation for it?
Great and Nice tutorial video for the ReactJS Learners
Great tutorial but it is outdated.
Best explanation of what react is. Just about 5 minutes in and already like it this video2
When I'm installing React it install app.js functional component and not a class component
why it doesn't install a class component like in the video above?
true && "" will return "", in your explanation its not clear that case or its wrong
The short cut to open Developer Tools on chrome is: "Crtl+Shift+i" on windows 😊
At the handleIncrement function here https://youtu.be/Ke90Tje7VS0?t=6868 there is no need in this line
counters[index] = { …counter };
because we already work with a copy of state.counters
A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.
unable to start the react app
if someone is having problems with npm start part – install the newest version of create-react-app. Worked for me
Hi there! Justin here, and when following your steps I found something working differently from your tutorial. At 1:15:42 you passed the "product" parameter into the listener, but in my code it keeps giving me error that I need to define the parameter first. This parameter was defined in the handleincrement class but the listener doesn't seem to catch it. Any ideas?
Awesome tutorial. Very beginner friendly and in no time you learn the basic concepts. Amazing content. Thank you Mosh 👏
thanks mosh, this tutorial was amazzzzzzzzzing ^_^
Hi Mosh, I have trouble in setting up the project in "09:27 Your First React App".
When I write what you have told us to "cd react app/" hit then enter and then type "$npm start"
I get: the command is either way wrong written or couldn't be found.
(I have Windows 10).
By the way, after having installed everything in the step before, I get no error but this "A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported."
Will this affect my project somehow?
Hey Mosh, thanks for your content I’ve been following you for some time. If I may, what VS Code theme are using? It’s quite beautiful 🙂 thanks.
Great tutorial in that Mosh explains best practices (showing before and after) and small little things like shortcuts.
hey mosh can you do a tutorial for react native?