Create the first layout for your views inside of the main App.jsx component. Explore the proper syntax to create your React components and its methods.
- [Narrator] In this video,…we will create our first layout.…And in this layout we'll see the player view,…the list of players, team stats,…and a menu bar.…So let's get started.…Very first thing I want to do…is copy and paste a lot of that boilerplate code…into the other components.…So we'll copy from app…and then go into team list…and then re-factor it just a bit.…We'll remove the last two lines,…change the name of the component to team list,…and then instead of having the material-UI theme,…we'll simply do an H1,…just to identify this one.…
Each one…and then do team list.…So for the next few ones…let's just copy and paste the same thing.…So copy from team lists,…paste into player,…change the name here,…player,…and same thing here.…And if you wanted to save time…you could have just selected that area and that area…and just type on both.…
So let's copy and paste again…into the last one…and then just change to team stats.…And save.…So before we see those three components…showing up on our app,…we need to make sure that we import them here…
- 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.