浏览器直接运行react

平时想写一个简单的react demo，需要使用create-react-app来初始一个项目，或者使用其他脚手架初始项目，属实有些小题大做；而使用vue的时候，新建一个html文件，然后外链vue包文件，立马就能像使用jquery一样开始写vue组件，非常的方便；

那么是否可以在html中直接引用react.js，然后写demo呢？ 答案是可以的。

vue 组件中的template部分能够直接在html中运行使用，其原因是vue官方提供模板编译功能，按照文档，只要选择完整版的vue版本，就可以直接在浏览器中允许了。

对比之下浏览器不能运行jsx，react包内部也没有提供编译器; 好在babell和babel插件处理提供了这样的工具，所以问题就变成了如何在浏览器端运行babel；babel的官方文档提供了在线使用playground, 看看它是怎么做到的，直接参照来就行了。

通过查看network发现了这个js文件https://unpkg.com/@babel/standalone@7.17.11/babel.min.js, 看名字就能猜到正是我们需要的，接下来就是看怎么用了。

在babel官网查到使用文档 https://babeljs.io/docs/en/babel-standalone， 看起来蛮简单，于是就有了下面的代码，在html文件中直接运行

<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.18.4/babel.min.js"></script>
<script type="text/babel">
  class App extends React.Component {
    constructor() {
      super()
      this.state = {
        num:1
      }
    }
    add=()=> {
      this.setState({
        num: this.state.num + 1
      })
    }
    render() {
      return <button onClick={this.add}  >
        {this.state.num}
      </button>
    }
  }
  window.onload = function () {
    ReactDOM.render(<App />, document.querySelector('#root'))
  }
</script>

需要注意到script中的 type="text/babel"是为了给babel使用的，所以不能省略。

最后在浏览器的截图如下：