Learn React JS – Full Course for Beginners – Tutorial 2019

freeCodeCamp.org

🎉 Watch the updated version of this course: https://youtu.be/x4rFhThSX04

React.js 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