[A-00209] React入門

reactの入門記事です。とりあえず自分の知りたいことから書いていきます。

またコーディングはtypescriptを使用します。

・Reactプロジェクトを作成する

下記のコマンドでreactプロジェクトを簡単に作れます。

npx create-react-app frontend --template typescript

実行したら下記のようなディレクトリが作成されます。

applicationを実行するにはディレクトリ直下にて下記のコマンドを実行します。

npm start

・useStateを使ってみる

react触っていると頻繁に出現するuseState関数の使い方をカウンタープログラム使って確認します。

import { useState } from "react";

export default function Counter() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }

    return (
        <button onClick={handleClick}>
            You pressed me {count} times
        </button>
    );
}

import React from "react";
import ReactDOM from "react-dom";
import Counter from "./components/Counter"

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
)

上記を実行すると下記のようにカウンタが表示されます。