Reactの開発環境をWindows上に構築する。

この記事は2019年03月18日に投稿しました。

目次

1. はじめに
2. Reactの開発環境をWindows上に構築する
3. おわりに

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

1. はじめに

こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回はReactの開発環境をWindows上に構築する方法についてです。

いろいろ事情があり、Web開発の勉強を少しずつ始めることにしました。
Web開発は専門外なのでわからないことだらけですが、覚えたことを少しずつメモしていこうと思います。
内容に不明点や誤りがあれば、後日加筆、修正しながら進めます。

目次へ

2. Reactの開発環境をWindows上に構築する

Reactの開発環境をWindows上に構築するには、以下の3つが必要となります。

1. Node.js
   今のところReactを動作させる環境みたいなものという認識です。
   詳しくはわかった時に追記します。
2. create-react-app
   Reactのひな型プロジェクトを作成してくれるツールです。
3. Visul Studio Code
   Reactのコードを記述するエディタ
   厳密には必須ではありませんが、プラグイン等でReactを書きやすくなります。
   代わりに使い慣れたエディタを使っても構いません。

Node.js のインストール

1. Node.js の公式サイトからインストーラを取得します。
2. インストーラを実行し、 Node.js をインストールします。
3. コマンドプロンプトを開き、以下のコマンドを実行し、インストールされた確認します。

node -v
npm -v

create-react-appのインストール

1.コマンドプロンプトを開きます。
2.任意の作業フォルダを作成し、作成した作業フォルダに移動します。
3.以下のコマンドを実行します。

npm install -g create-react-app

4.以下のコマンドを実行し、Reactのひな型プロジェクトが作成されることを確認します。

create-react-app <プロジェクト名>

5.ひな型プロジェクトのフォルダに移動し、以下のコマンドを実行します。
ブラウザが起動し、サンプル画面が表示されます。

npm start

Visual Stduio Codeのインストール

1.公式サイトからインストーラを取得します。
2.インストーラを実行し、 Visual Stduio Code をインストールします。
3.プラグインをインストールします。
　以下のプラグインをインストールしてみました。

• Japanese Language Pack for VS Code
• ESLint
• npm
• npm Intellisense
• ES7 React/Redux/React-Native/JS snippets
• React Native Tools

目次へ

3. おわりに

Web開発は大昔にJava + JSPで行った経験があります。
その時はJavaScript禁止だったため、JavaScriptはほとんど触りませんでした。
今回JavaScriptを調べてみると、昔とは大きく変わったとびっくりしました。
勉強しがいがあります。

完全無料でJavaを学ぶ0円スクール【0円スクール（完全無料のJavaスクール）】

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ

---

私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッドOS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOSモバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