1). React地址

ReactJS官网地址
Github地址

2). 搭建环境
npm install -g bower
img_9959abe6795e6fb252022e3758dcf5e6.png
图1.png
  • bower安装react
bower install react
img_7e356415a25743cd2fa3a94a105d0f24.png
图2.png
  • bower安装能够将JSX 语法转为JavaScript 语法的工具babel
bower install babel
img_bd881fc098a0994aa47f6736afd796c0.png
图3.png
3). 代码编写
<!--suppress ALL -->
<html>
<head>
    <meta charset="utf-8">
    <title>学习React！！</title>
</head>
<body>
<div id="app"></div>
<script src="libs/bower_components/react/react.development.js"></script>
<script src="libs/bower_components/react/react-dom.development.js"></script>
<script src="libs/bower_components/babel/browser.js"></script>
<script type="text/babel">
    // 创建是秃头
    class MessageBox extends React.Component {
        alertMe() {
            alert('你刚才点了我一下。。。。');
        }

        render() {
            return (<h2 onClick={this.alertMe}>你好世界！！！</h2>)
        }
    }
    // 渲染
    ReactDOM.render(<MessageBox/>, document.getElementById('app'), function () {
        console.log('渲染完成啦！！');
    });
</script>
</body>
</html>
4). 效果
img_59bab2119f46e8f3b2a6081b8f2b3aaf.gif
效果图.gif