Component-Driven User Interface

• React is all about Component

  → all user interfaces in the end are made up of components

• every component need one root component for jsx code snippet

  • sample

Why Component

Reusability

• Don’t repeat your self

Separation of Concerns

• Don’t do too many things in one and the same place(function)

⇒ every component has on clear concern, on focus, one specific task it focuses us on.

<aside> 💡 Split big chunks of code into multiple smaller functions

</aside>

How is A Component Built?

• In the end user interfaced are about HTML, CSS, JS

  → all these components are about combining HTML, CSS, JS

  ⇒ Combine HTML, CSS, JSS to build the entire user interface

React and Components

1. React allow to create re-usable and reactive components

   → consisting of HTML and JS (and CSS)

2. React uses Declarative Approach for building component

3. Define the desired target state and let React figure out the actual JS DOM instructions

   ⇒ Build own, custom HTML Elements