This lesson explores React's component-based approach to constructing web applications. Unlike traditional methods where HTML, CSS, and JavaScript reside in separate files, React integrates these technologies within components.
Students will learn to create components, nest them inside one another, and pass data from parent components to its children components using props.
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Setup | 3 min | link | Setting up the development environment. |
| Concepts | 4 min | link | Describe modularizing components. |
| Structuring Components in React | 4 min | link | Identifying component structure in a web page. |
| Building and Using Components | 9 min | link | Implement multiple components in multiple files. |
| Passing Data with Props | 8 min | link | Use props to pass data to react components. |
| Reusing Components | 4 min | link | Reuse React components by making them accept generic data. |
| Mapping Components with Data | 7 min | link | Use props to pass more complex data to react components using the .map() method. |
| Destructuring Props | 3 min | link | Destructure props passed to components. |
| Spreading to Props | 3 min | link | Using spread syntax to pass props. |
| Nested Components | 8 min | link | Creating more granular components and passing props from parents to grandchildren. |
| Total content | 53 min |
- Intro to React
- Building Your First React App
Find a 👾 bug 👾 or have suggestions? Let us know!