Learn how to separate components into one file each for maintainability, readability, and isolation of responsibilities. Learn about importing and exporting for dependency management.
- [Teacher] You might have noticed…that our index.js file is getting big.…It simply has too much.…It defines the Header component.…It defines the App component,…and it renders the app component to the dom.…These are actually three separate things…that needs to go into three separate files.…It's a good practice to define…a component per file.…So I'm going to extract this Header component.…I'll just cut it from here,…and I'm going to introduce a new folder under source.…Let's call this folder Components.…
And inside Components,…we're going to have a file per component.…So let's have a header.js.…I usually match the name of the…component to the name of the file.…And in here, I'm going to paste the header.js code.…So this header.js is going to be it's own module.…For other modules to use the header module,…we need to export it.…So we do export default Header.…Now since we're using React here…and also we're actually using React here,…remember, React.createelement,…we need to import React.…
So let's import React from react.…
- Configuring webpack and Babel
- Working with native Node modules
- Creating an Express server
- Working with React components and JSX
- Loading and working with test mock data
- Fetching data from a remote API
- Working with data in MongoDB
- Isomorphic rendering on the server
- Front-end routing and back-end routing
Skill Level Advanced
Building a Website with Node.js and Express.jswith Ray Villalobos3h 16m Intermediate
MEAN Stack and MongoDB: Development Techniqueswith Alexander Zanfir1h 48m Intermediate
1. Getting Started
2. Node as a Web Server
3. React Basics
4. Working with Data
5. Rendering on the Server
Fix the checksum problem6m 11s
6. Routing on Client and Server
7. Working with MongoDB
- 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.