Refactor your code to create the state and then insert your static data into the state. Make sure to refactor your team list to accept the state. Use the React chrome extensions to see the state in action and how the props are being passed from the parent to child component.
- [Instructor] We've now coded a few components…leveraging the great Material UI framework…and its own components.…Now it's time to get serious and talk about state.…If you remember from our video,…state is where we have a snapshot of our app in time.…If you look at the current app,…you're looking in the state of the app…with all its components rendered.…However, we haven't quite set up the state of our app yet.…So let's go ahead and do that.…The first thing we're going to do is just add a few things…on the divisions, because if you look at the app right now,…there's no titles.…
We kind of lost it on the last video.…So we'll add it and we'll also change…the size of this (mumbles).…The very first thing, we're going to go into the Team stats…and change this to an h2.…Make sure you get the closing tag,…and then we're going to add the h1 directly…into the app component.…The reason why we're doing that is because…we're rendering a list.…So if I was to put the h1 or h2 directly into…the Team list component, you would have an h1 and h2…
- Setting up your editor
- Understanding the file structure and player components
- Setting up static data
- Routing with React
- Creating a schema and player form
- Building functions to add a player
- Adding a user login
- Assigning players to the user
- Securing database transactions
- Editing and deleting players
- Using Chart.js to display team stats
Skill Level Intermediate
Learning Meteor Application Developmentwith Isaac Strack1h 52m Intermediate
1. Setting Up
2. React Refresher: Basic Player View
3. Reduce Player Stats
4. Players CRUD and Team View
- 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.