• Monday , 1 June 2020

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

Code Canyon



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

3d Ocean

Related Posts

43 Comments

  1. freeCodeCamp.org
    April 10, 2019 at 16:43

    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/

  2. Viraj Ajgaonkar
    April 10, 2019 at 16:43

    Thank you. Loved it. Perfect way of teaching.

  3. Zerk
    April 10, 2019 at 16:43

    At https://youtu.be/DLX62G4lc44?t=14122 you can do this.setState({ [name]: type === 'checkbox' ? checked : value })

  4. A Grg
    April 10, 2019 at 16:43

    Are these 2 projects good enough to put in my portfolio.
    Guys, please let me know.
    Ty.

  5. shreyes basutkar
    April 10, 2019 at 16:43

    you are god of the teacher

  6. Seth Obey
    April 10, 2019 at 16:43

    So good, I watched it twice.. lol

  7. Jin Kang
    April 10, 2019 at 16:43

    best react tutorial so far

  8. Joe LoMoglio
    April 10, 2019 at 16:43

    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.

  9. Timur Utepov
    April 10, 2019 at 16:43

    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.

  10. Jason
    April 10, 2019 at 16:43

    How did you initialise react dependencies?

  11. dragon story
    April 10, 2019 at 16:43

    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.

  12. Danish Dewani
    April 10, 2019 at 16:43

    There is a duplicate version of the same video – https://www.youtube.com/watch?v=Po1Rs0_mnQw

  13. pit fermi
    April 10, 2019 at 16:43

    legendary tutorial. thanks for this

  14. Saman Nouraei
    April 10, 2019 at 16:43

    hi everybody
    who could tell me whats the name of this code editor who has been used in this tutorial?????

  15. Vinutha T
    April 10, 2019 at 16:43

    Excellent Video tutorial ! Appreciate all your efforts and giving it for free. Thanks

  16. MUKESH NEGI
    April 10, 2019 at 16:43

    please update me on the benefits of react over angular

  17. Ramesh Korat
    April 10, 2019 at 16:43

    where to add or link css styling..not mentioned ..please clarify

  18. Sagar Parikh
    April 10, 2019 at 16:43

    also write links in description

  19. Syed Baji
    April 10, 2019 at 16:43

    Amazing!!!

  20. Gurbeige Kolekter
    April 10, 2019 at 16:43

    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.

  21. Sagar Parikh
    April 10, 2019 at 16:43

    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 "

  22. Afonso Matos
    April 10, 2019 at 16:43

    This is what the world needs! Free top notch 5 hours videos.
    Thank you so much for making the world better.
    Subcribed and liked!

  23. Azam Mohammed
    April 10, 2019 at 16:43

    This is the best meme generator tutorial.

  24. Adithya Reddy
    April 10, 2019 at 16:43

    Thanks for your efforts in making this tutorial, a very good explanation, great exercises.

  25. Willem Beltman
    April 10, 2019 at 16:43

    Idk why, but this reminds me of asp.net webforms.

  26. PocketNachos
    April 10, 2019 at 16:43

    as soon as I saw a meme generator, I was interested LOL

  27. Ad Impressions
    April 10, 2019 at 16:43

    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 ?

  28. Ari R. Yuliawan
    April 10, 2019 at 16:43

    CC please 😭

  29. yeshwanth rahul
    April 10, 2019 at 16:43

    It is funny how that meme text was prefect for almost every meme XD

  30. Roni Mohammed
    April 10, 2019 at 16:43

    Hey I think you have uploaded a great video, but im facing issues. I'm not sure if you are available to help.

  31. Tong Wu
    April 10, 2019 at 16:43

    can someone tell me what keyboard is that? It sounds so awesome!!!

  32. anuj singh
    April 10, 2019 at 16:43

    how to set up environment for react and which editor you are using?

  33. Ritik Jain
    April 10, 2019 at 16:43

    Awesome course!!!Many many thanks to frreecodecamp

  34. Robe bol
    April 10, 2019 at 16:43

    Good intro!

  35. Lincoln Morais
    April 10, 2019 at 16:43

    Can I like this 15 times?

  36. Sagar Parikh
    April 10, 2019 at 16:43

    does it need any installation? I tried but index.html open blanks

  37. Nikhil Bhat
    April 10, 2019 at 16:43

    Thank you so much. It is a great contribution to free knowledge.

  38. Siddagani Shilpa
    April 10, 2019 at 16:43

    This is the best tutorial with clear explanation

  39. traveler. through. life
    April 10, 2019 at 16:43

    I thought only classes are noted with first capital letter and methods/functions not, but only camel case… Why is it different in React?

  40. Amartya Aishwarya
    April 10, 2019 at 16:43

    Can anyone please tell , how to run react project on local machine without scrimba?

  41. Timur Utepov
    April 10, 2019 at 16:43

    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.

  42. Matheus Ciappina
    April 10, 2019 at 16:43

    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.

  43. okram ovic
    April 10, 2019 at 16:43

    regarding caveats and semicolons, i found in 2 years of practice that i need them at ends of lines only before IIFEs

Leave A Comment

You must be logged in to post a comment.