- [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…

Resume Transcript Auto-Scroll

Author

Updated

5/1/2018

Released

12/21/2016

Meteor and React are a powerhouse combination. Meteor gives you a fast, easy-to-use solution for data management across clients and servers, and React gives you a way to structure your app's UI from reusable components. The combination allows you to create your dream apps: dynamic, data driven, and cross-platform. This project-based course walks you step-by-step through the development of a complete React/Meteor app for managing the players and performance of an international soccer team. Follow along with Emmanuel Henri as he shows how to set up your development environment for the first time, develop a player view in React, use Meteor's back-end capabilities to code player and team logic, build charts to track player stats, and add user registration. Plus, learn how to keep your code secure with server methods and use CSS to style the final application.

Topics include:

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

4h

Duration

86,014

Views

Show MoreShow Less

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).