Learn two solutions to fix the React's checksum problem that happens when the front-end application wipes the initial markup clear. Learn about returning initial data from the server.
- [Instructor] We got the server to render,…however, it's not playing very well…with the front end react application…because the react application is still…initializing the DOM with an empty…list of contests and then going back to the API…to fetch the actual list of contests.…So I'm going to show you two solutions for this problem.…First on the front end we can't actually…initialize this code with an empty array.…We have to initialize this code with the same…data that we did on the server for the back end…and front end to sync together without any problem.…
And we can't also reset the state here because…that would be wasteful.…If we have the data to begin with…then we don't need to reset the state.…So I'm going to actually remove this code in here…and let's go back to the index.js.…Since we need to bring the data before…actually rendering the front end component,…I'll go ahead and make an Axios call here.…Instead of setting the state I'll do…the react-dom render call itself in here.…And the initial contests here are response.data.contests.…
- 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.