ReactJS 環境設定

この章では、React開発に成功して環境を設定する方法をお見せします。多くの手順が含まれますが、これにより将来的な開発プロセスを加速することができます。NodeJSが必要になるため、まだインストールしていない場合は、以下のリンクを確認してください。

NodeJSを成功してインストールした後、npmを使ってReactをインストールすることができます。-ReactJSをインストールするには、2つの方法があります。

• webpack と babel を使用して

• を使用してcreate-react-appコマンド

webpack と babel を使用して ReactJS をインストールします

Webpackはモジュールバンドラー（独立したモジュールを管理し、ロードします）。関連するモジュールを取り込み、単一の（ファイル）バンドルパッケージにコンパイルします。コマンドラインを使用したり、webpack.config ファイルを通じてアプリケーション開発中に使用したりできます。

Babel は JavaScript コンパイラであり、ソースコードを他のソースコードに変換します。この機能を使用すると、コードで ES6の新しい機能を使用し、babel はそれをすべてのブラウザで動作する普通の ES5。

第1ステップ-ルートフォルダーを作成します

mkdir コマンドを使用して、デスクトップ上に reactApp という名前のフォルダーを作成し、すべての必要なファイルをインストールします。

C:\Users\username\Desktop>mkdir　reactApp
C:\Users\username\Desktop>cd　reactApp

任何モジュールを作成するには、package.json ファイルを作成する必要があります。したがって、フォルダーを作成した後は、package.json ファイルを作成する必要があります。これには、コマンドプロンプトから npm init コマンドを実行する必要があります。

C:\Users\username\Desktop\reactApp>npm　init

このコマンドは、パッケージの情報について尋ねます。例えば、パッケージ名、説明、作者などです。–y オプションを使用すると、これらの情報をスキップできます。

C:\Users\username\Desktop\reactApp>npm　init　-y
C:\reactApp\package.json に書き込みました:
{
　　　"name":　"reactApp"
　　　"version":　"1.0.0
　　　"description":　""
　　　"main":　"index.js"
　　　"scripts":　{
　　　　　　"test":　"echo　\"Error:　no　test　specified\"　&&　exit"　1"
　　　},
　　　"keywords":　[],
　　　"author":　""
　　　"license":　"ISC"
}

第2ステップ-React と React dom をインストールします

私たちの主なタスクは ReactJS をインストールすることであり、それとその dom パッケージをインストールするためには、npm の install react と react をそれぞれ使用します。-dom コマンド。以下のように使用できます -- save オプションは、インストールしたソフトウェアパッケージを package.json ファイルに追加します。

C:\Users\w3codebox\Desktop\reactApp>npm　install　react　--保存
C:\Users\w3codebox\Desktop\reactApp>npm　install　react-dom　--保存

または、これらすべてを1つのコマンドでインストールすることもできます：

C:\Users\username\Desktop\reactApp>npm　install　react　react-dom　--保存

第3ステップ-Webpackのインストール

webpackを使用してバンドルを作成するため、webpackをインストールしてください。-dev-serverおよびwebpack-cli。

C:\Users\username\Desktop\reactApp>npm　install　webpack　--保存
C:\Users\username\Desktop\reactApp>npm　install　webpack-dev-server　--保存
C:\Users\username\Desktop\reactApp>npm　install　webpack-cli　--保存

または、これらすべてのプログラムを1つのコマンドでインストールすることもできます：

C:\Users\username\Desktop\reactApp>npm　install　webpack　webpack-dev-server　webpack-cli　--保存

手順4-Babelのインストール

babelおよびプラグインbabelのインストール-core、babel-loader、babel-プレセット-env、babel-プレセット-reactおよびhtml-webpack-プラグイン

C:\Users\username\Desktop\reactApp>npm　install　babel-core　--保存-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-loader　--保存-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-プレセット-env　--保存-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-プレセット-react　--保存-dev
C:\Users\username\Desktop\reactApp>npm　install　html-webpack-プラグイン　--保存-dev

または、これらすべてのプログラムを1つのコマンドでインストールすることもできます。-

C:\Users\username\Desktop\reactApp>npm　install　babel-core　babel-loader　babel-プレセット-env　
　　　babel-プレセット-react　html-webpack-プラグイン　--保存-dev

第5ステップ-ファイルの作成

インストールを完了するために、index.html、App.js、main.js、webpack.config.jsおよび.のファイルを作成する必要があります。babelrcこれらのファイルを手動で作成することもできますし、コマンドプロンプトを使用して作成することもできます。

C:\Users\username\Desktop\reactApp>type　nul　>　index.html
C:\Users\username\Desktop\reactApp>type　nul　>　App.js
C:\Users\username\Desktop\reactApp>type　nul　>　main.js
C:\Users\username\Desktop\reactApp>type　nul　>　webpack.config.js
C:\Users\username\Desktop\reactApp>type　nul　>　.babelrc

