React 入門
TypeScript コメント掲示板アプリの開発
プロジェクトの作成
ここでは React プロジェクトを作成するところから始めます.プロジェクト名は react-comment-app
とします.次の通り npx
コマンドを使いプロジェクトを作成します.このとき,JavaScript ではなく TypeScript を利用するために --template typescript
オプションを指定します.なお,多くのファイルがダウンロードされるのでインストールには数分かかる可能性があります.
% npx create-react-app react-ts-comment-app --template typescript ⏎ Creating a new React app in /Users/rinsaka/Documents/work/react/react-ts-comment-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... ...(中略)... We suggest that you begin by typing: cd react-ts-comment-app npm start Happy hacking!
プロジェクトの作成が完了すれば「Happy hacking!」と表示されます.その直前に次に必要なコマンドが記されているので,そのとおり実行します.
% cd react-ts-comment-app ⏎ % npm start ⏎
Google Chrome が起動して,次の画面がされるはずです.
もしも自動的にブラウザが起動しなかったり,他のブラウザが起動した場合は,Google Chrome のアドレスバーに http://localhost:3000/
(あるいは npm start
コマンドのあとに表示されたアドレス)を入力してください.
プロジェクトのフォルダから次のコマンドを実行すると,フォルダを開いた状態で Visual Studio Code を起動することができます.
% code . ⏎
また,Git のインストールと初期設定が終わっている状態で React のアプリケーションを生成すると,生成が完了した段階で最初のコミットが自動的に作成されています.以降ではキリの良いところでコミットを重ねていくとよいでしょう.