Next.jsでReactを使った開発環境を作成する方法

React を使ったアプリケーションを作成するには開発環境を整える必要があります。

React の開発環境はコマンドを入力するだけで簡単に作成できます。

Reactの開発環境を作成する
まとめ

Reactの開発環境を作成する

まずは React を実行する環境を作成します。

npmを使えるようにする

環境作成には npm を利用します。

npm は Node Package Manager という JavaScript 系のパッケージを管理するツールで、必要とするパッケージをインストールする際、依存するパッケージもまとめてインストールしてくれるツールです。

npm は Node.js をインストールすると使えるようになるので、まだ Node.js をインストールされていない方はまず、 Node.js をインストールしてください。

Node.jsをWindowsパソコンにインストールする方法

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の Java...

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

npm が使えるようになったら React の環境作成のためのパッケージ create-react-app をインストールします。

Windows のコマンドプロンプトを開いて以下のコマンドを入力します。

npm install -g create-react-app

React環境を作成する

React の開発環境を作成するには動作環境を作成するフォルダーで以下のコマンドを入力します。

npx create-react-app {作成するアプリケーション名}

npx とありますが、間違いではなく npx です。

正常に完了すると npx create-react-app を実行したディレクトリに作成したアプリケーション名のディレクトリができています。

また、Next.js で Reacts を使う場合は

npx create-next-app {作成するアプリケーション名}

と入力すれば create-react-app 同じように環境が整います。

このサイトでの React に関する記事は Next.js で動作確認をしていきます。

Next.jsの起動

create-next-app が正常に終了すると作成したディレクトリーに package.json というファイルが作成されています。

中身は以下のようなものになっています。

{
  "name": "react-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.1"
  }
}

パッケージの中に react と react-dom が含まれているので、これで React を使ったアプリケーション作成の準備が整いました。

作成したディレクトリに移動して

npm run dev

と入力し、ブラウザーから localhost:3000 へアクセスして以下の画面が表示されれば成功です。

まとめ

React の開発環境を作成するには npm（npx）コマンドを利用することで簡単に作成することができます。