推荐教程:http://react.yubolun.com/tutorial/tutorial.html
https://me.csdn.net/daxiazouyizou
http://www.runoob.com/react/react-install.html
在线编辑器(无需安装):https://codepen.io/gaearon/pen/gWWZgR?editors=0010
React 是一个用于构建用户界面的 JAVASCRIPT 库。React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架。JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
参考:https://blog.csdn.net/daxiazouyizou/article/details/79748078
所以我们需要新建一个js文件,然后js文件中ReactDOM.render函数中有一行固定的代码:document.getElementById('root')。就是将其中的内容渲染到上文中讲的index.html中id为“root”的标签中。
这里可以直接在app.js写我们的js代码。
理由:
示范编写helloworld:
App.js文件:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
像下面这样的代码中,element、return中必须有且仅有一个父标签,如div,没有父标签,是无法正常显示。
const element =(
<div>
<h1>Hello, world</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
还可以这样写:
class Welcome extends React.Component {
render() {
return(
<div>
<h1>Hello,world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(<Welcome/ >,document.getElementById("root"));
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
这里通过调用ReactDOM.render()
方法来改变输出:设置定时器执行render方法。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
setInterval(
() => this.tick(),
1000
);
}
// componentWillUnmount() {
// clearInterval(this.timerID);
// }
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
通过this.setState()
来更新组件局部状态。浏览器每秒钟调用 tick()
方法。 在其中,Clock
组件通过使用包含当前时间的对象调用 setState()
来调度UI更新。 通过调用 setState()
,React 知道状态已经改变,并再次调用 render()
方法来确定屏幕上应当显示什么。 这一次,render()
方法中的 this.state.date
将不同,所以渲染输出将包含更新的时间,并相应地更新DOM。
按钮交互:
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
表单:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
//阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。意思是,当点击提交按钮,表单会提交,此时填写的文本框会自动清空。所以这里的默认行为就是文本框的清除。我们要阻止这个事件,保留文本框的内容一直显示
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
点击“修改”按钮,value一栏显示Name的值;当修改Name一栏,value自动清空:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: '',value2:''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value,value2:''});
// this.setState({value2: ''});
}
handleSubmit(event) {
this.setState({value2: this.state.value});
//阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。意思是,当点击提交按钮,表单会提交,此时填写的文本框会自动清空。所以这里的默认行为就是文本框的清除。我们要阻止这个事件,保留文本框的内容一直显示
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="修改" />
<br />
value:
<input type="text" value={this.state.value2} />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
react请求接口4种方法: