Getting to know about Components in React

*What Are Components? *
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Components modularize both functionality and presentation in our code. In order to understand how powerful this is, consider just how intricate web applications can become. The difficulty in logically arranging, architecting, and programming these web applications increases with their size. Components are like little packages: they help us keep everything organized and predictable while abstracting the 'boilerplate' (Links to an external site.) code. Components can do many things, but their end goal is always the same: they all must contain a snippet of code that describes what they should render to the DOM.

*How Do I Use Components in My React App? *
It's standard practice to give each of the components their own file. It is not uncommon to see a React program file tree that looks something like this:

With our components separated in their own files, all we have to do is figure out how to access the code defined in one file within a different file. Well, this is easily done in modern JavaScript thanks to the ES module system using the import and export keywords. On a simplified level, the import and export keywords let us define variables in one file and access those variables in other files throughout our project. This becomes increasingly important as we build out larger applications

Since variables in modules are not visible to other modules by default, we must explicitly state which variables should be made available to the rest of our application. Exporting any variable — whether that variable is an object, string, number, function, or React component — allows us to access that exported variable in other files. There are two ways to export code in JavaScript: we can use the default export syntax, or the named export syntax. We can only use export default once per file. This syntax lets us export one variable from a file which we can then import in another file. With named exports, we can export multiple variables from a file,

Conclusion
Components in React are a great way to keep certain information about your code in its own file then rendering it to the parent component. When you get a better understand of Components in React, your code becomes well organized and easier to find information. This results in having fewer errors in your code and if you do experience any error if can become easier for you to locate that error and fix it.