ReactJS Component Foundation

When we create a website with ReactJS, we need to think about how we will construct our components. Not HTML blocks, not DOM elements, but components. Ideally, each component will be a separate entity, which either creates a state or consumes props, or sometimes both. The component is the smallest part of our app, just like atoms are the smallest parts of our world.

Components: A building block of ReactJS

Okay, we realize atoms can be further divided into neutrons, protons, and electrons. And ReactJS components can be divided into parts that handle the logic and the actual rendering. However, both atoms and ReactJS components are the basic building blocks in their respective realms.

Now that we have our components imagined, we need to know how they should interact with each other.

ReactJS components should be composed and not stacked in a strict hierarchy. This basically means that any child component should be created so that it can be reused by other parent components throughout the app. This promotes the high reusability of atomic components and reduces the amount of code needed to create an application.

JavaScript objects: State and props

Now that we have the ...