Fork me on GitHub

搭建基于es6的react开发环境

安装Node.js与npm

Node.js 是javascript的运行时环境,npm 是javascript的包管理工具
安装成功后,在项目根目录运行npm init初始化当前项目

安装react,es6,babel

npm install -D react react-dom babel-preset-react babel-preset-es2015 babel-loader babel-core

.babelrc文件中配置babel:

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

安装webpack

Webpack 是一个前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工程化需要的各种功能.

安装 Webpack:npm install -g webpack

Webpack 使用一个名为 webpack.config.js 的配置文件,要编译 JSX,需先安装babel-loader

假设我们在当前工程目录有一个入口文件 src/index.js,React 组件放置在一个 components/ 目录下,组件被 src/index.js 引用,要使用 src/index.js,我们把这个文件指定输出到 dist/bundle.js,Webpack 配置如下:

var path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /.js|jsx$/, loaders: ['babel'] }
        ]
    }
};

resolve 指定可以被 import 的文件后缀。比如 Hello.jsx 这样的文件就可以直接用 import Hello from 'Hello' 引用。

loaders 指定 babel-loader 编译后缀名为 .js 或者 .jsx 的文件,这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。

直接编译: webpack
监听编译: webpack -d --watch

使用react

经过以上三步后,开发环境就搭建成功了,接下来体验一下react:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/javascript" src="dist/bundle.js"></script>
</html>

scr/index.js:

/**
 * Created by crains on 16/9/8.
 */

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

let [a, b, ...c] = [1, 3, 5, 7, 9];
console.log(c);

render(
    <h1>hello, react!</h1>,
    document.getElementById('content')
);

在项目根目录运行webpack编译js, 然后访问index.html, 看到hello, react!就说明成功了. enjoy react!!!

标签: 前端, react

添加新评论