react参考：https://www.cnblogs.com/lyraLee/p/11885487.html
sass参考：https://www.cnblogs.com/wuqilang/p/13371176.html（vscode安装live sass compiler和live server）
直接在页面中使用react.js
- 项目结构
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 加载 React。-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="./js/react.development.js" crossorigin></script>
<script src="./js/react-dom.development.js" crossorigin></script>
<script src="./js/babel.min.js"></script>
<!-- 编译好的style.css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>参看：https://www.cnblogs.com/lyraLee/p/11885487.html</div>
<div id="like_button_container"></div>
<div id="root"></div>
<!-- 加载我们的 React 组件。-->
<script src="like_button.js"></script>
<script type="text/babel">
//有状态组件
class MButton extends React.Component {
constructor(props) {
super(props)
this.state = { liked: false }
}
render() {
if (this.state.liked) {
return "you liked";
}
return (
<div>
<h5 style={{ color: 'red' }}>Hello, {this.props.name}</h5>
{/**<button onClick={this.setState({like:true})}>like</button>**/}
<button onClick={() => this.setState({ liked: true })}>Like</button>
</div>
);
}
}
//无状态组件
function Welcome(props) {
return <h5>Hello, {props.name}</h5>;
}
//组合
function PostHeader(props) {
return <h3 className={'title'}>{props.title}</h3>
}
function PostBody(props) {
return (
<div>
<p className={'content'}>{props.content}</p>
</div>
)
}
class Post extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div>
<PostHeader title={this.props.post.title} />
<PostBody content={this.props.post.content} />
</div>
)
}
}
</script>
<script type="text/babel">
const posts = [
{ id: 1, title: 'post1', content: 'content1' },
{ id: 2, title: 'post2', content: 'content2' },
{ id: 3, title: 'post3', content: 'content3' },
{ id: 4, title: 'post4', content: 'content4' },
{ id: 5, title: 'post5', content: 'content5' },
]
ReactDOM.render(
(<div>
<h5>home</h5>
<MButton name='La❤' />
<Welcome name='Ali' />
{/**单个演示**/}
<Post post={posts[0]} />
{/**列表演示**/}
{posts.map(item => {
return <Post post={item} key={item.id}/>
})}
</div>),
document.getElementById('root')
);
</script>
</body>
</html>
- js
//like_button.js
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
- scss
div{
.title{
color:red
}
.content{
color:peru;
}
}