<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></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="app">
</div>
<script type="text/babel">
/*注意，原生 HTML元素名以小写字母开头，而自定义的 React类名以大写字母开头，
比如 HelloMessage不能写成 helloMessage;
除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错*/
//函数封装组件
function NewComponent(props) {
return <h1>函数封装的组件!</h1>;
}
//ES6创建组件
class Comfill extends React.Component {
render() {
return <h1>es6创建的组件!</h1>;
}
}
//向组件传递参数
function HelloMessage(props) {
return <h1>你好! {props.name}!</h1>;
}
//复合组件
function App() {
return (
<div>
<NewComponent/>
<Comfill/>
<HelloMessage name="react"/>
</div>
);
}
//const element3 = <HelloMessage name="react"/>; /*用户自定义的组件*/
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</body>
</html>
