比较了半天VUE、Angular、React，最终选择React，下面从几个例子开始React的学习，先从单个的index.html，引用react.js开始
一.最简单的纯JS的代码
<!DOCTYPE html>
<html>
<head>
<title>react直接引用js</title>
<script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
window.onload = function() {
var h1 = React.createElement("h1", null, "hello REACT!");
ReactDOM.render(h1, document.getElementById("root"));
};
</script> </body>
</html>
二、使用JSX的语法
JSX是React提供的语法，React会把JSX编译成JS，这个编译器使用了一个组件babel
<!DOCTYPE html>
<html>
<head>
<title>react直接引用js</title>
<script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
window.onload = function() {
ReactDOM.render(
<h1>Hello, REACT!</h1>,
document.getElementById("root")
);
};
</script>
</body>
</html>
三、通过组件的方式添加元素
<!DOCTYPE html>
<html>
<head>
<title>react直接引用js</title>
<script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Welcome extends React.Component{
render(){
return <h1>Hello, REACT!</h1>
}
} window.onload = function() {
ReactDOM.render(<Welcome />,
document.getElementById("root")
);
};
</script>
</body>
</html>
四、给组件添加属性功能
<!DOCTYPE html>
<html>
<head>
<title>react直接引用js</title>
<script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}!</h1>
}
} window.onload = function() {
ReactDOM.render(<Welcome name='react16.3'/>,
document.getElementById("root")
);
};
</script>
</body>
</html>