If you start going through programming tutorials, you’ll likely notice a few recurring themes: Star Wars, Avengers, Lord of the Rings, rinse, repeat.
To be clear: I don’t think that’s a bad thing! I think learning a complicated idea when it’s wrapped up in something a student loves makes said learning a whole lot easier. That's why I do it myself. I styled my to-do list learning exercise in honor of Dolly Parton, one of my inspirations. After that I turned an Instagram Clone into Dollygram, and even changed employee names in another project's dataset to the characters from 9 to 5.
With that in mind, I tried something different to recap the past few weeks. I wrote a beginner React tutorial that teaches a student how to build a to-do list, and encourages them to pick someone who inspires them to theme it. It should only take a few extra minutes to brainstorm a theme first, but planning that unique piece of individuality can help make a student (read: it helps make me) more invested. As Dolly says, "You gotta keep trying to find your niche and trying to fit into whatever slot that's left for you or to make one of your own."
Read on for the full tutorial! In the meantime, I’ll be reviewing more React basics including tooling and composition patterns, and learning Redux.
Before getting started with your to-do list, you need to first pick an inspiration for your theme, and then get to know these four vocab words: React, Components, state, and props.
React is a user interface library that Facebook built to solve their particular problem of dealing with a lot of data all at once.
For example, head over to your inspiration’s Facebook page. I’m looking at Dolly’s. What happens when you like a post? What about when you click on the number of comments on that post? Like a comment? Add a comment yourself?
These actions are called “user interactions.” Each time one happens, the information on the "user interface" (UI), your screen, changes: the comments unfold; the number of likes increases; the number of comments increases.
React makes that magic possible through the use of Components, parts that can be reused throughout the page. After we write the recipe for a Component like a container for a Facebook post, we can call the Component multiple times to show multiple posts with different data on a page. Think of it like an architect's blueprint. Once an architect writes a blueprint floorplan for a 2-bedroom apartment, she can repeat the blueprint and insert the floorplan throughout a building any number of times. The future residents (data) will still make each bedroom unique.
In a React app, Components live in their own “/components” folder. In our project, we will import them into a main App.js file, which is where we’ll be storing all of our app’s data, also known as its state.
There will be times when we need to pass that data, the state, down from the top of the App to our different Components. We’ll do that through props. If our App is a storehouse, then the State is the different packages in the storehouse, and props are the delivery trucks that carry the packages to wherever they need to go.
Once you have this vocab down, you’re ready to head over to CodeSandbox, fork this starter project, and follow along.
Glance over the file structure. Notice our index.js and App.js files at the root of the project. Click into index.js and you’ll see all it’s doing is returning
That’s neat. But, we don’t want
Now that we’ve got our file structure down, let’s map out the four things we need to accomplish to get our list working: 1) Display the list of tasks, 2) Add new items to the list, 3) Cross-off completed tasks, 4) Clear out what we’ve finished.
Start in App.js. The code
class App extends React.Component kicks our Component off. We set it up as a class because we want
In order to get our tasks stored in state to display, we’ll need to pass it down to our ToDoList component in the form of a prop. To do that, we first have to import ToDoList at the top of our file:
And then make sure App returns
Right now that’s not actually doing anything because ToDoList.js is empty. Derp. Let’s go build out
<ToDoList />, making sure the file starts just like App.js by importing React
import React from “react.js”.
Since we know that
<App /> holds our state, we can set up
<ToDoList /> as a simpler functional component. But still not too simple: we don’t want to display our
props.todos passed down from state in their raw form here, but instead would rather pass each unique task down to a unique
<ToDo /> component for easier management and styling. We can do that by using the array method .map over
Just like we imported ToDoList in App.js, we’ll now need to import ToDo at the top of ToDoList.js. And, once you’ve done that, we’ll have to create
<ToDo /> in ToDo.js.
We’ll import React at the top and setup
<ToDo/> as another functional component. Let’s think about all the props we just passed down. Each toDo made from
todos.map has a task, an id, and a completed value. Since we only need the task to display in our list, we can specifically call that out by adding
.task to our prop.
With your first placeholder task(s) displaying on the screen, we’re good to learn how to add new ones.
The easiest way to add to our endless list of things to do is through a form Component, which we already built a placeholder for over in ToDoForm.js. Let’s set it up similarly to how we’ve built the others. After importing React, set up a functional component that returns a