create-react-appでHello World

react
スポンサーリンク

vue.jsを勉強すると必ず出てくるreactについて少しお勉強。

スポンサーリンク

環境構築

まずは環境構築として、node.js と yarn をインストールします。

node.jsのインストール

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

上記からLTS版(8.12.0 LTS)をダウンロードして、インストーラの指示に従ってインストールします。

yarn のインストール

Yarn
Fast, reliable, and secure dependency management.

上記サイトの説明に従ってインストールします。(macOSなので「brew install yarn」を実行)

create-react-appのインストール

BabelとかWebpackなどを利用して環境構築が必要なところですが、環境構築を簡単にできるツールをFacebook社が提供してくれています。
ここでは、その「create-react-app」を利用します。
インストールはターミナルで yarn global add create-react-app を実行するだけ。簡単です。

create-react-appでアプリ作成

適当なフォルダで create-react-app test を実行してtestアプリケーションを作成します。
その後、testディレクトリに移動して、yarn start コマンドを実行します。コマンド実行後、 WEBブラウザが自動で開いてlocalhost:3000 にアクセスして、こんな画面が表示されれば成功です。

ちょっといじってみる

src/App.jsの中身は次のようになっています。

11行目の「Welcome to React」を「Hello World」に変更すると、勝手にWEBブラウザがリロードされて正しく反映されていることが確認できます。

うーん、ここまでは簡単ですね。続きはそのうち。

コメント