Join Carl Peaslee for an in-depth discussion in this video Importing styled components, part of React: ES6, ES2016, and Beyond.
- [Instructor] Let's practice importing and exporting now…by bringing in some assets that I created elsewhere…so that we can style our project.…Now in our terminal, we're going to add…styled components as a dependency.…Now, remember, if you don't have Yarn,…or if you're using a Windows computer…that doesn't support Yarn,…you would say npm, install, styled components,…dash, dash, save.…But since I'm using Yarn, I say Yarn add styled-components.…Now that that's been added to our dependencies,…I'm going to go into the final project in our exercise files…and I'm going to go into the source,…and I'm going to grab this file called style.js,…I'm going to copy it,…and I'm going to go into the project that I created…into our source files,…and I'm going to paste it there.…
So we're going to add that to our project.…And we can open it up inside our project,…and you see we have a number…of what's called a style component,…and these are essentially react components…that make use of this library.…It applies the CSS that you write here…
- Using const and let
- Importing and exporting modules
- Arrow functions
- Destructing assignments
- Arguments and template literals
- Extended parameter handling with the spread operator
- Generating custom styles
- Classes, getters and setters
Skill Level Intermediate
1. Variables and Declarations
2. Arguments and Template Literals
4. Promises and Async
- 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.