JavaScript勉強会

JavaScriptの学習日記

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

 

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;

 

こんなソースコードになってました。

 

<h2>Welcome to React</h2>

という1行を

<div>Hello, world!</div>

に書き換えて、保存して、Webブラウザーでリロードしてみます。

 

f:id:jsstudy:20190512135335p:plain

 

「Hello, world!」と表示が変わっていればOKです。

 

これでReactアプリを作成する環境の用意ができました。

引き続き、Reactアプリの作り方を学んでいきたいと思います。

 

 

 

React開発 現場の教科書

React開発 現場の教科書