Components in front-end frameworks
Hello, I'm currently learning React, I often saw the term "component" widely use across the docs. This is not only in React but also in other frameworks, like
Vue (Vue components). I was wondering, what do we mean by "component"? It's just a small piece of what HTML element we are going to create?5 Replies
basically, you create a .jsx, .tsx or .vue file that generates html code, which you then use as if it was an html tag
to those, you can pass attributes and children to be rendered
yep I see, thanks !
I believe it's anything that can be reused
Bigger or smaller and composable, like buttons, forms, modals, etc
it doesn't even need to be composable
imagine a component that shows the user information and a simple menu for settings and logging out
you can put a skeleton of the ui there, and then have the content replaced when the component has the data you need
Even simpler than that, a component is just a collection of ui elements and logic that acts on those elements. (Elements meaning html elements like div as well as other)
It's useful to encapsulate elements and logic that way because you keep everything that a ui element does close together, which is less prone to errors and makes it easier to keep the project structure in your mind. Components are also reusable and changeable. You can create a generic button component and expose a bunch of options to configure text, color, size, functionality and whatever else you want. A component can be as large or small as you want. It can be a single icon, a button, a navbar or an entire page. Whenever you find yourself repeating some code you can create a component that can be reused as often as you want