最近いい加減フロントエンド開発の知識もないとまずいなと思い始めたので、Reactを触ってみることにしました。どうにもCreate React Appというツールを使うと簡単にReactを使ったサービスを作り始めることができるみたいなので、今回はこのツールを使ってみます。
基本的に公式のGetting Startedに従って導入を進めます。なお環境はWindows 10のWSL (Windows Subsystem for Linux)を使用します。つまりはLinuxです。
後日Macでも試しましたが、同じ手順で導入できました。
Create React Appをnpm install -g create-react-appで自分のローカル環境にインストールすることは非推奨となりました。
npxを使えばローカル環境にインストールせずともCreate React Appを使えるので、以前ローカル環境に入れちゃった人はnpm uninstall -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を上手く読めこめなくて真っ白い画面が表示されるので、慌てないようにしましょう。
コメント