Learn about stateful components with the class syntax and the state class property and what happens when the state changes in a React component.
- [Teacher] The components we've been…using so far are all stateless presentational components.…We used the fuctions index to create these components.…We call them stateless because…we can't use the React state with these components.…So if the component doesn't need state,…this syntax is the way to go.…Just a simple function.…But let's assume that this component…is going to need some state.…In fact, let's put it in practical terms.…Let's say that this header is going…to be the main header when I go…to the main page, but then when…I go to any naming contests,…we're going to change this header to…be the title of the contest.…
Which means this header message is going…to be dynamic, based on where in…the app we are right now.…So this is an example of something…that should be on the state of the component.…So let's put the header message…on the state of the app component.…Of course right now the app component…is a stateless function component.…So we need to convert it first…into a class-based component.…Sometimes you'll see examples React code…
- 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.