Learn about describing data with React components, working with an array of elements, and mapping it into components, the spread operator.
- [Instructor] We now have access to the…test data in our app component.…In face, we can render the app component,…let me remove the console log here,…I don't need that anymore.…Refresh the app component, take a look…at the React Devtools, and when we are hovering…over the app component, we'll see that we are receiving…the contests array as a prop on the app component.…So now in the app component we're going to go ahead…and display the contest information.…Let's start with one contest.…
Let's create a new component to represent a single contest.…Let's call this component contest preview.…I'm naming this preview because this is going to be…the preview on the homepage and we're going to have another…component to represent the full contest.…This contest preview can be a stateless function component.…We're going to call it contest preview,…and we want to export default contest preview.…And also don't forget to import react.…This contest preview is going to receive a contest object.…
And we'll put the information for…
- 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.