Think in React by Breaking Your UI into Components

Chris Achard
InstructorChris Achard

Share this video with your friends

Send Tweet
Published 3 years ago
Updated a year ago

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.