Building Modern User Interfaces with JavaScript Components

Presented By: Matt Yoder and Rebecca Eveland, ACCESS Allocations
Date and Time: Wednesday, September 25, 2024, 10:00 - 12:00 Eastern
Location: Hybrid event: in-person at ACCESS Quarterly Meeting and on Zoom

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. The goal is to build the skills necessary to contribute to ACCESS web interfaces, including the current resource catalog collaboration. Basic familiarity with JavaScript syntax is helpful, but developers with any level of programming experience are welcome.

Agenda

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.