Learn about dynamic event handlers and how we need class syntax for any component that needs them. Use a handler to make a contest preview row clickable.
- [Instructor] The next thing we want to do…is click on every contest to navigate to that contest…and start giving the users more features on that contest.…So let's start by implementing a simple click function here…and console logging the contest that we just clicked.…So let me take a look at what we have.…The app component here renders header,…and then it loops over the contests…to render a contest preview.…I think we should actually refactor this code into it's…own component before modifying the contest preview.…So I'm going to take this part and then under components,…we're going to create a new file, call this file ContestList…and this ContestList can actually…be a stateless function component.…
So call it ContestList. And this would simply…just return the same mark up that we have…in the F component, we don't need this extra div.…And it will receive as probed,…the list of contests, call them contests.…And it will render them directly here,…we don't have a state. We need to import React,…and we need to export default ContestList.…
- 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.