In today's assignment we're going to practice using state in React by building a clock, by following the official React tutorial.
In the "code" folder in this assignment you'll find a copy of the Technigo React starter project which you can use as a base to complete this assignment. In the terminal, "cd" into that folder and install dependencies by running npm install
. Once that's done, you can start the project by running npm start
.
We'll be starting the tutorial from the "Adding Local State to a Class" section - https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
The starter code in the /code/src/index.js in this assignment is built to reflect the project at that point in the tutorial, so you should be able to follow from there! It's a little more minimal than the usual setup we use, with multiple components.
Learning how to think as a web developer is learning how to be an expert in problem solving. So whenever you get stuck start with step 1 and continue until problem solved.
- Google! In English, type in the error message if there is one, search within the language you're using (ie CSS, JavaScript etc).
- Ask your code buddies in your team.
- Ask your fellow students in Slack.
- Ask the teacher. Please note: we are part of a sharing community - share the answer with your fellows.
After completing this assignment you should understand more about state in React.
Done with the main task? Here's some ideas for things to continue with:
- Make a button which, when pressed, pauses the clock.
- Make another button which makes the clock run again.
- Use CSS to make the clock look fancy.
- Use CSS to make the page look different based on the time of day.