React 環境のセットアップに関するチュートリアル-jsチュートリアル-php.cn

React 環境のセットアップに関するチュートリアル

php中世界最好的语言

リリース： 2018-04-16 09:46:26

オリジナル

1183 人が閲覧しました

今回は React 環境を構築するためのチュートリアルをお届けします。React 環境を構築する際の注意事項は何ですか?実際の事例を見てみましょう。

フロントエンドのエコシステムは近年大きな発展を遂げていますが、このエコシステムでは新しいものを受け入れず、新しいスキルを学ばないことは悪魔の道に陥ることに等しいです。

この記事では、構築プロセス全体について考え始めるために、フロントエンド開発ツールである React と、プロジェクトの構築に関わるテクノロジースタックを紹介します。

何かの原理を理解するには、まずその目的が何であるかを知る必要があることを指摘する必要があります。

1. ノードスとNPM

なぜnodejsについて言及するのでしょうか?

Nodejs がサーバーサイド開発に別の可能性を提供すると言うよりも、フロントエンド開発エコシステム全体を完全に変えたと言った方が適切です。 Nodejs プラットフォームは強力な npm、grunt、express などを派生させ、フロントエンドのワークフローと開発方法をほぼ再定義しました。

ここでは、NPM (ノードパッケージマネージャー) パッケージマネージャーについて説明する必要があります。

npm は、JavaScript パッケージマネージャーです。私たちは、自分たちで車輪を再発明することなく、npm 上で無数の開発者によって提供されたコードパッケージを検索、共有、使用できます。

npmを使用するにはnodeをインストールする必要があります。 nodejs の新しいバージョンには npm が統合されています。nodejs をインストールした後、次のコマンドでインストールされているバージョンを確認します:

$ npm -v

ログイン後にコピー

プロジェクトディレクトリ内、コマンドラインから実行する場合

$ npm install

ログイン後にコピー

これは、package.json というファイルを識別し、そのファイル内に構成されている依存パッケージのインストールを試みます。

2. 反応する

React の組織的思考により、コードの再利用性が高く、テストが容易になり、懸念事項を分離しやすくなります。

React はまた、Learn Once、Write Anywhere も主張しています。 React Native はクライアントブラウザーで実行し、サーバー上でレンダリングすることができます。同時に、React を使用してネイティブアプリを開発することもできます。

ステップ 1: 新しい package.json ファイルを作成し、プロジェクトに必要な依存関係パッケージを指定します。 りー

これは、npm パッケージマネージャーに必要なファイルで、プロジェクトの名前、バージョン、起動コマンド、運用環境の依存関係 (dependency)、開発環境の依存関係 (devDependency) を定義します。

ステップ 2: 新しいindex.htmlファイルを作成します。 りー

ステップ 3: 簡単な React コードを作成します。 りー

ステップ 4: 実行します。

では、ブラウザで実行するにはどうすればよいでしょうか?ここでは、強力な webpack-dev-server を使用してローカルサーバーを起動する必要があります。

上記の package.json には、webpack および webpack-dev-server 依存関係パッケージが含まれていることがわかります。 Webpackについては以下で紹介します。

もちろん、nodejs を介してローカルサーバーを構築することもできますが、ここでの webpack-dev-server は実際には、webpack パッケージを提供するために webpack-dev-middleware ミドルウェアを使用する小さな nodejs Express サーバーです。

webpack.config.js ファイルは次のように構成されています:

{
 "name": "react-tutorials",
 "version": "1.0.0",
 "description": "",
 "author": "yunmo",
 "scripts": {
   "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",
   "build": "webpack --progress --colors --minimize"
  },
 "dependencies": {
   "react": "^15.4.0",
   "react-dom": "^15.4.0"
 },
 "devDependencies": {
   "webpack": "^2.2.1",
   "webpack-dev-server": "^2.4.2"
 },
 "license": ""
}

ログイン後にコピー

このようにして、コマンドラインで npm install を使用して依存関係パッケージをインストールした後、コマンド

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>yunmo</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
 </head>
 <body>
 <p id="yunmo"></p>
 <script src="bundle.js"></script>
 </body>
</html>

ログイン後にコピー

を入力します。サービスを実行した後、ブラウザに http://localhost:8080/

と入力します。単純な React プロジェクトが実行されています。

