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




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”

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

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

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

  4. 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 ?

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

Leave a Reply