React is a JavaScript library for building dynamic web applications. Upon completion of this course, you’ll know everything you need in order to build web applications in React. You can also try the interactive version of the course here: https://scrimba.com/g/glearnreact
This comprehensive introduction to React was created by Bob Ziroll (@bobziroll). Bob is the Director of Education at V School, an award-winning school of technology education.
🔗Tutorial Hell link mentioned in video: https://codeburst.io/digging-my-way-out-of-tutorial-hell-6dd5f9927384
🔗Virtual DOM video mentioned: https://www.youtube.com/watch?v=BYbgopx44vo
Check top comment to see what code you have to add to get React working locally.
⭐️Course Contents ⭐️
⌨️ (0:00:00) Course Introduction & Philosophy
⌨️ (0:05:22) What we’ll be building
⌨️ (0:06:24) Why React?
⌨️ (0:09:25) ReactDOM & JSX
⌨️ (0:16:19) ReactDOM & JSX Practice
⌨️ (0:20:34) Functional Components
⌨️ (0:24:32) Functional Components Practice
⌨️ (0:29:41) Move Components into Separate Files
⌨️ (0:35:07) Parent/Child Components
⌨️ (0:43:14) Parent/Child Component Practice
⌨️ (0:48:12) Todo App – Phase 1
⌨️ (0:50:50) Styling React with CSS Classes
⌨️ (0:55:56) Some Caveats
⌨️ (0:58:12) JSX to JavaScript and Back
⌨️ (1:02:11) Inline Styles with the Style Property
⌨️ (1:09:21) Todo App – Phase 2
⌨️ (1:12:42) Props Part 1 – Understanding the Concept
⌨️ (1:14:56) Props Part 2 – Reusable Components
⌨️ (1:17:29) Props in React
⌨️ (1:29:39) Props and Styling Practice
⌨️ (1:40:25) Mapping Components
⌨️ (1:48:27) Mapping Components Practice
⌨️ (1:53:44) Todo App – Phase 3
⌨️ (1:58:16) Class-based Components
⌨️ (2:03:32) Class-based Components Practice
⌨️ (2:07:11) State
⌨️ (2:12:08) State Practice
⌨️ (2:15:45) State Practice 2
⌨️ (2:19:59) Todo App – Phase 4
⌨️ (2:22:05) Handling Events in React
⌨️ (2:25:52) Todo App – Phase 5
⌨️ (2:27:11) Changing State
⌨️ (2:39:29) Todo App – Phase 6
⌨️ (2:47:14) Lifecycle Methods Part 1
⌨️ (2:56:45) Lifecycle Methods Part 2
⌨️ (3:00:07) Conditional Rendering
⌨️ (3:11:26) Conditional Rendering Part 2
⌨️ (3:14:21) Conditional rendering Practice
⌨️ (3:23:00) Todo App – Phase 7
⌨️ (3:25:34) Fetching data from an API
⌨️ (3:36:34) Forms Part 1
⌨️ (3:48:55) Forms Part 2
⌨️ (4:00:11) Forms Practice
⌨️ (4:24:29) Container/Component Architecture
⌨️ (4:35:53) Meme Generator Capstone Project
⌨️ (4:56:11) Writing Modern React Apps
⌨️ (5:02:17) Project Ideas for Practicing
⌨️ (5:03:06) Conclusion
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
Original source
43 responses to “Learn React.js – Full Course for Beginners – Tutorial 2019”
To get this code working, there is a little set up not mentioned in the video.
If you are coding on scrimba.com, click the gear icon in the top right corner and select 'add dependency…'. First add 'react', then add 'react-dom'.
If you are building locally, you should first install create-react-app. Get it here: https://facebook.github.io/create-react-app/
Thank you. Loved it. Perfect way of teaching.
At https://youtu.be/DLX62G4lc44?t=14122 you can do this.setState({ [name]: type === 'checkbox' ? checked : value })
Are these 2 projects good enough to put in my portfolio.
Guys, please let me know.
Ty.
you are god of the teacher
So good, I watched it twice.. lol
best react tutorial so far
If your looking for a video that will teach you how to setup and work with an actual local dev environment, this video is not for you. It uses Scrimba.com which is a sandbox and that's now how we build apps in the real world, so if your looking to learn so you can get a job and know how to setup and deploy, skip this video.
Your Form tutorial is very useful. Thanks a lot. Could you please advise how to add function, e.g. sum some states. For example, this.state: working days and rate. The function should have a multiply both. Then have a button to show the result with condition less 5 is red, less 10 is yellow, other red. Thanks a lot in advance.
How did you initialise react dependencies?
i started working on this tut in february…on 12th….and i made it work on 14th feb….why? coz i didnt know how his files were setup and i totally did not want to use the create-react-app.
i wanted my own from scratch….
so it took me 18 hours….but it was worth it…..i found so much more and tips…tricks…ways….new implementation…..and how we can create react app….from scratch….and how to collect and add and create raw files…and which file did what and when and after what….damnnnnn it went crazy 18 hours…..but seriously…..i felt like superman…after i fixed it.
There is a duplicate version of the same video – https://www.youtube.com/watch?v=Po1Rs0_mnQw
legendary tutorial. thanks for this
hi everybody
who could tell me whats the name of this code editor who has been used in this tutorial?????
Excellent Video tutorial ! Appreciate all your efforts and giving it for free. Thanks
please update me on the benefits of react over angular
where to add or link css styling..not mentioned ..please clarify
also write links in description
Amazing!!!
Thanks. Is there a part 1, where I can learn how to install and setup a REACT environment (step-by-step)? This tuts jumps right in to coding.
HELP ME!!
I got error in 1:53:00 , I created array in vschoolproduct & also create Product component & write same code as on video but still shows error, Error is : " TypeError: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function "
This is what the world needs! Free top notch 5 hours videos.
Thank you so much for making the world better.
Subcribed and liked!
This is the best meme generator tutorial.
Thanks for your efforts in making this tutorial, a very good explanation, great exercises.
Idk why, but this reminds me of asp.net webforms.
as soon as I saw a meme generator, I was interested LOL
Hello, I download react.js, react-dom.js and Babel.js and linked them inside my index.html file. And then created a main.js file where I do all my react stuff. What I am unable to do is to use the import and export to add my local react.js, react-dom.js and babel.js files inside my main.js file. It's not working. Can you help me out ?
CC please 😭
It is funny how that meme text was prefect for almost every meme XD
Hey I think you have uploaded a great video, but im facing issues. I'm not sure if you are available to help.
can someone tell me what keyboard is that? It sounds so awesome!!!
how to set up environment for react and which editor you are using?
Awesome course!!!Many many thanks to frreecodecamp
Good intro!
Can I like this 15 times?
does it need any installation? I tried but index.html open blanks
Thank you so much. It is a great contribution to free knowledge.
This is the best tutorial with clear explanation
I thought only classes are noted with first capital letter and methods/functions not, but only camel case… Why is it different in React?
Can anyone please tell , how to run react project on local machine without scrimba?
Hello, the tutorial is very useful, thank you very much. Could you please explain how to add input variable and choose the option for number as you explained in Chapter 14 – JSX to JavaScript and back. There is a function getHours for date. I need input date, e.g. 23, than if < 40, than "low"; if date >=40 && date < 75 than "medium" else "high". Your condition statement is enough, but i would like to have own input date. Thank you in advance.
How the hell do I get my visual code studio to import React and react-dom and then reference it in my html? Please explain it like i'm 5, because I cannot get the first few lines to work.
regarding caveats and semicolons, i found in 2 years of practice that i need them at ends of lines only before IIFEs