React开始：直接在网站中使用React.js

开始

React 是一个用于构建用户界面的 JavaScript 库。诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性。不管你是想体验下 React，用它给简单的 HTML 页面增加一点交互，还是要开始一个完全由 React 驱动的复杂应用。

直接在网站中使用React.js

我们可以像普通库一样，直接在html中用过script标签引入js文件的方式使用。

复制代码

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

引入后我们就可以开始使用React了。

准备一个元素容器：

复制代码

    <div id="like_button_container"></div>

通过React添加元素组件并绑定事件。

复制代码

var domContainer = document.querySelector("#like_button_container");
 ReactDOM.render(React.createElement(
    "button", {
        onClick: function onClick() {
            alert('绑定时间函数！')
        }
    },
    " Like "
), domContainer);

如果你想使用jsx语法，有两种方式：

一是直接script标签引入babel：

复制代码

  <script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.js"></script>

然后是直接使用jsx语法：

复制代码

   const domContainer = document.querySelector("#like_button_container")
        ReactDOM.render((
            <button onClick = { () => this.setState({liked: true})} > Like </button>
        ), domContainer)

二是通过babel，直接把对应的jsx语法转发成js语法，然后浏览器直接访问转化后的js。(确保你安装了nodejs)

安装babel：

复制代码

npm init -y
npm install babel-cli@6 babel-preset-react-app@3

使用:

复制代码

npx babel --watch src --out-dir . --presets react-app/prod
// npx babel --watch 待处理目录 --out-dir 输入目录 --presets 预设类型

然后在待处理的目录里面穿件js或jsx文件，当你编辑的时候，会自动转化成js``react语法放到输入目录中，html中直接引入输入目录中的文件既可。

需要注意是，官方提供的例子中使用this.setState,必须是React组件才能使用这个方法，而上面的是直接渲染一个DOM集合所以不能这个方法，会报错，这里的this指向window。

渲染一个React组件：

复制代码

// 定义组件
const e = React.createElement;
const domContainer = document.querySelector("#like_button_container")
class MButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            liked: props.state
        }
    }
    render () {
        return <div >
            <button onClick={
                () => {
                    this.setState({
                        liked: !this.state.liked
                    })
                }
            } > Like </button>
            <p> {
                this.state.liked ? '否' : '是'
            } </p> </div>
    }
}
const ReactVm = ReactDOM.render(< MButton  />, domContainer)
console.log(ReactVm)

这里的ReactVm是React实例，但是如果只是渲染dom，这里是一个dom元素。