Create a teamlist component using again the listitem material-UI component. Then, insert some data through a function inside of the main app component. Render the list of the players into the team list component.
- [Instructor] In the last video,…we created a function that will return our players,…and in this video, we'll actually…render those players into the team list.…So, let's get started.…The very first thing that we need to do…is to import a few things to make our app…look a little bit better.…So, we'll import first,…the List item from material-ui.…This is basically a component that we'll use…to render list of things,…and it's going to be very useful,…especially in our TeamList component.…
The next thing that we'll need to import is a divider,…and you'll see what it does in a few seconds.…It's basically a divider that material-ui provides…that we can use to divide sections into our app.…There we go, divider.…So, now that we've done this,…we'll do the renderPlayer method.…So basically, that method will render…the players that we have at the top here,…and use the map function to map it into a team list.…
And this is all going to make a little bit more sense…in a few seconds, I'll explain as I type.…So basically, the renderPlayers method,…
- 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 Development (2015)with 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.