table of Contents
1: Open the project using the vscode compiler tool created (index.html is the entry file)
3: Create the component ({data} can bind)
3: The difference between the State and Props
4: data binding and binding objects
4: react binding properties (class and style)
1: class: class classname instead
1: introduction of the local picture
2: the introduction of remote image
2: Custom variables render, and then display the variables in div
3: traverse the array directly in return
1: Define methods and method calls
2: parameters passed during the call (to change the three kinds of points of this method)
1: When calling this by binding bind
3: Changing the value of state
2: Dynamic Change parameter value
1: Open the project using the vscode compiler tool created (index.html is the entry file)
In vscode to run projects
2: react project directory:
React React is a core library
ReactDOM is associated with the virtual DOM functions
import App from './App': assembly incorporated App
ReactDOM.render (<App />, document.getElementById ( 'root')); App assembly is rendered to the root node
3: Create the component ({data} can bind)
1: Create
1: Plant Stateless function
2: es6 of class
2: references and call:
1: Quote:
2: Call:
3: The difference between the State and Props
<!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: data binding and binding objects
4: react binding properties (class and style)
1: class: class classname instead
2：style：
3: for into htmlfor
4: react introducing Pictures
1: introduction of the local picture
2: the introduction of remote image
5: Loop Array
1: An array is label
2: Custom variables render, and then display the variables in div
3: traverse the array directly in return
5: react events and methods
1: Define methods and method calls
2: parameters passed during the call (to change the three kinds of points of this method)
1: When calling this by binding bind
run(){
alert(this.state.name)
}
<button onClick = {this.run.bind(this)}>按钮</button>
2: Specifies the constructor
In the constructor: this.run = this.run.bind (this)
<button onClick = {this.run}>按钮</button>
3: function by an arrow
run= () => {
alert(this.state.name)
}
<button onClick = {this.run}>按钮</button>
3: Changing the value of state
1: Static change
2: Dynamic Change parameter value
