※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【TypeScript】CreateReactAppでアプリケーションを作成

react web開発 javascript create-react-app TypeScript

投稿日：2020年11月15日

create react appはreactのフロントwebフレームワークです。このフレームワークを利用すると簡単にReactのアプリケーションを作成できます。

はじめに

Create React AppはReactのWebフレームワークです。

これを使うと簡単にReactアプリケーションの環境の作成・ビルドを行うことができます。

デフォルトではReactはJavaScriptで記述する仕組みになっていますが、TypeScriptを利用すると、より強力な開発を行うことができます。

この記事ではTypeScriptでCreate React AppでWebアプリケーションを作成する方法について解説しています。

この記事では以下の環境を前提にしています。

create-react-appのインストールをします。

古いバージョンが入っているかも知れないので、念の為グローバルのcreate-react-appをアンインストールしてからインストールします。

今回はmy-appというプロジェクトを作成します。

ターミナル

$ npm uninstall -g create-react-app
removed 91 packages in 0.774s
$ npx create-react-app my_app --template typescript

次の様な構成のmy-appという名前のプロジェクトが作成されます。

作成されたプロジェクト

.
├── README.md
├── node_modules
├── package.json
├── public
├── src
├── tsconfig.json
├── yarn-error.log
└── yarn.lock

create-react-appではいちいちアプリケーションをビルドしなくても、変更が常に反映される便利な開発用サーバーが付属しています。

この開発用サーバーはデバッグのための詳しいエラー情報などが表示されるため、公開するサーバーとしては利用しないでください。

では開発用サーバーを起動させてみましょう。

ターミナル

$ cd my-app
$ npm start

開発用サーバーを起動させた状態でhttp://localhost:3000を開くとReactのサンプルページが開かれます。

▲Reactのサンプルページ

記事へのコメント