Reactを動かしてみる【準備編】

概要

社内でReactを用いた新規事業がスタートしたので、これを機に今までちゃんと勉強してなかったツケを回収する。

学習教材

Boothで購入したPDFをもとにサクッと進めていく。 すべて含めて200ページ弱なので週末で終わるかな。

booth.pm

作業手順

• node, npm, yarnのインストール
• React Appの作成

node, npm, yarnのインストール

npm と node をインストールしておきます。 筆者はすでに導入済みでした。

Nodeのバージョン管理に anyenv を用いるのでインストールを推奨します。

qiita.com

シェルは bash を使用しています。

$ brew install anyenv
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
$ anyenv install --init
...
Completed!

$ node -v
v13.12.0
$ npm -v
6.14.4

この後は、yarn をインストールします

$brew install yarn
$yarn -v
1.22.4

React Appの作成

ここからは実際にアプリケーションの作成に移ります。 適当なワーキングディレクトリで下記コマンドを打ち込みましょう。

$ npx create-react-app hello-world --typescript

※ npx は npm のパッケージをいちいちインストールしなくてもそのバイナリが実行できるコマンドです。

完了したら作成したプロジェクトに移動して yarn start と入力します。

$ cd hello-world
$ yarn start

Chromeのブラウザ上にアプリが表示されれば成功です。

ブラウザに表示されたアプリケーション

今回は一旦ここまでにしておきます。

続きは別記事で書いていこうと思います。