React与ES6（一）开篇介绍

来源：互联网发布：recyclerview源码分析编辑：程序博客网时间：2024/05/17 23:48

React与ES6系列：
1. React与ES6（一）开篇介绍
2. React和ES6（二）ES6的类和ES7的property initializer
3. React与ES6（三）ES6类和方法绑定
4. React与ES6（四）ES6如何处理React mixins

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// 2export 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文件。你就会看到运行结果了。

0 0