babel + browserify

npm install babel-cli babel-preset-2015babel-preset-react --save-dev
npm install browserify --save-dev
// .babelrc 通过cli创建 touch .babelrc
{
  "presets": ["es2015","react"]
}
// main.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
    <h1>h1</h1>,
    document.querySelector('#root')
)

// 打包
babel main.js -o main_es5.js
browserify main_es5.js -o bundle.js
// 最后
<script src="bundle.js"></script>

jspm

需开启一个本地服务器

npm install gulp -g
npm install gulp gulp-connect --save-dev

// Gulpfile.js
let gulp = require('gulp'),
    connect = require('gulp-connect');

gulp.task('connect',()=>{
    connect.server({
        livereload: true
    })
})
gulp.task('default',['connect'])

$_> gulp

// 安装jspm
npm install -g jspm
// 初始化
jspm init -y
// 安装模块
jspm install react
jspm install npm:react-dom

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
 <div id="app"></div>
 
</body>
<!-- 导入system.js-->
<script src="jspm_packages/system.js"></script>
<!-- 导入config.js-->
<script src="config.js"></script>
<script>
    System.import('./app/main');
</script>
</body>
</html>

// app/main.js
import React from 'react';
import ReactDom from 'react-dom' ;
ReactDom.render(
  <h1>hello jspm</h1>,
document.getElementById('app')
) ;

文件引入方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
        // 这里写
        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>