Create React Appを使ったサービス開発

最近いい加減フロントエンド開発の知識もないとまずいなと思い始めたので、Reactを触ってみることにしました。どうにもCreate React Appというツールを使うと簡単にReactを使ったサービスを作り始めることができるみたいなので、今回はこのツールを使ってみます。

基本的に公式のGetting Startedに従って導入を進めます。なお環境はWindows 10のWSL (Windows Subsystem for Linux)を使用します。つまりはLinuxです。

Create React Appのインストール

まずはCreate React Appを導入します。

$ sudo npm install -g create-react-app

Reactアプリの作成

Reactアプリの雛型を作ります。

$ npx create-react-app my-app

Create React Appを使うとこのコマンドだけで雛型を作れるのは素晴らしいですね。

作成したアプリの実行

ひとまず雛型のままの状態で実行してみます。

$ cd my-app
$ npm start

これでアプリが実行されましたので、http://localhost:3000/ にアクセスするとReactの画面が表示されると思います。これが表示されたら成功です。

本番環境用のファイルを作成

実際にWebサービスとして公開する場合は、公開用のファイルを作成します。

$ npm run build

これでbuildディレクトリの中に公開用ファイルができるので、buildディレクトリの中身をサーバに転送して配置すれば公開完了です。

なお、任意のサブディレクトリでサービスを公開する場合は、package.jsonを少しだけ書き換えてやる必要がありますので、こちらを参考にしてください。

また、作成されたbuild/index.htmlを直接開くとCSSとかJavaScriptを上手く読めこめなくて真っ白い画面が表示されるので、慌てないようにしましょう。

コメント