よしかわーるど

プログラミングで世界を変える

2018-10-20

Reactを学ぶ 1日目

Reactを学ぶ 1日目

どうも、よしかわです。最近、自分の作っているWebサービスにReactを導入しようと思い、この記事を作成しています。

至らない点があると思うので、Twitterでリプライ飛ばしていただけると嬉しいです。

対象読者

  • Reactを学びたい人
  • 最新のJavaScriptを使いたい人

環境構築

  • ThinkPad X1 Yoga(3rd Gen)
  • Arch Linux 4.18.14
  • node v10.12.0
  • yarn v1.10.1
  • npm v6.4.1

Node.jsについて

Node.jsは、Googleが開発するV8 JavaScript Engineと呼ばれるオープンソースの実行エンジンで動作する、サーバーサイドでの実行環境です。

モジュール方式を採用しており、基本的な機能をコアモジュールとして持ちつつも、サードパーティ製モジュールも動作することが可能になっています。

このモジュールを簡単に管理する役割を果たすのがnpmです。

npmについて

npmは、Node Package Managerの頭文字をとって名付けられています。 npmは、Node.jsのパッケージを管理してくれます。

npmオプション

オプション 省略形 追加される場所 役割
–save -S dependencies プロダクトと直接的に依存関係にあるパッケージ
–save-dev -D devDependencies 開発作業に利用されるパッケージ
–global -g (package.jsonには追加されない) プロジェクトを横断して利用できるうに実行環境へインストールされる

Reactをインストール

React本体をインストールするには、以下のコマンドを実行する。

npm install --save react

creat-react-app

先程、Reactのパッケージをnpmからインストールしたのですが、Reactは雛形となるプロジェクト構成が作れるパッケージを公式にnpmで公開しています。

npm install -g create-react-app # creat-react-appコマンドを利用可能にするためグローバルインストール
create-react-app my-app # コマンドを使ってmy-appディレクトリとして雛形を作成

続いて、creat-react-appで作成されたディレクトリへ移動して、定義されているパッケージをまとめてインストールしてみましょう。

cd my-app # 作成されたディレクトリへ移動
npm install # パッケージのインストール
npm start # ビルドを実行してローカルサーバーを立ち上げる

起動が成功したら以下のようにログが出ます

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.10.8:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

それは http://localhost:3000/にアクセスしてみましょう。

以下のように表示されていたら、Reactの始まりです!お疲れ様でした!