Storing data in the
state of your components is great for small apps, and portions of an app which are isolated from the rest of the app.
The best way to build components is generally to group them in two categories: containers and components.
Container components are application-logic-specific components. They're usually just called "containers". You may also hear "smart" components, or occasionally, View-Controllers.
Containers are aware of the data and logic unique to your application. Containers pass data and callbacks as props to presentational components, and handle updating the data when a user interacts with the app.
Most components should not contain any business-logic. These presentational components could easily be used in a different app, since they are completely generic, and their only input is their
props. Presentational components are often simply called "components".
Let's take a look at a To-Do List app.
This app has 1 container,
App, and 3 components:
Title. Generally, each container and component should live in a separate file, and should be the
default export of that file. We give the file the same name as the component, e.g. a component called
Input should live in
render the root component into the DOM. The index commonly contains or
requires setup code for the project.
App is a "smart" container component, containing the To-Do list data and logic for adding/removing items.
App renders the
Title components, passing To-Do list data and callbacks for modifying the list.
This component renders a list of strings. It fires an
onClickItem callback when an item is pressed.
This component renders an input field. It maintains the current input in its state, and then fires a callback,
onSubmitEditing when the user presses Enter.
A simple title component. Purely presentational.