Learn React with me. Pt 2

Working With Components

REACT COMPONENT

1. react apps are made of components.
2. Components are used as building blocks of UI.
3. In Component a piece of UI has its own data, logic and appearance.
4. Using components you can build complex UI by building multiple components and combining them.
5. Component can be reused, nested.

import React from "react";
import ReactDOM from "react-dom/client";

const pizzaData = [
    {
      name: "Pizza Spinaci",
      ingredients: "Tomato, mozarella, spinach, and ricotta cheese",
      price: 12,
      photoName: "pizzas/spinaci.jpg",
      soldOut: false,
    }
  ];


function App() {
    return  (
        <div>
            <h1>Hello React!</h1>
            <Pizza />
            <Pizza />
            <Pizza /> //reusing the pizza component x3
        </div>
    );
}

// PIZZA. in react we write new components using fuctions
function Pizza() {
    return (
        <div>
            <img src="pizzas/spinaci.jpg" alt="Pizza Spinaci"/>
            <h2>Pizza Spinaci</h2>
            <p>Tomato, mozarella, spinach, and ricotta cheese</p>
        </div>
    );
}


const root = ReactDOM.createRoot(document.getElementById
    ("root"));
    root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>);

TIP: Save images on the public folder. WHY? Assets are store in the public folder so that so the module bundler (webpack) can automatically get them.