Think in components and break down a React application in small UI components

Simon Vrachliotis: [0:00] Let's have a look at the final version of the App for a minute and try to think of it in terms of UI components. We could build the entire application inside one single component, the App component, but let's try to break it down a bit.

[0:13] An obvious component is the search bar here on top. You can see it allows users to filter through the list of names available. The list of names itself is another component, and the one we started to build already. If I click on names, they get added to a shortlist. That's another component. Although, it looks similar to the list of names to pick from.

[0:32] We have a footer component, a reset search button, etc. The beauty of React is you can break down an App into components in the way that makes most sense in your particular case.

[0:42] If we go back in our App.js file, we could imagine a structure like so. We would have a Search component first, then maybe a ShortList followed by a NamePicker and a Footer component, something like that. That's pretty nice to be able to organize your UI like this, with descriptive component names and keep the main app components small and readable.

[1:03] Let's build our first component. We'll create a file called name-picker.js inside src/components. Let's import React from 'react'. Then we'll export a function called NamePicker(). In the return statement, we'll copy over what's in App.js, like so.

[1:22] We are using names in here, so we'll need to receive these names as a prop. Let's go in App.js. At the top, we will import this new NamePicker component. Instead of rendering the unordered list here, we'll call the actual NamePicker component. Remember, we need to pass the names array down to it, like so.

[1:45] If I hit Save, the UI looks the same, but now we have relayed the responsibility of rendering this list of names to our NamePicker component.