↓もし、良かったらSNSでの紹介よろしくお願いします。

【React】create-react-appでアプリケーションのひな型を作る

bootstrap

今回はReactで超簡単なアプリケーションを作成してコードの解説を行います。

実行環境

念のため、実行環境を記載します。
下記の実行環境でなくても動くアプリケーションになっているはずです。

  • OS:Windows10
  • Node:8.11.4
  • npm

create-react-app

create-react-appとは、
reactアプリケーションのひな型を作成するツールです。
npmでインストールすることができます。

npm install -g create-react-app

-gフラグをつけると
グローバル環境でnpmパッケージをインストールします。

ツールとして利用するパッケージは
基本的にgフラグをつけてインストールします。

create-react-appを使って、
spa_sampleという名前のアプリケーションを作成します。

create-react-app spa_sample

作成が完了するまで少し時間がかかります。

完了したら次のコマンドで試しに起動してみましょう。

cd spa_sample
npm start

windowsの場合は、
ファイアウォールの警告が表示されます。
開発用のPCではlocalhostからアクセスできれば十分です。
なので、外部からのアクセスははじくように下記のように設定しましょう。
チェックボックスを確認しよければ、アクセスを許可するを押しましょう。

http://localhost:3000/

にアクセスすると次のようなページが表示されます。

Ctr+Cでサーバーを停止しましょう。

自動生成されたソースコードを見る

自動生成されたコードで重要なのは、
App.js,index.jsです。

App.jsでは先ほど見たページの内容を記述しています。
Reactでは、ページの内容は、クラスとして定義されます。

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;

index.jsを見てみます。

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

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

4行目の

import App from './App';

でApp.jsの内容を読み込んでます。

そして、7行目の

ReactDOM.render(<App />, document.getElementById('root'));

でApp.jsの内容をレンダリングしています。

このレンダリングは、public/index.htmlのidがrootのdivタグを
App.jsの内容に置き換えるようにレンダリングしています。

つまり、index.jsがアプリケーションのエントリーポイントとなっています。

アプリケーションを改良

本記事のアプリケーションをベースに
SPAアプリケーションを作成したので参考にしてみてください。

https://www.tech-tech.xyz/archives/react-sp.html