Learn about working with JSON data with webpack, loading into the application, and passing it to the main component.
- [Narrator] Let's make our React application…work with some actual data now.…I've prepared some test data for us to work with right here.…You can find it under src, testData.json…from the Github repo.…I've tagged this point in the course as v4.1-begin.…And this comment is going to give you…the test data to work with.…And this test data is simple.…It has an array of contests.…And every contest is an object…that has id, categoryName and a contestName.…And we're going to create a React application…to properly display this information in the DOM.…
At first let's load the data…directly in our React application.…Since this is json data we need a way…for webpack to understand it,…and for that we need to install json-loader,…which is a loader for webpack to understand json files.…And to configure webpack with the json loader…we add another loader entry here,…just like the one that we have for js.…This one ends in json and use the json loader…on this type of file.…
And let's go ahead and restart webpack for this effect.…
- 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?
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.