Learn about creating our first component.
- [Instructor] In this video we're going…to be building our first component, the Nav Drawer.…I'm going to clean up a few things,…close this static.json file.…And I'm also going to clear my console.…Let's start up our application…so that we can see any changes as we make them.…Yarn start.…The first change I'm going to do,…is I'm going to go into my template.js file,…which I already have open,…and I'm going to add this hypothetical Nav Drawer…that I've yet to create.…Now when I think about this component, Nav Drawer,…I don't think that it's going to need access…to any of our data.…
So that means we don't need to make it a container.…It can just be a component.…Let's create a folder called components.…And then I'm going to make a file,…we'll call it NavDrawer.js.…I'm not going to go in there yet.…First I'm going to import it,…here in template on line five.…Import, Nav Drawer from components/NavDrawer.…
You'll see right away that you get a warning…in your console.…It says Nav Drawer is defined but never used.…Once we put it in, it's also going to tell us…
- Installing local dependencies
- Generating a starter project
- Deploying to Heroku
- Planning your development process
- Using styled-components
- Styling for mobile
- Setting up models on Graphcool
- Creating Relay mutations
- Adding Relay to your authentication flow
- Protecting routes with authentication
Skill Level Intermediate
2. Deployment Environments
3. App Functionality
4. Implementing Libraries
5. Creating Components
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.