Create React AppでReact.jsを試してみる

スポンサーリンク

はじめに

Create React Appを使用してReact.jsを試したまとめです。

注意事項

  • コマンドプロンプトからnpmを実行するためにnode.jsがインストールされている必要があります。

環境

OS Windows 7 Pro 64bit
エディタ Visual Studio Code
その他 npm 3.10.10
yarn v0.21.3
create-react-app 1.3.0

Yarnのインストール

今回はパッケージ管理にyarnも利用するためインストールします。

npm install -g yarn

npmと同じくpackage.jsonを参照しパッケージを管理しますが、Yarnは新しいJavascriptのパッケージマネージャーでnpmと互換性がありより高速に動作します。また、yarm.lockというファイルを作成し依存関係にあるパッケージのバージョンがデフォルトで固定されます。

Create React Appのインストール

Reactのひな形を簡単に作成するためにCreate React Appをグローバルにインストールします。

npm install -g create-react-app

(Create React Appをyarnでインストールした場合create-react-appコマンドがうまく認識されなかったためnpmでインストールしています)

create-react-appコマンドを使用してプロジェクトを作成します。ここではhello-worldという名のプロジェクトを作成します。

create-react-app hello-world

作成されたフォルダの構成は以下のようになります。
create-react-appコマンドで作成されたプロジェクトにはwebpack,Babel,ESLintなどのモジュールも含まれています。

hello-world
  ┣ mode_modules
  ┣ public
  ┃   ┣ favicon.ico
  ┃   ┗ index.html
  ┣ src
  ┃   ┣ App.css
  ┃   ┣ App.test.js
  ┃   ┣ index.css
  ┃   ┣ index.js
  ┃   ┗ logo.svg
  ┣ .gitignore
  ┣ package.json
  ┗ README.md

この状態で以下のコマンドを実行するとブラウザが起動し画面にWelcome to Reactと表示されます。

yarn start

実行を終了するにはCtrl+cを入力します。

yarn startについて

作成されたpackage.jsonを表示するとscriptsの部分が以下のように書かれています。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

この中のstartを見るとreact-scripts startと記述されており、./node_modules/react-scripts/内のstart.jsが実行されるようになっています。何をしているかはファイルの中身を見てください。

Hello worldを表示する

画面にHello Worldと表示するために./src/index.jsを以下のように変更し保存します。

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

 ReactDOM.render(
-  <App />,
+  <h1>Hello, world</h1>,
   document.getElementById('root')
 );

yarn startを実行していた場合は自動的にファイルがコンパイルされブラウザにHello, worldが表示されます。これはwebpack-dev-serverがフォルダを常に監視し、変更された場合にファイルをコンパイルしてブラウザをリロードするように設定されているからです。

Typescriptを利用する場合

Typescriptを利用する場合はプロジェクトの作成時に--scripts-version=react-scripts-ts引数を付けてコマンドを入力します。

create-react-app my-app --scripts-version=react-scripts-ts

作成されたフォルダの構成は以下のようになります。

my-app
  ┣ mode_modules
  ┣ public
  ┃   ┣ favicon.ico
  ┃   ┗ index.html
  ┣ src
  ┃   ┣ App.css
  ┃   ┣ App.test.tsx
  ┃   ┣ index.css
  ┃   ┣ index.tsx
  ┃   ┗ logo.svg
  ┣ .gitignore
  ┣ package.json
  ┣ README.md
  ┣ tsconfig.json
  ┣ tslint.json
  ┗ yarn.lock
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする