Lesson 1 - Demo: Build a Simple React App - Fast

Sign in to CodeSandbox

CodeSandbox: Online Code Editor and IDE for Rapid Web Developmentcodesandbox

Demo on codesandbox.io cloud web

API endpoint: https://dog.ceo/api/breeds/image/random

Step 1. Sign in to CodeSandbox

Step 2. In Dashboard, click +Create button

• Chose React(TS) template

• Configure your project and use default setting

• Click "Create Sandbox" button

Step 3. You are now in React Project editor mode. You can find all files for React in left panel.:

// App.jsx

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [image, setImage] = useState("");
  async function getRandomDog() {
    const data = await fetch("https://dog.ceo/api/breeds/image/random");
    const res = await data.json();
    console.log("Result : ", res.message);
    setImage(res.message);
  }
  return (
    <div className="App">
      <h1>Hello Puppy</h1>
      <h3> Fetch puppy from remote site(API)! </h3>
      <button onClick={getRandomDog}> Get me a puppy </button>
      <div>
        <img src={image} alt="" />
      </div>
    </div>
  );
}

// index.jsx

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

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

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

// styles.css
.App {
  font-family: sans-serif;
  text-align: center;
}
button {
  background-color: bisque;
  color: brown;
  margin-bottom: 3px;
}
img {
  width: 70%;
}