In this video, Eve shows the Activity Counter, the application that will be used to count days. She uses ski days as her data point, but you can use any activity that you'd like to. The important thing to note about the activity counter is that we'll use it throughout the course, introducing key concepts in React like props, state, and the component lifecycle.
- [Instructor] Now that we have our environment set up,…using tools like NPM, Babel, and Webpack,…we're going to plan our project.…Throughout the rest of these videos…we're going to be building a browser app…called The Activity Counter.…The Activity Counter is going to tally up…the number of times that you've done an activity.…For my examples,…I'll be creating a ski-day counter.…I'll count the number of days that I ski in a year.…But you can decide for yourself…which activities you want to count.…Maybe the number of concerts you go to…or the number of cities you visit…or the number of days you go running,…whatever it is.…
The only requirement is that you need…the following categories.…You'll need a location,…a date,…and then two optional boolean fields.…So for mine I'm going to have resort,…date,…whether it's a powder day or a back country day…where we're skiing outside of the ski resort boundary.…So, this is what my data would look like here.…But you can, let's say, choose concerts…and you'd have location, date,…whether it's a heat wave…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.