Components Architecture — React.js
React is designed around the concept of reusable components. Just like you see in this app layout, how each square and rectangle have different colors, well these are all components. These individual pieces create this whole app.
React had this idea that small components that we put them together to form bigger components. For example, a profile picture component, search component, and navigation bar component and within that, we’ve components containing components. Each component is surrounded by another bigger component, just like lego blocks. All these components whether large or small can be used in different places.
Components are JavaScript functions that receive inputs or attributes, known as props and returns in a way that looks like HTML but inside of JavaScript. These components can be built as a function component or as a class component.
‘State’, we can think of it as a javascript object that describes our app; all the data of the app is within the state.
This is an example of a functional component, here we’re simply creating a component with a function that returns the UI, that we want to show up on the page.
Unlike functional components, class-based components allow us to implement state and lifecycle methods. It starts with the class keyword and extends React.Component. Essentially it is still using a prototype system in javascript and it is setting up a prototype with React.Component. Every class-based component needs a render method and that will return the UI.
The key here is that based on the state, and the components that we built, we have an entire component that we can add to our page and reuse wherever we needed to. The idea of component architecture, we can have some data related to our app and we built these react components out of HTML tags, that signify a component. And each of these components works together to eventually complete the app. This component architecture is really the key to React because it allows us to reuse and share components between projects.
