Reactjs-environment-setup

提供：Dev Guides
移動先:案内、検索

ReactJS-環境設定

この章では、React開発を成功させるための環境をセットアップする方法を示します。 多くのステップが関係していることに注意してください。これは、後で開発プロセスをスピードアップするのに役立ちます。 NodeJS が必要になるため、インストールしていない場合は、次の表のリンクを確認してください。

Sr.No. Software & Description
1

NodeJS and NPM

NodeJSは、ReactJS開発に必要なプラットフォームです。 リンク：/nodejs/nodejs_environment_setup [NodeJS Environment Setup]を確認してください。

NodeJSを正常にインストールしたら、npmを使用してReactのインストールを開始できます。 ReactJSは2つの方法でインストールできます

  • webpackとbabelを使用します。
  • create-react-app コマンドを使用します。

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

*Webpack* はモジュールバンドラーです（独立したモジュールを管理およびロードします）。 依存モジュールを受け取り、それらを単一の（ファイル）バンドルにコンパイルします。 コマンドラインを使用してアプリを開発するか、webpack.configファイルを使用して構成することにより、このバンドルを使用できます。

BabelはJavaScriptコンパイラおよびトランスパイラーです。 1つのソースコードを別のソースコードに変換するために使用されます。 これを使用すると、コード内で新しい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
Wrote to 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をインストールし、domを反応させる

主なタスクはReactJSをインストールすることであるため、npmの install react および react-dom コマンドを使用して、ReactJSとそのdomパッケージをインストールします。 -save *オプションを使用して、インストールするパッケージを *package.json ファイルに追加できます。 

C:\Users\finddevguides\Desktop\reactApp>npm install react --save
C:\Users\finddevguides\Desktop\reactApp>npm install react-dom --save

または、次のように単一のコマンドでそれらすべてをインストールできます- 

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

ステップ3-webpackをインストールする

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

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

または、次のように単一のコマンドでそれらすべてをインストールできます- 

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

ステップ4-babelのインストール

babelとそのプラグインbabel-core、babel-loader、babel-preset-env、babel-preset-react、およびhtml-webpack-pluginをインストールします 

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

または、次のように単一のコマンドでそれらすべてをインストールできます- 

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env
   babel-preset-react html-webpack-plugin --save-dev

ステップ5-ファイルを作成する

インストールを完了するには、indexl、App.js、main.js、webpack.config.js、。 _ babelrc_ などの特定のファイルを作成する必要があります。 これらのファイルは、手動で作成することも、*コマンドプロンプト*を使用して作成することもできます。 

C:\Users\username\Desktop\reactApp>type nul > indexl
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* ファイルを開き、次のコードを追加します。 webpackエントリポイントをmain.jsに設定しています。 出力パスは、バンドルされたアプリが提供される場所です。 また、開発サーバーを *8001* ポートに設定しています。 任意のポートを選択できます。
*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: './indexl'
      })
   ]
}
*package.json* を開き、 *"test" "echo \" Error：no test specified \ "&& exit 1"* を *"scripts"* オブジェクト内で削除します。 このチュートリアルではテストを行わないため、この行を削除しています。 代わりに *start* および *build* コマンドを追加しましょう。
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

手順7-indexl

これは単なる通常の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'));

注意-何かを使用したいときはいつでも、最初に*インポート*する必要があります。 コンポーネントをアプリの他の部分で使用できるようにする場合は、作成後に export し、使用するファイルにインポートする必要があります。 

*.babelrc* という名前のファイルを作成し、次のコンテンツをそのファイルにコピーします。
{
   "presets":["env", "react"]
}

ステップ9-サーバーの実行

セットアップが完了し、次のコマンドを実行してサーバーを起動できます。 

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

ブラウザで開く必要があるポートが表示されます。 この例では、 http：//localhost：8001/ です。 開いた後、次の出力が表示されます。

サーバーの実行

ステップ10-バンドルの生成

最後に、バンドルを生成するには、コマンドプロンプトでbuildコマンドを実行する必要があります- 

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

これにより、以下に示すように、現在のフォルダーにバンドルが生成されます。

バンドルの生成

create-react-appコマンドを使用する

webpackとbabelを使用する代わりに、 create-react-app をインストールすることで、ReactJSをより簡単にインストールできます。

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

デスクトップを参照し、以下に示すようにコマンドプロンプトを使用してCreate React Appをインストールします- 

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

これにより、デスクトップにmy-appという名前のフォルダーが作成され、そこに必要なすべてのファイルがインストールされます。

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

生成されたmy-appフォルダーのsrcフォルダーを参照し、以下に示すように、その中のすべてのファイルを削除します- 

C:\Users\finddevguides\Desktop>cd my-app/src
C:\Users\finddevguides\Desktop\my-app\src>del *
C:\Users\finddevguides\Desktop\my-app\src\*, Are you sure (Y/N)? y

ステップ3-ファイルを追加する

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

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

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

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

ステップ4-プロジェクトを実行する

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

npm start

プロジェクトの実行

「https://www.finddevguides.com/index.php?title=Reactjs-environment-setup&oldid=16875」から取得
Powered by MediaWiki