第6ステップ-コンパイラ、サーバー、ローダーを設定します。

webpack.config.js

const　path　=　require('path');
const　HtmlWebpackPlugin　=　require('html-webpack-plugin');
module.exports　=　{
　　　entry:　'./main.js',
　　　output:　{
　　　　　　path:　path.join(__dirname,　'/bundle'),
　　　　　　filename:　'index_bundle.js'
　　　},
　　　devServer:　{
　　　　　　inline:　true,
　　　　　　port:　8001
　　　},
　　　module:　{
　　　　　　rules:　[
　　　　　　　　　{
　　　　　　　　　　　　test:　/\.jsx?$/,
　　　　　　　　　　　　exclude:　/node_modules/,
　　　　　　　　　　　　loader:　'babel-loader',
　　　　　　　　　　　　query:　{
　　　　　　　　　　　　　　　presets:　['es2015',　'react"
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　]
　　　},
　　　plugins:[
　　　　　　new　HtmlWebpackPlugin({
　　　　　　　　　template:　'./index.html'
　　　　　　})
　　　]
}

package.jsonを開き、「scripts」オブジェクトから以下を削除します。 "test" "echo \"Error: no test specified\" && exit" 1"。この行を削除します。なぜなら、このチュートリアルではテストを行わないからです。startとbuildコマンドを追加します。

"start":　"webpack"-dev-server　--mode　development　--open　--hot","build":　"webpack"　--mode　production"

第7ステップ-index.html

これは普通のHTMLです。設定を行います。div id = "app"アプリケーションのルート要素として追加します。index_bundle.jsスクリプト（バンドルされたアプリケーションファイル）。

<!DOCTYPE　html>
<html　lang　=　"en">
　　　<head>
　　　　　　<meta　charset　=　"UTF-8">
　　　　　　<title>React　App</title>
　　　</head>
　　　<body>
　　　　　　<div　id　=　"app"></div>
　　　　　　<script　src　=　'index_bundle.js'></script>
　　　</body>
</html>

第8ステップ-App.jsxとmain.js

これは最初のReactコンポーネントです。次の章でReactコンポーネントについて詳しく説明します。このコンポーネントは以下をレンダリングします。Hello World。

App.js

import　React,　{　Component　}　from　'react';
class　App　extends　Component{　　　render(){
　　　　　　return(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Hello　World</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

このコンポーネントをインポートし、ルートに表示する必要があります。App要素を作成し、ブラウザで見れるようにします。

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.js';
ReactDOM.render(<App　/>,　document.getElementById('app'));

名前を持つファイルを作成します。.babelrc以下の内容をそのファイルにコピーしてください。

{
　　　"presets":["env",　"react"]}

手順9-サーバーの実行

設定が完了したら、以下のコマンドを実行してサーバーを起動できます。

C:\Users\username\Desktop\reactApp>npm　start

これはブラウザで開く必要のあるポートを表示します。当社の場合、http://localhost:8001/それを開くと、以下のような出力が見られます。

手順10-バンドルの生成

最後に、バンドルを作成するために、コマンドプロンプトでbuildコマンドを実行する必要があります。以下のようになります：

C:\Users\w3codebox\Desktop\reactApp>npm　run　build

これは現在のフォルダーにパッケージを生成します。

createを使用して-react-appコマンド

webpackとbabelを使用する以外に、以下をインストールすることでcreate-react-appReactJSをより簡単にインストールするために

第1ステップ-インストールcreate-react-app

デスクトップをブラウズし、コマンドプロンプトを使用してCreate React Appをインストールします。-

C:\Users\w3codebox>cd　C:\Users\w3codebox\Desktop\
C:\Users\w3codebox\Desktop>npx　create-react-app　my-app

デスクトップにmyという名前のファイルを作成します-appフォルダー内にすべての必要なファイルをインストールします。

第2ステップ-すべてのソースファイルを削除します

生成されたmyをブラウズします-appフォルダー内のsrcフォルダーを削除し、すべてのファイルを以下のように削除します-

C:\Users\w3codebox\Desktop>cd　my-app/src
C:\Users\w3codebox\Desktop\my-app\src>del　*
C:\Users\w3codebox\Desktop\my-app\src\*,　確定しますか？(Y/N)?　はい

第3ステップ-ファイルの追加

srcフォルダーに名前を持つファイルを追加しますindex.cssおよびindex.jsファイルのファイル-

C:\Users\w3codebox\Desktop\my-app\src>type　nul　>　index.css
C:\Users\w3codebox\Desktop\my-app\src>type　nul　>　index.js

index.jsファイルに以下のコードを追加します

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

手順4-プロジェクトの実行

最後に、startコマンドを使用してプロジェクトを実行します。

npm　start