Learn about the standard server-render interface with both markup and initial data to be used by the front-end application in the browser.
- [Teacher] Let's now create server-side…routing capabilities for our contest.…So when I refresh this page, I want the server to…render the content for a single contest as well.…Now right now, we don't have this route 'cause…in our express, we're only handling the / case.…We're not handling the /contest case.…In express, we can pass multiple routes, so we'll want to…handle the / and we also want to handle the case where we do…/contest, /, a dynamic value here, and call it contestId.…So this way, our application is going to handle both of them,…and in fact, if we refresh right now,…it will just render the list of contests.…
So the route is being handled, but we need…to have a logic on the server that says,…if I'm requesting a /contest/1, then you…should render a different application state.…So with this rendering here, I have request.params.contestId…and let me actually just console.log this.…So this way, when I refresh this page,…in the console.log, we'll see the contestId,…but when I refresh the main page,…
- 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.