こんにちは!セミマサです。
JavaScriptフレームワーク「React」に興味が出てきたので試してみました。備忘録として用意しておくものとコマンド等をまとめておきます。
事前準備
create-react-appコマンドを使うために下記二つを用意しておきます。カッコ内は私の使用しているバージョンです。
・Node.js(v11.13.0)
・npm(6.7.0)
環境を構築と実行
コマンドプロンプトを立ち上げて下記コマンドを入れると環境構築が始まります。
1 |
npx create-react-app プロジェクト名 |
終わったら作成したプロジェクトフォルダにcdコマンドで移動します。
1 |
cd プロジェクト名 |
プロジェクトを実行してみます。
1 |
npm start |
実行に成功するとブラウザが立ち上がります。create直後のプロジェクトの場合下記画面が表示されました。
![react構築直後](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/3a67cc93c0ef5449cea0463329310675.png?resize=500%2C411&ssl=1)
App.jsを編集して保存すれば更新されると書いてあるのでApp.jsをいじってみます。
![編集後react画面](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/359cf31624269ddbfb2a19e4da38b8f1.png?resize=500%2C532&ssl=1)
画面が更新されて編集したテキストが表示されました!
実行しているプロジェクトはコマンドプロンプトを開いた状態でCtrlキーとCキーを同時押しすることで停止できます。
おわりに
create-react-appコマンドを使うことですぐにReactが始められますね!まずは公式のチュートリアルをやってみようと思います。