第一个React程序
Hello React
-
React开发依赖于三个库 ①react ②react-dom ③babel
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>`<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-
在写 React 的 script 代码中，需要添加
type="text/babel" -
引入的包中有一个重要的对象
ReactDOM，有一个重要方法ReactDOM.createRoot(el)，用于创建一个 react 根，之后渲染的内容包含在这个根中。el：渲染的内容挂载到哪个 HTML 元素上 -
root.render(html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="/lib/react.js"></script>
<script src="/lib/react-dom.js"></script>
<script src="/lib/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let message = 111;
const btnClick = () => {
message = -message;
_render();//需要手动渲染
};
const root = ReactDOM.createRoot(document.querySelector("#root"));
_render();
function _render() {
root.render(
<div>
<h2>{message}</h2>
<button onClick={btnClick}>点击修改</button>
</div>
);
}
</script>
</body>
</html>
组件化开发
数据、方法、渲染看起来很分散，我们希望将它们集合到一起。
React的组件分为两种：
- 类组件（前期学习）
- 函数组件（后期学习）
封装成组件之后，我们将数据划分为两类：
- 数据改变影响页面渲染
- 数据改变不影响页面渲染
事件绑定
- 回顾：this的绑定问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="/lib/react.js"></script>
<script src="/lib/react-dom.js"></script>
<script src="/lib/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
//ES6Class中的代码都是严格模式
//babel会把代码转换成严格模式
class App extends React.Component {
//数据
constructor() {
super();
this.state = {
mesg: "HHHH",
};
this.btnClick = this.btnClick.bind(this);
}
//方法
btnClick() {
//前面没有function
//下面的语句会自动渲染页面
this.setState({
//this 的指向问题，默认为 undefined
mesg: "ZZZZ",
});
}
//渲染
render() {
// 必须用this
return (
<div>
<h2>{this.state.mesg}</h2>
<button onClick={this.btnClick}>按钮</button>
</div>
);
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
_render();
function _render() {
root.render(<App />);
}
</script>
</body>
</html>
数组循环
- 回顾：数组高阶函数 map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="/lib/react.js"></script>
<script src="/lib/react-dom.js"></script>
<script src="/lib/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super();
this.state = {
movies: ["独行月球", "流浪地球", "火星救援"],
};
}
render() {
return (
<div>
<ul>
{this.state.movies.map((item) => (
<li>{item}</li>
))}
</ul>
</div>
);
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
_render();
function _render() {
root.render(<App />);
}
</script>
</body>
</html>
计数器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="/lib/react.js"></script>
<script src="/lib/react-dom.js"></script>
<script src="/lib/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}
render() {
return (
<div>
{this.state.count}
<div>
<button onClick={this.increase.bind(this)}>+1</button>
<button onClick={this.decrease.bind(this)}>-1</button>
</div>
</div>
);
}
increase() {
this.setState({
count: this.state.count + 1,
});
}
decrease() {
this.setState({
count: this.state.count - 1,
});
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
_render();
function _render() {
root.render(<App />);
}
</script>
</body>
</html>