Component-based JavaScript frameworks like React and Preact allow developers to quickly and flexibly build complex, interactive web interfaces that can be deployed anywhere. In this workshop, participants will learn the fundamentals of developing JavaScript user interface components. They will complete a series of hands-on exercises designed to introduce concepts such as the render loop, JSX, and hooks. Basic familiarity with JavaScript syntax is helpful, but developers with any level of programming experience are welcome.
| Segment | Title | Type | Starting Branch | Description |
|---|---|---|---|---|
| 1 | Why components? | Lecture | Describe how components help to simplify the development process. | |
| 2 | Hello (JavaScript component) world! | Exercise | main |
Develop a simple function-based "Hello world!" component. |
| 3 | Props to you, component! | Exercise | 03-props-start |
Add a property to the component, and render it in the output. |
| 4 | JSX: interactive HTML | Exercise | 04-jsx-start |
Use JSX to add HTML markup to the component's output. |
| 5 | All in the family: child components | Exercise | 05-child-start |
Add a second component, and use it to render the first component. |
| 6 | Component lifecycle and hooks | Lecture | Describe the component lifecycle, and explain how hooks can replace lifecycle methods. | |
| 7 | State of the component | Exercise | 07-state-start |
Add persistent state to the component using a hook. |
| 8 | Side effects | Exercise | 08-effects-start |
Add an effect that changes the component state using setInterval. |
| 9 | Event-ful components | Exercise | 09-event-start |
Add a button with a click event handler that changes the component state. |
| 10 | Resources and next steps | Lecture | Share tools and resources for learning more about JavaScript component development. |