Forem: Banele1999

Learn React with me. Pt 2

Banele1999 — Tue, 13 Feb 2024 09:27:37 +0000

Working With Components

REACT COMPONENT

react apps are made of components.
Components are used as building blocks of UI.
In Component a piece of UI has its own data, logic and appearance.
Using components you can build complex UI by building multiple components and combining them.
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.

Learn React with Me. Pt 1

Banele1999 — Tue, 13 Feb 2024 08:00:30 +0000

Rendering the Root Component and Strict Mode

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

function App() {
    return <h1>Hello React</h1>
}


// Render items in the DOM using react 18
const root = ReactDOM.createRoot(document.getElementById
    ("root"));      //id root is from the index.html
    root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>);   //Wrapping the component with strict mode.

The root element refers to the top-level element that is the parent of all other components in your application. It is typically represented as a DOM node within the public/index.html file that serves as the entry point for your React app.
StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

Learn React with me

Banele1999 — Fri, 05 Jan 2024 22:39:40 +0000

Today I start "The Ultimate React Course 2024: React, Redux & More" by Jonas Schmedtmann on Udemy. I will share a detailed blog post on everything I learned in the course.

import { useEffect, useState } from "react";

export default function App() {
  const [advice, setAdvice] = useState("");
  const [count, setCount] = useState(0);

  useEffect(function () {
    getAdvice();
  }, []);

  async function getAdvice() {
    const res = await fetch("https://api.adviceslip.com/advice");
    const data = await res.json();
    setAdvice(data.slip.advice);
    setCount((a) => a + 1);
  }

  return (
    <div>
      <h1>{advice}</h1>
      <button onClick={getAdvice}>Get Advice</button>
      <Message count={count} />
    </div>
  );
}

function Message(props) {
  <p>
    You have read <strong>{props.count}</strong> pieces of advice
  </p>;
}
_**

#### 


**_

UX is not UI

Banele1999 — Tue, 02 Jan 2024 13:07:39 +0000

UI & UX Design

The two terms are often used together, although they mean different things. However the relationship between the them is so close that it's hard to talk about one without touching the other.

**
**
UI, which stands for User Interface, refers to the process of designing complete interfaces that allow users to interact with your product. This includes buttons, toggles, or icons. UX, which stands for User Experience, it defines the experience a user would go through when interacting with a company, its services, and its products. It includes the design of the UI but also elements such as usability, accessibility, performance, and user satisfaction

The main goal of UI design is to create a visually appealing and easy-to-navigate interface. The main goal of UX design is to design the best possible user experience. This means that the product should be functional, accessible and fun to use.