Learn about ReactDOMServer and how it can be used to render a full React application into a string to be served by the server. Learn about the need to supply initial data for the top-level component. Learn about React's checksum problem.
- [Instructor] To render React components on the server,…we're going to use the ReactDOMServer package.…To be able to use this ReactDOMServer,…we're going to have to import React itself first…and we'll also need to import ReactDOMServer…from react-dom/server.…And we also need our own React application.…So we're going to import App from ./src/components/App .js.…This is the top level of our React application.…
And then in here, we can use ReactDOMServer.renderToString…and give it our own component.…Just like that.…This would read the React code…and renders everything to string.…Let's go back and take a look at our React component.…And you'll remember that our React component…depends on the state to load the data.…So there is no way for me to pass the data in here…to the React component to prerender the component with data.…
That's not going to work.…The code of this component right now…is not very friendly for server render.…And what we need to do…is we want to make this component…able to render the contests using initial data here.…
- 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 Intermediate
Building a Website with Node.js and Express.jswith Ray Villalobos3h 16m Intermediate
MEAN Stack and MongoDB Development Techniqueswith Alexander Zanfir1h 48m Intermediate
Up and Running with ECMAScript 6with Eve Porcello1h 18m Beginner
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?
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.