React与ES6（一）开篇介绍

时间 2019-11-25

标签 react es6 开篇介绍栏目 React 繁體版

原文原文链接

React与ES6系列：javascript

ES2015（也就是ES6）带来了不少新的语言特性。好比：类、箭头方法、rest参数、promise、generator等不少。若是你对ES6还不是很熟悉的话能够看这里。html

可是浏览器对于ES6的支持还不是很好。你能够看看这个ES6兼容表。显而易见的是不一样浏览器对于ES6的兼容良莠不齐。因而就有人想把ES6的代码转成ES5的不就能够兼容了吗。java

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

准备开发环境

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

首先你须要安装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转码。webpack

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

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

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

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节点下添加以下内容：github

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

如今能够运行命令npm run dev开始开发，这时webpack会监视源代码的改变，任何对源代码的修改都会触发从新打包的动做。web

更多关于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>
    }
}

解释一下上面的代码：

把React库import引入到React变量中。
定义了一个咱们本身的组件HelloWorld，这个组件继承（extends）自React.Component。注意：在类的前面还有关键字export default，在别的模块中import并使用HelloWorld组件。
覆盖React组件的render方法。
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文件。你就会看到运行结果了。

1. 【React】- 一、React介绍
2. springcloud开篇介绍
3. Flutter----开篇介绍
4. ES6 与 React
5. React与前端：React家族介绍
6. es6简单介绍
7. ES6 之 Proxy 介绍
8. ES6语法介绍
9. iOS开发Swift篇—（一）简单介绍
10. Android 源码分析（一）开篇介绍
更多相关文章...
• 网站主机介绍 - 网站主机教程
• BASE原理与最终一致性 - NoSQL教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• PHP开发工具