In this video, we introduce our React soccer team, and show what makes the React framework such a popular choice amongst developers. We introduce the components, state, props, and cycles through a visual and animated introduction related to our project, a soccer team.
It's built on the principle that your web application is composed of reusable components. So let's start with a component. If we were to use the soccer team as the analogy, every player is a component, every ball, the bench, the field goal, everything is a component. In fact, we could dissect the players into as many pieces as there are parts of the human body. That is how you would break a UI into smaller components.
But we'll keep our analogy simple, so we're not going to dissect our soccer player. Next, comes the state. Whenever an action occurs, say we score a goal, move to second half, or time goes by, the state of the scoreboard changes. In React, whenever there is an event that changes the state, React only rerenders the components that need refreshing and not the entire DOM or web page. Well, guess what? The scoreboard is also a component, which brings us to the next subject.
In React, there are two types of components, stateful or stateless, which are often called smart versus dumb components. To fully comprehend the difference in between the two, let's describe what a stateless, or dumb, component is. If the component doesn't do much on its own and needs a parent component to do something, then it's a stateless component, a component without a state. For example, a field goal is a stateless component. A soccer ball, the pad the coach keeps his notes on, a whistle, the bench, et cetera.
So take the ball, it's just there for the players who are the smarter components to use for their own purpose. Like a button would be used by a stateful component. So stateful, or smart, components, like the players, and the scoreboard, are where the logic and state of our application resides. Last but not least, we have props. Which is the tool that allows us to pass data from state to stateless components. But props can only be used to pass data from the state parent component to the children, and not the other way around, which is where it is important to decide up front which components need to be able to update the state and who is simply rendering the data after a change.
- Setting up your editor
- Understanding the file structure and player components
- Setting up static data
- Routing with React
- Creating a schema and player form
- Building functions to add a player
- Adding a user login
- Assigning players to the user
- Securing database transactions
- Editing and deleting players
- Using Chart.js to display team stats