目录
1:利用vscode编译工具打开创建的项目(index.html是入口文件)
1:利用vscode编译工具打开创建的项目(index.html是入口文件)
在vscode中运行项目
2: react项目目录:
React是React的核心库
ReactDOM是与虚拟DOM相关的功能
import App from './App' :引入App组件
ReactDOM.render(<App />, document.getElementById('root'));把App组件渲染到root节点上
3:创建组件({}可以绑定数据)
1:创建
1:工厂无状态函数
2:es6的class
2:引用和调用:
1:引用:
2:调用:
3:Props和State的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class WebSite extends React.Component {
constructor() {
super();
this.state = {
name: "菜鸟教程",
site: "https://www.runoob.com"
}
}
render() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
}
class Name extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
}
class Link extends React.Component {
render() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}
ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>
</html>
4:绑定数据和绑定对象
4:react绑定属性(class和style)
1:class:class改为classname
2:style:
3:for换成htmlfor
4:react引入图片
1:引入本地图片
2:引入远程图片
5:循环数组
1:数组中是标签
2:在render中定制变量,然后再div中展示变量
3:直接在return中遍历数组
5:react事件和方法
1:定义方法和调用方法
2:在调用过程中传入参数(改变this的三种指向方法)
1:在调用时通过bind绑定this
run(){
alert(this.state.name)
}
<button onClick = {this.run.bind(this)}>按钮</button>
2:在构造函数中指定
在构造函数中:this.run = this.run.bind(this)
<button onClick = {this.run}>按钮</button>
3:通过箭头函数
run= () => {
alert(this.state.name)
}
<button onClick = {this.run}>按钮</button>