donald-stolz / h2s-react

Hack High School intro project to basic frontend and React

H2S Frontend with React

Table of Contents

• Project Setup
• Templating
• Components
• State
• Props
• Data & Lifecycle Methods
• Forms
• Events
• Keys
• Routing

Project Setup

Welcome to the world of client-side development. This is where we will setup our first project and run our first demo app.

Templating

Templating in React is very similar to writing regular HTML. If we want to return multiple elements everything must be nested/wrapped in a single element.

Components

Web components allow for modularity and code reuseability.

State

State is how we keep track of data. We should simplfy our state as much as possible and try to minimize the number of stateful components. We can achieve this by creating containers/pages that manage discrete states.

Props

Props are data passed to child components. They are immutable. Containers should be in charge of state, while their child components should only contain props.

Data & Lifecycle Methods

Here I will go over the relevant lifecycle methods and how to fetch data from an API.

Forms

Here we will begin to actually create the final todo app. We will start with creating an input component.

Events

Here we will create an onClick method for handling form submission. Create a button component.

Keys

Now we will create our Todo item component and use Array.map to fill our Todo list.

Routing

We will create a mock Homepage and small header component.