📌 Philosopy of React.js

React is based on the idea of creating user interfaces in a declarative and efficient way. 

Instead of manually updating the DOM (as in pure JavaScript), React uses a more structured approach to building and undating the UI. 

Example: Image you have a LEGO house. Instead of modifying every piece manually every time you want to change somethings, React updates only the necessary blocks automatically. 

🔹 Principles of Design in React.js

1️⃣ Components 🧩

React splits the interface into reusable components. A component is like a piece of a puzzle: it can be a button, a form, or even a product card. 

Example: A "Like" button in a social media app will be a reusable component. 

function LikeButton() {

                                       return <button>👍 Like</button>;

                             }

Every time you need a "Like" button, you just call the component.

<LikeButton />.

2️⃣ Declarative vs. Imperative 📜

In React, instead of telling the browser step by step what to do (imperative approach), you simply describe how you want the UI to look, and React updates it when necessary.

🔹 Example:

Imperative( traditional JavaScript): "Find the button, change the text to 'liked', and update the color".

Declarative (React): If the user clicks,display 'Liked' and update the color. 

3️⃣ Virtual DOM ⚡

React uses a virtual version of the DOM (Document Object Model) to make changes efficienttly. Instead of modifying the webpage directly, it first analyzes the changes and updates only what is necessary.

🔹 Example: Imagine that you have a notebook with a to-do list.

Traditional JavaScript: Rewrite the entire notebook when adding a new task.

React: Only add the new task without changing the rest.

4️⃣ One-Way Data Flow (Unidireccionalidad de Datos) 🔄

In React, information flows in one way: from parent components to children. This makes it easier to understand how the UI updates.

🔹 Example:If a parent component gives data to its child

function Greeting({ name }) { 

  return <h1>Hola, {name}!</h1>; 

} function App() { return <Greeting name="Juan" />; }

Here, the Greeting component takes the name from App, but it cannot change it directly.

5️⃣ States and Effects. 🛠

React manages the state of components with useState, and the secondary effects (such as calling an  API) with useEffect.

🔹 Ejemplo: click counter:

function Counter() { 

          const [count, setCount] = React.useState(0); 

          return ( 

              <div> <p>Has hecho clic {count} veces</p>

                <button onClick={() => setCount(count + 1)}>Clic</button>

               </div> ); 

            }

Every time you click, React updates only the number without affecting the rest of the page.

🎯 Final Summary

✅ React uses reusable componentes.
✅ React is declarative, you describes the UI, and it updates only what is necessary.
✅ Usa a Virtual DOM to optimize changes.
✅ The data flow from parent to child. (One-Way Data Flow).
✅ Manages state and effects with useState and useEffect.