注意事项：
- ReactDOM.render 方法接受两个参数:一个虚拟 DOM 节点和一个真实 DOM 节点， 作用是将虚拟 DOM 挂载到真实 DOM。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id = "test"></div>
<script type="text/babel">
ReactDOM.render(
<span>我要修改这个内容!</span>,
document.getElementById('example')
);
</script>
<script type = "text/babel">
ReactDOM.render(
// <h1>我是一个测试数据</h1>
<p>我是一个段落</p>,
document.getElementById('test')
);
</script>
</body>
</html>
- React 组件语法
- 掌握 React 组件的基本写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyTitle extends React.Component {
render() {
return <h1>Hello World</h1>;
}
};
ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);
</script>
</body>
</html>
3.React 组件的参数 将字体的颜色设置为红色
- 学会向 React 组件传参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyTitle extends React.Component {
render() {
return <h1 style={{color: this.props.color}}>Hello World</h1>;
}
};
ReactDOM.render(
<MyTitle color="red" />,
document.getElementById('example')
);
</script>
</body>
</html>
- React 组件的状态
- 学会通过状态变动，引发组件的重新渲染。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyTitle extends React.Component {
constructor(...args) {
super(...args);
this.state = {
name: '访问者'
};
}
handleChange(e) {
let name = e.target.value;
this.setState({
name: name
});
}
render() {
return <div>
<input type="text" onChange={this.handleChange.bind(this)} />
<p>你好，{this.state.name}</p>
</div>;
}
};
ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);
</script>
</body>
</html>
5.React 组件实战
- 学会自己写简单的 React 组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyTitle extends React.Component {
constructor(...args) {
super(...args);
this.state = {
text: 'World'
};
}
handleClick() {
this.setState({
text: 'Clicked'
});
}
render() {
return <h1 onClick={this.handleClick.bind(this)}>
{'Hello ' + this.state.text}
</h1>;
}
};
ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);
</script>
</body>
</html>
6.React 组件的生命周期
- 掌握钩子方法的基本用法
- 掌握组件如何通过 Ajax 请求获取数据，并对数据进行处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="jquery.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyList extends React.Component {
constructor(...args) {
super(...args);
this.state = {
loading: true,
error: null,
data: null
};
}
componentDidMount() {
const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
$.getJSON(url)
.done(
(value) => this.setState({
loading: false,
data: value
})
).fail(
(jqXHR, textStatus) => this.setState({
loading: false,
error: jqXHR.status
})
);
}
render() {
if (this.state.loading) {
return <span>Loading...</span>;
} else if (this.state.error !== null) {
return <span>Error: {this.state.error}</span>;
} else {
/* 你的代码填入这里 */
return (
<div>
<p>API 数据获取成功</p>
<p>改写代码，将结果显示在这里</p>
</div>
);
}
}
};
ReactDOM.render(
<MyList/>,
document.getElementById('example')
);
</script>
</body>
</html>
