神戸学院大学 経営学部 林坂ゼミ

React 入門トップページ

« 戻る 次へ »

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 が起動して,次の画面がされるはずです.

react-2024-01

もしも自動的にブラウザが起動しなかったり,他のブラウザが起動した場合は,Google Chrome のアドレスバーに http://localhost:3000/ (あるいは npm start コマンドのあとに表示されたアドレス)を入力してください.

プロジェクトのフォルダから次のコマンドを実行すると,フォルダを開いた状態で Visual Studio Code を起動することができます.

% code . ⏎

また,Git のインストールと初期設定が終わっている状態で React のアプリケーションを生成すると,生成が完了した段階で最初のコミットが自動的に作成されています.以降ではキリの良いところでコミットを重ねていくとよいでしょう.

目次に戻る