ウェブサイト制作

[React]MacでReactの開発環境を整えて、Hello Worldを出力するまで

Reactを使用するために、開発環境を整えて、Hello Worldを出力するまでを整理する。


Reactを使用するための二つの方法

Reactを使用するには、二つの方法がある。

  • CDNリンクを使用してReactを使用する
  • npxまたはnpmでローカルにReactをインストールして使用する

CDNリンクを使用する場合は、HTMLファイルが一つあれば、リンクを貼り付けるだけで、Reactを動かすことができる。

詳しくはこちら。

[React] HTML1枚で、JSXを使ってReactをブラウザに表示させる

Reactを使って、画面に文字を表示させてみる。


今回はもう一つの方法、npmでローカルにReactをインストールして、Reactを使用してみる。


node.jsをダウンロード

Reactをローカルで動かすためには、node.jsというjavascriptをインストールする必要がある。

まずは、node.jsのウェブサイトへ。

最新版を下記からインストールする。

https://nodejs.org/ja/


node.jsをインストールすると、JavaScriptのライブラリのインストールをコマンドで行うことができるようになる。

このライブラリ操作に関してのコマンドを、npm(Node Package Manager)コマンドという。


プロジェクトを作成する

次にプロジェクトを作成する。

プロジェクトを作成するとどうなるかというと、アプリケーションの作成に必要なファイルが一通り作成される。

まずは、ターミナルで、下記のコマンドを入力。

//npxで使う場合
npx create-react-app プロジェクト名

//npmで使う場合
npm init react-app プロジェクト名


作成に成功すると、下記のような表示が出る。

Success! Created test-app at 「作成したプロジェクト名」
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd test-app
  yarn start

Happy hacking!


プロジェクトを実行する

実際にプロジェクトを実行してみる。

まずはターミナルで、下記のコマンドでフォルダの中に移動する。

cd「作成したプロジェクト名」


その後次のコマンドを実行。

npm start


実行すると、「http://localhost:3000/」にアクセスされ、下記のような画面が出る。


ファイル構造

プロジェクトが完成すると、ファイルの構造としては下記のようになる。

  • README.md
  • node_modules
  • package.json
  • yarn.lock
  • public
    • favicon.ico
    • logo192.png
    • logo512.png
    • index.html
    • manifest.json
    • robots.txt
  • src
    • App.css
    • App.js
    • App.test.js
    • index.css
    • index.js
    • logo.svg
    • reportWebVitals.js

この中で主に触るのは「src」フォルダの中に入っているファイル。


Hello Worldを出力

プロジェクトが完成したら、まずはApp.jsを下記のように書き換え。

//App.js

import React, { Component } from 'react';

export default class App extends Component {

  constructor(props){
    super();
    this.title = props.title;
    this.message = props.message;
  }

  render() {
    return (
      <div className="App">
        <h1>{this.title}</h1>
        <p>{this.message}</p>
      </div>
    );
  }
}


次に、index.jsを書き換え。

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App title="Hello World" message="Hello React!" />,
  document.getElementById('root')
);


すると下記のように表示される。