create-react-appでHello World

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

環境構築
create-react-appでアプリ作成
1. ちょっといじってみる

環境構築

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

node.jsのインストール

Node.js?? is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web...

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

yarn のインストール

404

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の中身は次のようになっています。

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

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

export default App;

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

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