ReactJS-環境設定

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

シニア番号 ソフトウェアと説明
1

NodeJS and NPM

NodeJSは、ReactJS開発に必要なプラットフォームです。私たちのチェックアウトNodeJS環境設定を。

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

  • webpackとbabelを使用します。

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

webpackとbabelを使用したReactJSのインストール

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

BabelはJavaScriptコンパイラおよびトランスパイラーです。これは、あるソースコードを別のソースコードに変換するために使用されます。これを使用すると、コードで新しいES6機能を使用できるようになります。ここで、babelはそれをすべてのブラウザーで実行できるプレーンな古いES5に変換します。

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

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

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とreactdomをインストールします

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

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

または、次のように1つのコマンドですべてをインストールできます。

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

または、次のように1つのコマンドですべてをインストールできます。

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

または、次のように1つのコマンドですべてをインストールできます。

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

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

インストールを完了するには、特定のファイル、つまりindex.html、App.js、main.js、webpack.config.js、およびを作成する必要があります。babelrc。これらのファイルは手動で作成することも、を使用して作成することもできます。command prompt。

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ファイルを作成し、次のコードを追加します。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: './index.html'
      })
   ]
}

を開きます 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-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'));

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

名前でファイルを作成する .babelrc 次のコンテンツをコピーします。

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

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

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

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

ブラウザで開く必要のあるポートが表示されます。私たちの場合、それはhttp://localhost:8001/。それを開くと、次の出力が表示されます。

ステップ10-バンドルを生成する

最後に、バンドルを生成するには、コマンドプロンプトでビルドコマンドを次のように実行する必要があります。

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

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

create-react-appコマンドの使用

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

ステップ1-create-react-appをインストールします

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

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

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

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

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

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

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

名前の付いたファイルを追加する index.css そして index.js srcフォルダに-として

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved