React与ES2015（一）

发布时间：2020-12-15 08:27:58 所属栏目：百科来源：网络整理

导读：ES2015（也就是ES6）带来了很多新的语言特性。比如：类、箭头方法、rest参数、promise、generator等很多。如果你对ES6还不是很熟悉的话可以看这里。但是浏览器对于ES6的支持还不是很好。你可以看看这个ES6兼容表。显而易见的是不同浏览器对于ES6的兼容参差

ES2015（也就是ES6）带来了很多新的语言特性。比如：类、箭头方法、rest参数、promise、generator等很多。如果你对ES6还不是很熟悉的话可以看这里。

但是浏览器对于ES6的支持还不是很好。你可以看看这个ES6兼容表。显而易见的是不同浏览器对于ES6的兼容参差不齐。于是就有人想把ES6的代码转成ES5的不就可以兼容了吗。

这其中做的最好的就是Babel,一个非常棒的工具。后面会详细的介绍如何使用。

准备开发环境

为了可以正常开发，那么就需要用到webpack。这个工具可以把模块和相关的依赖项都打包到一起。之后，只要在浏览器中引用打包的脚本。

首先你需要安装nodejs。如果你还没有安装的话，直接去官网下载最新的安装包安装即可。
接下来安装webpack。npm install webpack --save-dev。
安装babel-loader。npm install babel-loader babel-preset-es2015 babel-preset-react --save。有了babel-loader和对应的preset，就可以把ES6的代码转换为ES5了。但是，之前还需要配置babel-loader。
安装react以及相关包。npm install react react-dom --save。

下面就是babel-loader和webpack的配置。首先配置babel-loader否则webpack无法使用babel转码。

在根目录添加文件.babelrc，并在提其中添加如下内容：

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

接下来配置webpack。在根目录创建文件webpack.config.js,之后在文件中添加如下代码：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname,'src/client/public');
var APP_DIR = path.resolve(__dirname,'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',output: {
      path: BUILD_DIR,filename: 'bundle.js'
  },module: {
      loaders: [
          {
              test: /.jsx?/,include: APP_DIR,loader: 'babel'
          }
      ]
  }
};

module.exports = config;

最后，在package.json文件中的scripts节点下添加如下内容：

"scripts": {
    "test": "echo "Error: no test specified" && exit 1","dev": "webpack -d --watch","build": "webpack -p"
  },

现在可以运行命令npm run dev开始开发，这时webpack会监视源代码的改变，任何对源代码的修改都会触发重新打包的动作。

更多关于webpack和babel-loader的配置方面的内容请移步这里。本文不再多做介绍。

JSX和Babel

你可能已经注意到，我们使用的是.jsx后缀而不是js。JSX是ReactJs团队开发的一个JavaScript的扩展。点击这里查看更多关于JSX的内容。

使用ES6写第一个React组件

是不是已经等不及了。

先来看看项目结构：

project
|--src
      |--client
           |--app
           |--public
           |--index.html
|--.babelrc
|--package.json
|--webpack.config.js

在app目录下创建一个文件index.jsx作为React项目的入口文件。之后添加hello-world.jsx文件。在其中添加如下代码：

import React from 'react'; // 1

// 2
export default class HelloWorld extends React.Component {
    // 3
    render() {
        // 4
        return <h1>Hello from {this.props.phrase}</h1> } }

解释一下上面的代码：
1. 把React库import引入到React变量中。
2. 定义了一个我们自己的组件HelloWorld，这个组件继承（extends）自React.Component。注意：在类的前面还有关键字export default，在别的模块中import并使用HelloWorld组件。
3. 覆盖React组件的render方法。
4. render方法返回JSX定义的html元素，这个元素内部显示的文本通过解析this.props.phrase获得。

组合到一起

在之前已经创建好的index.js文件内添加如下内容：

import React from 'react';
import {render} from 'react-dom';

import HelloWorld from './hello-world';

class App extends React.Component {
    render() {
        return (<div> <HelloWorld phrase="ES2015" /> </div>); } } render(<App />,document.getElementById('app'));

打开index.html文件，如果你还没有创建这个文件的话，那么创建一个。目录位置参考前面的项目目录一节。在index.html文件中添加如下内容：

<html>
  <head>
    <meta charset="utf-8">
    <title>React & ES6</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

所需要的全部材料都有了。现在就可以用webpack打包了。运行命令npm run dev，稍后js代码就会转码，打包到bundle.js文件中了。

在浏览器中打开这个html文件。你就会看到运行结果了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!