React.jsアプリの開発環境を作成する方法

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

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

スポンサーリンク

React.jsアプリの環境を作成する

まずは React.js を実行する環境に必要なものは npm パッケージです。

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

Node.jsをWindowsパソコンにインストールする方法
Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。Windowsパソコンにインストールする方法です。

React.jsの環境を作成する

React.js の環境は簡単に準備できます。

Windows でインストールする場合はコマンドプロンプトを開いて、開発するためのディレクトリに CD コマンドで移動してから以下のコマンドを入力します。

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

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

これで React.js を使う準備は完了しました。

まだ create-react-app をインストールしていない場合は先に以下のコマンドを入力します。

npm install -g create-react-app

もし Node.js でサーバサイドでレンダーされたウェブサイトを構築するなら、Next.js を導入しましょう。

Next.js で React.js を使う場合は

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

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

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

React.jsを起動する

実際に React.js のアプリを作って動作確認を行うには Next.js を起動します。

先ほど作成されたディレクトリに移動して以下のコマンドを入力します。

npm run dev

これでブラウザーを起動して「http://localhost:3000」と入力するとReact.jsで作成されたデモページにアクセスできると思います。

まとめ

React.js を利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx create-next-app 」コマンドを実行するだけで簡単に準備することができます。

スポンサーリンク
スポンサーリンク
Node.jsのおすすめの本
Javascriptの学習におすすめの本
JavaScript
スポンサーリンク
ソフトウェア開発日記
タイトルとURLをコピーしました