React introduces the concept of components. All UI is made up of components.
A component in React is a JavaScript function (in the case of class components, they are just syntactic sugar around a JavaScript function?).
Components are the re-usable building blocks of the user interfaces, such as a button, a card, a progress bar, a modal, etc.
Components allow us to accomplish two main objectives:
- re-utilise code: DRY
- apply separation of concerns: don't do too many things in one place (function)
React combines HTML, CSS (in a lesser extent) and JavaScript to create a component.
In the end, components are just custom HTML elements.
How can we decide what part of our app is going to be a component?
A good practice is to create a component per file in our project, and locate all of them inside a components folder, and subfolders as necessary. What we are going to do is to build a component tree.
A good practice is to name your component file with the same name as the component it contains, starting with capital letter and all (the extension of the file is .js).