※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたら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を利用すると、より強力な開発を行うことができます。

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

環境

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

  • nodejs v12.19.0
  • npm v6.14.8

実践

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のサンプルページ

参考

参考URL

参考書籍

このエントリーをはてなブックマークに追加


関連記事

記事へのコメント
    
検索