hands on react

react-handson.md

The goal

make a page displaying the latest data fetched from https://data.corona.go.jp/converted-json/covid19japan-npatients.json

Summary of steps

1. make a vm at codesandbox.io
2. go https://codesandbox.io
3. create React vm
4. insert import { useState, useEffect } from 'react';
5. add axios to its dependecies
6. insert import axios from 'axios';
7. inert the following block:

const [data, setData] = useState([]);
async function fetchData () {
  const { data } = await axios.get('https://data.corona.go.jp/converted-json/covid19japan-npatients.json');
  setData(data);
};
useEffect(() => { fetchData(); }, []);

7. process data as you like.

Goal.1: html

div, h1, h2, ol, li, ul

Goal.2: (CSS)style修飾

span, class selectors

Goal.3: （Javascript）変数と計算

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

export default function App() {
  let x = 12000;
  let y = Math.round(x * 1.1);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      { x }に消費税10% を足すと{ x * 1.1 }円です。{ y }
    </div>
  );
}

Goal.4: （React）状態を持つコンポーネント

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

export default function App() {
  const [x, setX] = useState(1);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <form class="inline">
        <input value={x} onChange={(e)=> {setX(e.target.value)}} />
      </form>
       に消費税10% を足すと{ x * 1.1 }円です。
    </div>
  );
}

Goal.5: (JSON) 外部データの取り込み

import { useState, useEffect } from 'react';
import "./styles.css";
import axios from 'axios';

export default function App() {
  const [json, setJson] = useState({});
  async function fetchData () {
    const response = await axios.get('https://data.corona.go.jp/converted-json/covid19japan-npatients.json');
    setJson(response.data);
  };
  const lastData = json[json.length - 1];
  useEffect(fetchData)
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>
       { JSON.stringify(lastData) } { lastData.date } { lastData.npatients }
      </div>
    </div>
  );
}

since	rate
1989	5%
1997	7%
2014	8%
2019	10%