Start building your first react component creating the player single view. For this exercise, use Material-UI's components and Materialize's stylesheets to build the view. Some of the Material-UI components used are the cards, avatar, and chips to build the player picture, stats, and more.
- [Instructor] So in the last video we actually…imported the Card Component into our player,…and now we're going to add some chips to it…and some styles that will make it look a lot better.…So the very first thing you'll want to do…is import the other components that we're going to use.…So we'll start with RaisedButton, which is a button…that we're going to use at the bottom of our component.…Again, let me do something real quick…that will prevent a lot of typing,…cause I know I'm going to use that a lot…in the importing, and import RaisedButton.…
So basically I just copied the material-ui…because I know I'm going to import…a lot more stuff from it.…So we're importing also the Avatar from material-ui, Avatar.…And we're going to import the Chip from, again, material-ui,…and then Chip Component.…And finally, we're going to import some colors.…So material-ui comes with a few colors…and basically do all the work, the styles, for you…for those specific colors, and apply those styles…to whatever component you import them to.…
- 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
Q: This course was updated on 05/01/2018. What changed?
A: We updated 13 videos to reflect the changes in the latest versions of Meteor (v1.6) and Node.js (v8).
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.