Maison > Article > interface Web > Tutoriel sur la mise en place d'un environnement React

Tutoriel sur la mise en place d'un environnement React

php中世界最好的语言original: 2018-04-16 09:46:261161parcourir

Cette fois, je vais vous apporter un tutoriel sur la construction d'un environnement React. Quelles sont les précautions pour construire un environnement React. Voici des cas pratiques, jetons un coup d'œil.

L'écologie front-end a connu un grand développement ces dernières années. Dans cet écosystème, ne pas accepter de nouvelles choses et acquérir de nouvelles compétences équivaut à tomber dans le chemin du diable.

Cet article tente de présenter React, l'outil de développement front-end et la pile technologique impliquée dans la construction du projet, afin de commencer à réfléchir à l'ensemble du processus de construction.

Il faut souligner que pour comprendre le principe de quelque chose, il faut d’abord savoir quel est son but.

1. Nodejs et NPM

Pourquoi mentionner nodejs ?

Plutôt que de dire que nodejs offre une autre possibilité de développement côté serveur, il vaut mieux dire qu'il a complètement changé l'ensemble de l'écosystème de développement front-end. La plate-forme nodejs a dérivé de puissants npm, grunt, express, etc., qui ont presque redéfini le flux de travail frontal et les méthodes de développement.

Il est nécessaire de parler ici du gestionnaire de packages NPM (node package manager).

npm est un gestionnaire de packages javascript. Nous pouvons trouver, partager et utiliser des packages de code fournis par d'innombrables développeurs sur npm sans avoir à réinventer la roue nous-mêmes.

Pour utiliser npm, le nœud doit être installé. La nouvelle version de nodejs a intégré npm. Après avoir installé nodejs, vérifiez la version installée via la commande suivante :

$ npm -v

Dans le répertoire du projet, lors de l'exécution de

$ npm install

sur la ligne de commande Il identifiera un fichier appelé package.json et tentera d'installer les packages dépendants configurés dans le fichier.

2. Réagissez

La pensée organisationnelle de React rend le code hautement réutilisable, facile à tester et à séparer les préoccupations.

React revendique également Learn Once, Write Anywhere. Il peut s'exécuter sur le navigateur client et s'afficher sur le serveur. En même temps, React Native permet également de développer des applications natives avec React.

Première étape : Créez un fichier package.json et spécifiez les packages de dépendances requis par le projet.

{
 "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": ""
}

Il s'agit d'un fichier nécessaire pour le gestionnaire de packages npm, qui définit le nom, la version, la commande de démarrage, les dépendances de l'environnement de production (dépendances) et les dépendances de l'environnement de développement (devDependencies) du projet.

Étape 2 : Créez un nouveau fichier index.html.

<!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>

Étape 3 : Écrivez un code React simple.

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

Étape 4 : Exécutez.

Alors comment l'exécuter dans le navigateur ? Ici, nous devons utiliser le puissant webpack-dev-server pour démarrer le serveur local.

Nous pouvons voir que le package.json ci-dessus contient les packages de dépendances webpack et webpack-dev-server. Webpack sera présenté ci-dessous.

Bien sûr, nous pouvons également créer un serveur local via nodejs, mais ici webpack-dev-server est en fait un petit serveur nodejs Express qui utilise le middleware webpack-dev-middleware pour servir les packages webpack.

Le fichier webpack.config.js est configuré comme suit :

var webpack = require('webpack');
module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: dirname + '/build',
  filename: 'bundle.js'
 },
 module: {
  loaders: []
 }
}

De cette façon, après avoir installé le package de dépendances via npm install sur la ligne de commande, tapez la commande

$ npm start

Après avoir exécuté le service, saisissez http://localhost:8080/

dans le navigateur Un simple projet React est en cours d’exécution.

3.Webpack

Webpack est un outil de chargement et de packaging de modules pour les applications JavaScript modernes. Il peut non seulement empaqueter du JavaScript, mais également des styles, des images et d'autres ressources.

Regardons une configuration typique d'un webpack :

var webpack = require('webpack');
var path = require('path')
module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: path.resolve(dirname, '/build'),
  filename: 'bundle.js'
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
   },
   {
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
   },
   {
    test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,
    loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
   }
  ]
 },
 plugins: [
  new webpack.optimize.UglifyJsPlugin()
 ]
}

À partir de la configuration du webpack ci-dessus, nous pouvons voir qu'il existe quelques points de configuration de base, qui reflètent également les quatre concepts du webpack :

entrée - webpack créera une table de relations basée sur les dépendances de l'application. Le point de départ du tableau est ce qu’on appelle le point d’entrée. Le point d'entrée indiquera à Webpack par où commencer, et Webpack utilisera les dépendances de la table comme base pour l'empaquetage.
sortie - utilisée pour configurer le chemin de placement du fichier packagé.
loader - webpack traite chaque fichier comme un composant (tel que .css, .html, .scss, .jpg, .png, etc.), mais webpack ne peut reconnaître que JavaScript. À ce stade, les chargeurs peuvent convertir ces fichiers en composants puis les ajouter à la table des dépendances.
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中文网其它相关文章！

Articles Liés

Voir plus