todo.js

import { useState, useEffect } from "react"

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDo("");
    setToDos(currentArray => [toDo, ...currentArray]) 
    //toDo에 currentArray속 element 갖다 붙히기 
  }
  console.log(toDos)
  return (
    <div className="App">
      <h1>My To Dos({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input 
          onChange={onChange} 
          value={toDo}
          type="text" 
          placeholder="Write your to do" 
        />
        <button>Add to do</button>
      </form>
      <hr/>
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
  
}

export default App;

coin.js

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([])
  useEffect(() => {
    fetch("<https://api.coinpaprika.com/v1/tickers?limit=10>")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      })
  }, [])
  return (
    <div className="App">
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? (<strong>Loading</strong>
      ) : (
        <select>
          {coins.map((coin) => (
            <option key={coin.id}>
              {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
            </option>
          ))}
        </select>
      )}
      
    </div>
  );
}

export default App;

App.js

import { useEffect, useState } from "react";
import Movie from "../components/Movie";
function App() {
    return null;
}
export default App;

Home.js

import { useEffect, useState } from "react";
import Movie from "./components/Movie";

function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async() => {
    const response = await fetch(
      "<https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year>"
    );
    const json = await response.json();
      setMovies(json.data.movies);
      setLoading(false);
  }
  useEffect(() => {
    getMovies();
  }, [])
  
  return (
    <div className="App">
      {loading ? (
        <h1>Loading</h1> 
        ) : (
        <div>
          {movies.map((movie) => (
            <Movie 
              key={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
          />
          ))}
        </div>
      )}
    </div>
  );
}

export default Home;

Movie.js

import React from 'react'
import PropTypes from "prop-types"

export default function Movie({coverImg, title, summary, genres}) {
  return (
    <div>
        <img src={coverImg} alt={title}/>
        <h2>{title}</h2>
        <p>{summary}</p>
        <ul>
            {genres && genres.map((g)=> (<li key={g}>{g}</li>))}
        </ul>
    </div>
  )
}

Movie.propTypes = {
    coverImg : PropTypes.string.isRequired,
    title : PropTypes.string.isRequired,
    summary : PropTypes.string.isRequired,
    genres : PropTypes.arrayOf(PropTypes.string).isRequired
};

Detail.js

function Detail() {
    return <h1>Detail</h1>;
}
export default Detail;