3. ウェブパック

Webpack は、最新の JavaScript アプリケーション用のモジュール読み込みおよびパッケージ化ツールです。JavaScript だけでなく、スタイル、画像、その他のリソースもパッケージ化できます。

典型的な Webpack 構成を見てみましょう:

var React = require('react');
var ReactDOM = require('react-dom');
var element = React.createElement(
 'h1',
 {className: 'yunmo'},
 '云陌，欢迎来到react的世界！'
 );
ReactDOM.render (
 element,
 document.getElementById('yunmo')
);

ログイン後にコピー

上記の Webpack 構成から、Webpack の 4 つの概念も反映するいくつかの基本的な構成ポイントがあることがわかります。エントリ - webpack はアプリケーションの依存関係に基づいて関係テーブルを作成します。テーブルの開始点はいわゆるエントリーポイントです。エントリポイントは webpack にどこから開始するかを指示し、webpack はテーブルの依存関係をパッケージ化の基礎として使用します。

plugins——因为loaders作用方式是以单一文件为基础的，所以plugins更广泛的用来对打包组建形成的集合（compilations）进行自定义操作。

这样，一个完整的模块打包体系就建立起来了。

4、ES6

ES6，即ECMAScript 6.0，是 JavaScript的下一代标准。ES6里面新增了很多语法特性，使得编写复杂的应用更加优雅自然。

ES6中引入了诸如let和const、箭头函数、解构赋值、字符串模版、Module、Class、Promise等特性，使得前后端编程语言在语法形式上的差异越来越小。

我们来看一下：

import React from 'react'  //模块引入
import '../styles/reactStack.scss'
class ReactStack extends React.Component { //class特性
 render() {
  const learner = {name: '云陌', age: 18} //const定义变量
  const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',]
  const extraSkills = ['Git', 'Postman']
  const skillSet = [...mainSkills, ...extraSkills]
  const { name } = learner  //解构赋值
  let greetings = null  //let定义变量
  if (name) {
   greetings = `${name},欢迎来到${mainSkills[0]}的世界！` //字符模版
  }
  //以下用了箭头函数
  return (
   <p className="skills">
    <p>{greetings}</p>
    <ol>
     {skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
    </ol>
   </p>
  )
 }
}
export default ReactStack  //模块导出

ログイン後にコピー

当然，并非所有浏览器都能兼容ES6全部特性，但看到这么优雅的书写方式，只能看怎么行呢？因此，这里又引出了一个神器，Babel！

5、Babel

Babel是一款JavaScript编译器。

Babel可以将ES6语法的代码转码成ES5代码，从而在浏览器环境中实现兼容。

Babel内置了对JSX的支持，所以我们才能向上面那样直接return一个JSX形式的代码片段。

具体用法不在本文过多讲述。

6、Styles引入

在上面的代码中，有以下样式引入方式：

import '../styles/reactStack.scss'

ログイン後にコピー

样式文件如下：

body {
 background: #f1f1f1;
}
.skills {
 h3 {
  color: darkblue;
 }
 ol {
  margin-left: -20px;
  li {
   font-size: 20px;
   color: rgba(0, 0, 0, .7);
   &:first-child {
    color: #4b8bf5;
   }
  }
 }
}

ログイン後にコピー

样式文件要在项目中起作用，还需要在package.json里面添加相应的loader依赖，如css-loader, sass-loader, style-loader等，别忘了package.json里还需要node-sass依赖，然后安装即可。

webpack.config.js中相应配置如下：

module: {
 loaders: [
  {
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader'
  },
  {
   test: /\.scss$/,
   loaders: ["style-loader", "css-loader", "sass-loader"]
  }
 ]
}

ログイン後にコピー

再将main.js中的内容作如下更改：

import React from 'react'
import ReactDOM from 'react-dom'
import ReactStack from './pages/ReactStack'
ReactDOM.render (
 <ReactStack />,
 document.getElementById('yunmo')
);

ログイン後にコピー

结语

至此，一个简单的React项目便搭建起来了。

在后续的文章中，我将对本文涉及到的React技术栈做专门的讲解，不仅限于硬性技能。当然更多的是实践做法上的总结，因为如果要掌握它们的理论，细看官方文档和源码是最好不过的做法。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！