Learn React.js - Full Course for Beginners - Tutorial 2019

Published on Dec 18, 2018 652,813 views

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-o...
🔗Virtual DOM video mentioned: https://www.youtube.com/watch?v=BYbgo...

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_cent...

  • freeCodeCamp.org
    freeCodeCamp.org 6 months ago (edited) 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/
  • Vincent Brille
    Vincent Brille 3 weeks ago From Visual Studio Code, open a new terminal from your new project, launch "npx create-react app ." to install react to your new project and then launch "npm start" to start the dev server...
  • Olatunji Azeez
    Olatunji Azeez 1 month ago @Souvik Kundu How did you install it pls?
  • Chris Manuel
    Chris Manuel 1 month ago you should have really add this to your video
  • Richard Arnett
    Richard Arnett 1 month ago (edited) @Elmo index.html goes in public folder
  • Anais Urlichs
    Anais Urlichs 2 months ago @ElmoI did not get how that works in the case of Sublime so I got Visual Studio Code and got it working- thank you tho
  • Elmo
    Elmo 2 months ago @Anais Urlichs I put the index.html in the src folder
  • Anais Urlichs
    Anais Urlichs 2 months ago @Elmo I have the same problem; using sublime, installed react app but not sure how to make the connection
  • Elmo
    Elmo 2 months ago Where do you put the index.html and all the other files after you've ran create-react-app? You really should have put this in the video
  • Souvik Kundu
    Souvik Kundu 6 months ago Thank you 👍
  • Bucur Ion Niculae
    Bucur Ion Niculae 6 months ago This tutorial is better than many of the courses on Udemy... Good bless you.
  • Игорь Тарлинский
    Игорь Тарлинский 2 weeks ago @Stealth Slushie As an owner of couple of Udemy courses I can confirm your words, but exceptions have to be made. The same is truth on youtube, btw. Most of the tutorials is trash, but sometimes you find something valuable. Someone really passionate teacher who is doing that not only because of money, but something more that that.
  • WebSeries & Movies
    WebSeries & Movies 1 month ago @Stealth Slushie ya little bit I agree with you, but there are few courses which you can't find in your local area, so you have to go online and udemy is the best choice for many.
  • WebSeries & Movies
    WebSeries & Movies 1 month ago Totally agree,
  • EPIC Daycard
    EPIC Daycard 1 month ago Yes your right. This tutorial is better than many of the courses on Udemy
  • __Prod1gy__ NS
    __Prod1gy__ NS 2 months ago @sanket kalawade haah you quoting Jackie Chan :)
  • sanket kalawade
    sanket kalawade 2 months ago @__Prod1gy__ NS (friend) : how do you react to fool; (Me): i don't react ,i say "you are right!" ; (friend): that's not a solution. (Me): ok you are right!
  • God Makoto
    God Makoto 2 months ago So is it better than the coutse from maximilian 40 hours of structured course with exercises? Well depends on its a crash course dude.
  • ps4star
    ps4star 2 months ago g o o d b l e s s
  • Kevin Rodriguez
    Kevin Rodriguez 2 months ago I like his use of repetition like in every segment, he types again import 'react' and 'react-dom'
  • Ghotda
    Ghotda 3 months ago @Stealth Slushie That's not the problem i had good grades first year than they started to make things sloppy.. Increased taxes bad lectures, everything got bad i have no problem i know what i have to do in order to start a Junior Web Development it's not an easy way
  • Stealth Slushie
    Stealth Slushie 3 months ago (edited) @Ghotda I'd suggest going to public college if you want to understand computer science deeply and then learn programming yourself in your spare time. Sounds like a lot of work but that's the way it is. First you have to become an expert, then you can become software developer or engineer. There is no easy way around it and private teachings won't work. It's like math. You must be interested in it or you'll fail before you even begin. When I started programming all of a sudden I became interested in math. That's because I was learning algorithms and realized in reality it's just math and you can do such incredible things with it... actually I'm able to write this comment thanks to math, not only math but you get the point... Understand things on a deep level, read documentation, experiment, exercise and voila, you'll get better no matter what.
  • Ghotda
    Ghotda 3 months ago @Stealth Slushie And that's what i call ON POINT NAILED COMMENT! Very well said, went to a private college, first 6 months everything was as said we paid we got the promised service and good lectures. After that, they increased the taxes with 30% ,couldn't explain why (obviously greedy). And here i am searching passionate people on youtube that explain it much better! Sad story people get greedy and forget about their passions...
  • gaurav joshi
    gaurav joshi 4 months ago ♥️
  • kira yamato
    kira yamato 4 months ago @__Prod1gy__ NS point some good ones big boy. A lot of turds out there.
  • OzoneGamerStation
    OzoneGamerStation 4 months ago first Impression Honestly, you come off as a real asshole. Prodigy is just explaining why he thinks Udemy is great for him and you shoot him down by calling him a sucker. Are you angry that for other people, they can learn content from Udemy? Hey, I learned SQL from Udemy, made a couple projects, and can confidently put SQL on my resume. I guess that wasn’t the case for you.
  • first Impression
    first Impression 4 months ago @__Prod1gy__ NS Yes I am...I don't need you to tell me that...
  • __Prod1gy__ NS
    __Prod1gy__ NS 4 months ago @first Impression ok you are right
  • first Impression
    first Impression 4 months ago @__Prod1gy__ NS BTW, I know people like u have a problem understanding it but I will try to explain it anyway: the fact you don't recognize you are a sucker in a situation doesn't mean you are not....Denying something doesn't make that something disappear...
  • first Impression
    first Impression 4 months ago @__Prod1gy__ NS Why when people say "needless to say" or "I have nothing to add" they never stop there? I mean if you don't have anything to add, you should not keep typing...LOL...
  • __Prod1gy__ NS
    __Prod1gy__ NS 4 months ago (edited) @first Impression man,you called yourself a sucker in your comment,i have nothing to add, i dont want to argue,when i start learning i learn a lot on udemy from people like Jonas Schmedtmann about Javascript and that helped me to build a stong base, later i continue learning on more serious platform Frontend masters and so on,anyway there is nothing wrong with udemy its is great for people who starting to code,and with your comments you can discourage others,maybe you just picked wrong course,there are some not very good courses but you can always check comments and ratings to see does it fit you or not,its same as on youtube,some videos are great as this one but many others are not so great,i can reccomend traversy media here on youtube there are many great tutorials there
  • first Impression
    first Impression 4 months ago @__Prod1gy__ NS You are the only one crying here...Why are you so shocked that in a comment section people...are you ready?...make comments !? LOL
  • __Prod1gy__ NS
    __Prod1gy__ NS 4 months ago why so much hate for udemy,maybe this course is better then most udemy courses but still there are some very great and passionate instructors who educated a lot new developers and they deserve more respect and they cost only 10$ for such a great education and you can refund after 30 days, i dont know what more you want,but i can advice you to stop crying and start learning doesnt matter is it udemy,udacity,coursera or something else
  • first Impression
    first Impression 4 months ago Udemy is for suckers...I am saying that as an ex udemy user...Udemy courses might have better production but not better content than free videos in youtube...
  • __Prod1gy__ NS
    __Prod1gy__ NS 4 months ago @kira yamato dont lie,some people would believe you and maybe they will miss some great courses on udemy because of you
  • d v
    d v 5 months ago Udemy sucks. Horrible teachers (a few are good but the rest are just there to add a feather to their resume). FCC is awesome. I have learnt more there than anywhere else
  • Bakos Sándor
    Bakos Sándor 5 months ago absolutely
  • J. Ngonono
    J. Ngonono 5 months ago Oh my Good! So true!
  • kira yamato
    kira yamato 5 months ago A lot of udemy course is just watching a dude code thru a project w little explanations of yhe concept.
  • kobak denanda
    kobak denanda 5 months ago @Stealth Slushie this and a ton of other companies . They take advantage of people who have good faith and want to learn but don't know how much it's worth.
  • Money Maker
    Money Maker 6 months ago @Stealth Slushie On the other hand, even though one could be passionate about determined subject, that passion only goes to a point. I say that because making a good course demands considerable time and, in many cases, money. Making a long course requires equipment and planning, and it's hard to do that completely for free, that's why I wouldn't diminish the paid courses. I agree with you, though. If someone is doing something for free and without any "traps" to sell another course, it's because they're passionate and that means the course as consequence will likely be good.
  • Stealth Slushie
    Stealth Slushie 6 months ago (edited) Well, if someone does something for free then it's probably because they're passionate about that. Udemy is the result of chasing money. The whole udemy's ecosystem is based on fake discounts and the truth is they don't want to work with real teachers, only with salesmen. The fact something is paid gives people "the premium feeling" to it and so it may appear better but only for the foolish.
  • n2fole00
    n2fole00 6 months ago And he gave us a site to practice on https://scrimba.com/g/glearnreact How amazing.
  • Khai Duong
    Khai Duong 6 months ago totally agree!
  • Simran Gupta
    Simran Gupta 1 day ago Very nice work😍😍😍😍😍😍😍Really helped me to get all the basics of reactjs....thanku so much
  • pankaj nisha vanshika palak Kumar
    pankaj nisha vanshika palak Kumar 3 days ago Thank you, I really learn ReactJS from your video. It's explained very nicely
  • Mia B
    Mia B 23 hours ago (edited) This is hands down one of the best tutorials you can watch to learn REACT on you tube. The teacher explains everything as why certain things work the way they do. You wont be left GUESSING! A thousand likes. World needs more teachers like you! UPDATE : do this on scrimba, you can edit the code with the teacher. Soooo good!
  • Adewale Olaoye
    Adewale Olaoye 6 months ago I've been waiting for this 😁😁 Freecodecamp God bless you
  • Stanimir Kanchev
    Stanimir Kanchev 3 months ago I think he's using Atom, not sure on 100%. But if you are using Apple PC it's better to use Atom and if you're running Windows the best choice for me it's VSCode
  • yuva kishore
    yuva kishore 4 months ago any one wants how to setup the reactJs 1. npm install create-react-app -g 2.create-react-app 'your-app-name' 3.cd 'your-app-name' 4.npm start
  • Gabriel Sinca
    Gabriel Sinca 1 week ago @Stanley Paul Tutorial for windoze~~> Step 256. Install Gentoo. Nah, just kidding. it is the same thing. Make sure you have npm installed.
  • Sangramjit Chakraborty
    Sangramjit Chakraborty 3 weeks ago Thanks man. Was looking for this
  • Anoopkumar Sonar
    Anoopkumar Sonar 1 month ago @Parth Sharma you simply had to flex that you go to IIT delhi didn't you? smh
  • Adityesh Mishra
    Adityesh Mishra 1 month ago @Jabs ! no problem sir
  • Jabs !
    Jabs ! 1 month ago @Adityesh Mishra Thanks mate.. :)
  • Adityesh Mishra
    Adityesh Mishra 1 month ago @Jabs ! visual studio code as it has an inbuilt terminal in it
  • Jabs !
    Jabs ! 2 months ago Which IDE is best for REACT?
    PRACHURJYA BASISTHA 2 months ago @Stanley Paul write it on your command prompt and also make sure to have node installed previously
  • Elmo
    Elmo 2 months ago Thank you, why the hell didn't the creator of this video put this in?
  • Parth Sharma
    Parth Sharma 3 months ago thank you so much sir. love from iit delhi
  • Stanley Paul
    Stanley Paul 3 months ago will i write it on a text editor and run it using command prompt ? or am i to run it directly on command prompt? am using windows
  • xXThegabeXx
    xXThegabeXx 3 months ago Jeez why couldnt someone show me that yesterday :D
  • Robo D. Teach
    Robo D. Teach 4 months ago Thank you sir!
  • Arnold P Mavhezha
    Arnold P Mavhezha 6 months ago This is great work, i hope someone will realize how great this tutorial is!!!!! props for you man
  • Dave Omrai
    Dave Omrai 22 hours ago Wow, I can't even say, how much you've helped me with this course, before, I knew nothing about React, now it's not that bad :D Thank you kind sir.
  • limjq44
    limjq44 2 days ago Hi, at 3:05:45, why is it that you can write the setState function this way without using the prevState? Doesn't it count as modifying the state directly? which you discourage us to do it in the earlier part of the tutorial?
  • Tobenna Nwokike
    Tobenna Nwokike 1 month ago Great tutorial. Best I've seen thus far. I would have loved a Github repo with solutions for each of the lessons. I believe that would make referring back to the code a lot easier.
  • Bavani Sankar
    Bavani Sankar 4 days ago Really amazing tutorial. Scrimba is a brilliant idea, sir!
  • Amelie Le coz
    Amelie Le coz 1 month ago this course is just what I needed to start learning React ! Merci !
  • devInsight
    devInsight 1 week ago Awesome course..very helpful for my project Great Work Sir
  • im No one
    im No one 4 months ago This tutorial is really good!! Appreciate your teaching skills 👍
  • Stanichevici Calin
    Stanichevici Calin 2 months ago (edited) This tutorial is so great that 17 minutes and 08 seconds in I decided to go ahead and download the video for offline-use just in case something happens to the world or youtube within the next 4.8 hours
  • hkpnkp
    hkpnkp 2 months ago Lmao haha
  • bharathi billakanti
    bharathi billakanti 2 months ago React video is very nice and very very very help full. I need this type of video for React Routing.
  • Rajasekar M
    Rajasekar M 5 months ago (edited) Good tutorial for react js beginners and super coding standard examples 👍
  • Matheus Sunderhus
    Matheus Sunderhus 4 months ago This tutorial is better than many of the courses on Udemy... Good bless you.
  • Mohamed Radwan
    Mohamed Radwan 2 months ago This tutorial is really great. I've never understand React like that before. Thanks Bob