Think in React by Breaking Your UI into Components
Every UI on the web can be thought of as a tree of "components".
Break down your UI in your mind by separating out "like" components. Those are what you'll turn into React components for displaying your data.
Chris Achard: [0:00] The key UI paradigm in React is components. Everything we're going to break into custom components, and then display that on screen. Here we have a TodoList and we wrap the whole thing in a container. Then we have a SearchBar, which is separate from the TodoList itself. Inside the TodoList there are four TodoItems.
[0:19] Within those components then, we also have the base HTML components. We have text inputs and checkboxes and strings. Those are part of our tree as well.
[0:30] In our sample app so far, we only have a <div> with an <h1> inside of it, but we can build a tree like this, and now we've created a tree of base HTML components which make up our entire React application.