ホームページ > 記事 > ウェブフロントエンド > React 環境のセットアップに関するチュートリアル
React 環境のセットアップに関するチュートリアル
- php中世界最好的语言オリジナル
- 2018-04-16 09:46:261108ブラウズ
今回は 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 はテーブルの依存関係をパッケージ化の基礎として使用します。
- 出力 - パッケージ化されたファイルの配置パスを構成するために使用されます。
- loader - webpack はすべてのファイルをコンポーネント (.css、.html、.scss、.jpg、.png など) として扱いますが、webpack が認識できるのは JavaScript のみです。現時点では、ローダーはこれらのファイルをコンポーネントに変換し、依存関係テーブルに追加できます。
- 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中文网其它相关文章！
推荐阅读：
以上がReact 環境のセットアップに関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。