# Session Plan

## Forms / Event Handling

### DOM Event Handlers in React

* Setting event handlers directly onto elements (e.g. `onClick` instead of `element.addEventListener("click", …)`)
* Overview of event handlers exposed by React

### Managing Forms

* Adding a form and adding inputs to the form
* Submitting forms with `onSubmit`
* Performing input validation in JavaScript (in addition to HTML input validation, and server-side input validation)

## Hooks

### Introduction to Hooks

* You already know one hook! -> `useState`
* Rules of Hooks (don't wrap in `if` statements, use dependency array)
* Hooks run on every render, unless they have dependencies
* Hooks run when dependencies change

### How to use `useEffect`

* Usage of `useEffect`
* Dependencies of `useEffect`
* Use `useEffect` for synchronization (with external systems)
* Returning a cleanup function from `useEffect`

## Loading Data

### Connecting to APIs

* Calling async APIs using `fetch`, within `useEffect`
* Implementing initial data loading, showing a spinner

## Exercises

### Handling User Input & Events

#### 1. Create a ClickCounter component

1. Create a new component called `ClickCounter`
2. Use the `useState` hook to manage a `count` state variable
3. Implement an `onClick` event handler function that increments the `count`
4. Render a button and display the current value of `count`

#### 2. Build a SimpleForm component

1. Create a new component called `SimpleForm`
2. Use the `useState` hook to manage the state of form inputs
3. Create input fields for the form (e.g., name, email, message)
4. Implement a `handleSubmit` function to handle form submission
5. Render the form inputs and a submit button

#### 3. Develop a TodoList component

1. Create a new component called `TodoList`
2. Use the `useState` hook to manage an array of todo items
3. Implement a function to add a new todo item to the array
4. Implement a function to remove a todo item from the array
5. Render a list of todo items using the `.map` method, ensuring each item has a unique `key` prop
6. Render an input field to add new todos and buttons/functionality to remove todos

### Practice Using `useEffect`

#### 4. Create a Clock component

1. Create a new component called `Clock`
2. Use the `useState` hook to manage the current time
3. Use the `useEffect` hook to set up an `Interval` that updates the time every second
4. Implement the cleanup function in `useEffect` to clear the interval when the component unmounts
5. Let the component render the current time

#### 5. Build a DataFetcher component

1. Create a new component called `DataFetcher`
2. Use the `useState` hook to manage the data, loading, and error states
3. Use the `useEffect` hook to fetch data from a public API when the component mounts
4. Implement loading and error states in the component's JSX
5. Render the fetched data when it's available

#### 6. Develop a WindowResizer component

1. Create a new component called `WindowResizer`
2. Use the `useState` hook to manage the window size
3. Use the `useEffect` hook to set up an event listener for the `resize` event
4. Update the window size state whenever the `resize` event is triggered
5. Implement the cleanup function in `useEffect` to remove the event listener when the component unmounts
6. Render the current window size in the component