Reactのインストールとhello worldを表示する手順

Reactのインストールとhello worldを表示する手順です。

確認環境
・Windows10
・React.js 16.5.2
・Node.js 12.14.0
・npm 6.13.1

手順	環境
	１．create-react-appをインストールする
	２．アプリを作成する
	３．サーバを起動する
	４．画面で確認する
	５．ブラウザにhello worldを表示する

環境

Node.jsとnpmが必要です。
バージョンは、nodeが4.x 以上です。
Node.jsのインストールは、以下を参照下さい。
Node.jsのインストールとhello worldの確認の手順

Reactは、Facebookが開発しました。

以下は、Reactのcreate-react-appのリンクです。インストールの手順があります。
https://reactjs.org/blog/2016/07/22/create-apps-with-no-configuration.html

１．create-react-appをインストールする

create-react-appをインストールします。

Node.jsをインストールしたフォルダに移動して以下のコマンドを入力します。

npm install -g create-react-app

２．アプリを作成する

アプリを作成します。

1行目のcreate-react-appコマンドは、アプリを作成します。test2はアプリ名です。任意の名前にできます。

create-react-app test2

３．サーバを起動する

サーバの起動はアプリのフォルダに移動しnpm startを入力します。

サーバを停止するときは、ctrl + c を押します。

cd test2
npm start

1行目は、アプリのフォルダに移動しています。
2行目は、サーバを起動しています。

４．画面で確認する

サーバを起動すると自動でReactの画面が表示されました。
URLは以下です。
http://localhost:3000/

５．ブラウザにhello worldを表示する

ブラウザにhello worldを表示します。

\src配下のApp.jsを修正します。
12行目をコメントにしました。
13行目にhello worldを追記しました。

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" />
          <p>
            {/* Edit <code>src/App.js</code> and save to reload.*/}
			hello world
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

上記のコードは、jsの中に<p>などが記述されています。
これはJSXと呼ばれるものでHTMLではありません。
https://reactjs.org/docs/introducing-jsx.html

画面は以下のようになります。