在使用babel的项目中接入React 框架很简单，只需要加入React所依赖的Presets babel-preset-react. 安装react, react-dom, webpack 在项目根目录下执行下面命令，其中--save的含义是项目上线运行所需的包，即生产环境（--save-dev是开发环境所需的包）。

npm install react react-dom --save-devnpm install webpack --save-dev

• index.html

    
            
    
                 /* react DOM*/    
    
    

• index.js

import React, { Component } from 'react';import { render } from 'react-dom';render(    
    
     Hello React!
    
,    document.getElementById('app'));

• webpack-config.js

webpack.config.js复制代码const path = require('path');module.exports = {    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录    output: {        path: path.resolve(__dirname, '../dist'), // 输出的路径        filename: 'bundle.js'  // 打包后文件    },    module: {        rules: [            {                test: /\.(js|jsx)$/,                use: {                    loader: 'babel-loader',                    options: {                        presets: ['es2015', 'react'],                    }                },                exclude: /node_modules/            }        ]    }}

复制代码 这里如果在项目根目录直接进行webpack构建会报错,因为我们使用了react，react是使用jsx语法实现的，而jsx不能直接被浏览器识别和执行，所以这里需要引入Babel库进行转码(babel-preset-react)。

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --savebabel-loader: babel加载器babel-preset-es2015: 支持es2015babel-preset-react: jsx 转换成js

复制代码 在项目根目录下新建json文件.babelrc，将babel的配置单独提取出来。

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