Code an amazing radar chart that shows our team stats and shows the team's totals for defense, offense, and overall score. Leverage chartJS and a React version of the library called React-chartjs-2 to build this quicker than manually code the component. Code a quick algorithm to calculate the totals for the team and return it into a percentage of the potential the team could attain if they had perfect scores on the ratings we gave them.
- In this video we'll continue working on our component…to make it look more like our team stats.…The very first thing that we're going to do…is move the data object inside of our component.…The reason why we're doing that is when we pass…the props from app to the team stats,…it's going to be inside of our component.…So the data charts is not going to be able to get that data.…So in order to have access to the data,…we need to move that inside of our component…and inside of our render method like so.…
The next thing we're going to do is pass…the props of players and if you go back…to your browser, open up your console,…and make sure you open up to your react extension…if not done already, click all the way down to your app…and you'll see that right now we have a props…of players that includes an array of all the players.…So we need to pass that to the team stats.…In the app we're going to basically pass…the attribute of this props dot players.…
As simple as that. Save it.…Make sure nothing is wrong. Same here, so we're good.…
- 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.