A webpack can be used to load CSS and SCSS as well. SCSS does not run natively in the browser, so we can use webpack to transpile it. You can also add CSS to the webpack bundle by importing it. Loading SCSS and CSS requires several npm packages including style-loader, css-loader, autoprefixer-loader, sass-loader, and node-sass.
- [Instructor] Another thing that you can do with Webpack…is you can bundle your CSS so that you don't have to…make additional HTTP requests.…Let me show you how that's done.…First, from our lib file we're going to remove…our inline styles and instead use the class names.…So for hello, we'll get rid of style,…we'll replace className header with className style.…And then for className for goodbye…we'll use className goodbye.…
Excellent.…Okay, so inside of our source folder,…we're going to go ahead and create a new folder…called stylesheets,…and stylesheets is going to contain…a couple different style files.…The first of these is going to be called hello.css.…Now this'll just be a simple class selector,…and we're going to set our background color to indigo,…and then we'll use color turquoise.…
Excellent.…Now, inside of the stylesheets folder…I'm going to create another file.…This file is going to be called goodbye.scss.…So not only are we going to load our styles…using import statements, but we're going to be able to…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- 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.