My first React JS work

Geoffrey D Brophy — Mon, 30 Oct 2023 15:33:07 +0000

This the first project that created by following allow with the instructor:

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

import { useEffect, useState } from "react"


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

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

  }

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

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

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

DEV Community: Geoffrey D Brophy

My first React JS work