Learn how to compose bigger components from smaller components for readability, reusability, and maintainability. Learn about React devtools.
- [Instructor] Let's add some more content…to our application.…I'm going to put a div in here, and in that div,…eventually we're going to render our naming contests;…for now, I'm just going to do three dots.…And you'll immediately get a JSX parsing error,…that says these two HTML elements…must be wrapped in an enclosing HTML tag.…And the reason for this, if you remember,…that this is a react.create element call,…and this is another react.create element call.…So we can't actually have them follow each other like this.…Instead, to fix this problem,…we're going to enclose both of them in a top-level div tag.…
So I'm going to put them in here, fix the indentation,…and this should work, let's test that.…So I got the header, and I got the content of the div.…Now this app component has two parts.…It has a header part and it has the content part.…Because we have the React composability,…we can actually take these parts into their own component.…Let's call this component header.…So, not only I'm extracting this header component…
- 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.