search
LoginSignup
172

posted at

updated at

React 開発環境構築

はじめに

この記事では、Reactの開発環境構築手順について、説明していきたいと思います。
構築の流れとして

  1. Node.jsのインストール
  2. パッケージマネージャーyarnのインストール
  3. creat-react-appのインストール
  4. 構築した環境でHello Worldを表示させてみる

1. Node.jsのインストール

まずは、下記のURLをクリックします。
https://nodejs.org/ja/

URLを開くとLTS版と最新版とあります。
簡単に説明すると、LTS版(Long Time Supportの略)は長期的サポートが受けれるもの
一方、最新版はサポート期間が短いが、最新の物を利用できるものです。

この記事ではLTS版をダウンロードして進めていきます。

nodeをダウンロードして、インストールできたら、ターミナルで下記のコマンドを入力して、Nodeがインストールしているかを確認します。Nodeのバージョンが表示されていれば大丈夫です。

$ node -v
v18.12.1

2. yarnをインストール

nodeのパッケージマネージャであるyarnをインストールしていきます。
npmというパッケージマネージャがNodeをインストールした時点でありますが、npmよりもyarnの方がより高速で信頼度の高いものになっているので、yarnをインストールしていきます。
yarnをインストールする場合は、ターミナルで下記のコマンドを実行してください。

$npm install --global yarn
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.10
updated 1 package in 1.698s

yarnがインストールされているかは下記のコマンドを実行して、バージョンが表示されていれば大丈夫です。

$yarn --version
1.22.19

3. creat-react-appのインストール

従来のreactを用いた開発では、Babelやwebpackなど様々なパッケージをマニュアルでインストールする必要がったため、ものすごく手間がかかっていました。ですが、creat-react-appをインストールすることで、これらの問題が解消でき、簡単に必要なパッケージをインストールすることができます。
下記のコマンドを実行することでインストールできます。

$yarn global add create-react-app

4. 構築した環境でHello Worldを表示させてみる

ターミナルから下記のコマンドを実行して、アプリケーションを作成します。
作成する場所は任意で構いません。

React.jsの場合はこちら↓

$yarn create react-app helloworld

React + TypeScriptの場合は、こちら

$ yarn create react-app helloworld --template typescript

下記のようなメッセージが表示されていればOKです。


success Uninstalled packages.
✨  Done in 46.14s.

Created git commit.

Success! Created amplifyapp at /Users/*******/helloworld
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 helloworld
  yarn start

Happy hacking!

作成したプロジェクト配下に移動し、下記のstartコマンドを実行します。

$cd helloworld
$yarn start

実行後、ブラウザが起動し、以下の画面が表示されていればOKです。
スクリーンショット 2019-04-29 12.28.38.png

ここまでできたら、helloworld/src配下にあるApp.jsを開きましょう。
App.jsを開くと以下のようなコードが書かれていると思います。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  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.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.jsの内容を全て消して、以下のようにソースを書いてみましょう。

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

修正してブラウザに以下のように表示されていればOKです。
スクリーンショット 2019-04-29 12.49.03.png

次回Reactを用いてカウントアプリを作ってみたいと思います。
Reactでカウントアプリを作る

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
172