React学習　create-react-appで環境構築

Reactの勉強メモ。

まずは環境構築から。

jsstudy.hatenablog.com

Node.jsの用意

Node.jsはJavaScriptのプログラムを実行する環境です。

Node.jsを使って、Reactのプログラムを作っていきます。

Node.jsのバージョン管理ツールを使ってインストールすると、後々管理が楽になります。

Windowsパソコンの場合、NodistなどのNode.jsバージョン管理ツールを使えばOK。

jsstudy.hatenablog.com

npmの用意

Node.jsを用意したら、npm（Node Package Manager）も用意しておきます。

qiita.com

Reactのインストール

(p.25)

Windows10パソコンでコマンドプロンプトを起動して、以下のコマンドを入力してみます。

mkdir my-app
cd my-app
npm init

エンターキーの連打で、初期設定のままの「package.json」ファイルが自動生成されます。

続いて、以下のコマンドを入力します。

npm install --save react

これでReactの準備ができました。

以下のコマンドを入力すると、作成されたReact関連のフォルダを確認できます。

tree .

f:id:jsstudy:20190512130113p:plain

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

(p.26)

続いて、Reactアプリのひな形を自動生成してくれるツール「create-react-app」をインストールします。

www.to-r.net

以下のコマンドを入力すると、create-react-appがインストールされます。

npm install -g create-react-app

続いて、以下のコマンドを入力すると、Reactアプリのひな形が自動生成されます。

create-react-app my-app

f:id:jsstudy:20190512132557p:plain

続いて、以下のコマンドを入力して、Reactアプリを起動させてみます。

cd my-app
npm install
npm start

これで

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

という操作がなされています。

以下の結果が表示されたら、Reactアプリが作成されています。

f:id:jsstudy:20190512133401p:plain

Webブラウザーで

http://localhost:3000/

にアクセスします。

f:id:jsstudy:20190512133846p:plain

「Welcome to React」というWebページが表示されていればOKです。

「To get started, edit src/App.js and save to reload.」という案内文があったので、「src/App.js」を編集してみましょう。

Visual Studio Codeで開いてみます。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;