State is a critically important topic in React. Ideally, we limit the instances of state in the application and keep it in the parent component whenever possible. Eve puts together an initial state for an App component. The initial state lives in a variable called allSkiDays and is a list. This is passed down to child components.
- [Presenter] So far we've discussed how props can be used…in components to display data.…Next let's focus on…another very important react topic, State.…State represents the possible conditions…of your application.…Maybe you have a state for editing,…and a state for saved,…or a state for logged in and logged out.…In react apps we want to identify…the minimal representation of app state,…and then we want to reduce state to as few components…as possible.…
This way we can avoid overwriting state variables,…which can cause chaos in our applications.…In this app we can reduce our state to one component,…and it's a new one that we're going to create, called app.…So like I mentioned, we're going to create a component…called app, so here in our components folder…we should create a new file called App.js,…and App.js is going to be a create class component,…so we will import create class…from react, and then we're going to create this component.…
So export const App equals create class.…Now we need a render method, of course,…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- 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.