Chapters (48)
- 0:00Course Introduction & Philosophy
- 5:22What we'll be building
- 6:24Why React?
- 9:25ReactDOM & JSX
- 16:19ReactDOM & JSX Practice
- 20:34Functional Components
- 24:32Functional Components Practice
- 29:41Move Components into Separate Files
- 35:07Parent/Child Components
- 43:14Parent/Child Component Practice
- 48:12Todo App - Phase 1
- 50:50Styling React with CSS Classes
- 55:56Some Caveats
- 58:12JSX to JavaScript and Back
- 1:02:11Inline Styles with the Style Property
- 1:09:21Todo App - Phase 2
- 1:12:42Props Part 1 - Understanding the Concept
- 1:14:56Props Part 2 - Reusable Components
- 1:17:29Props in React
- 1:29:39Props and Styling Practice
- 1:40:25Mapping Components
- 1:48:27Mapping Components Practice
- 1:53:44Todo App - Phase 3
- 1:58:16Class-based Components
- 2:03:32Class-based Components Practice
- 2:07:11State
- 2:12:08State Practice
- 2:15:45State Practice 2
- 2:19:59Todo App - Phase 4
- 2:22:05Handling Events in React
- 2:25:52Todo App - Phase 5
- 2:27:11Changing State
- 2:39:29Todo App - Phase 6
- 2:47:14Lifecycle Methods Part 1
- 2:56:45Lifecycle Methods Part 2
- 3:00:07Conditional Rendering
- 3:11:26Conditional Rendering Part 2
- 3:14:21Conditional rendering Practice
- 3:23:00Todo App - Phase 7
- 3:25:34Fetching data from an API
- 3:36:34Forms Part 1
- 3:48:55Forms Part 2
- 4:00:11Forms Practice
- 4:24:29Container/Component Architecture
- 4:35:53Meme Generator Capstone Project
- 4:56:11Writing Modern React Apps
- 5:02:17Project Ideas for Practicing
- 5:03:06Conclusion
Show the creator's full description
🎉 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.
❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba)
⭐️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
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.