这是我参与【第五届青训营】笔记创作活动的第3天
一、React是什么
React：用于构建用户界面的 JavaScript 库；
React的官网文档：zh-hans.reactjs.org/
-
是声明式编程
-
组件化开发
-
多平台适配
二、React的开发依赖
2.1.依赖三个库
依赖三个库
- react：包含react所必需的核心代码
- react-dom: react渲染在不同平台所需要的核心代码
- babel：将jsx转换成React代码的工具
注意：
react包中包含了react web和react-native所共同拥有的核心代码。
react-dom针对web和native所完成的事情不同：
- web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
- native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。
babel：
◼ babel是什么呢？
- Ba bel ，又名 Babel.js。
- 是目前前端使用非常广泛的编译器、转移器。
- 比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。
- 那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。
◼ React和Babel的关系：
- 默认情况下开发React其实可以不使用babel。
- 但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
- 那么我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement。
2.2.依赖引入
- 通过CDN引入
- 下载后，添加本地依赖
- npm
三、hello React案例
3.1.第一个hello React案例
- 添加type="text/babel"：让babel解析jsx的语法
- ReactDOM.createRoot函数
-
- 用于创建一个React根，之后渲染的内容会包含在这个根上
- 参数： 将渲染的内容，挂载到某一个html元素上去
- root.render函数
-
- 参数:要渲染的根组件
- 通过{}语法引入外部的变量或表达式
<script type="text/babel">
const root = ReactDOM.createRoot(document.querySelector("#root"));
// 1.将文本定义成变量
let message = "hello World";
// 2.监听按钮的点击
function btnClick() {
// 1.修改数据
message = "hello React";
// 2.重新渲染界面
rootRender();
}
// 3.封装一个渲染函数
function rootRender() {
root.render(
<div>
<h2>{message}</h2>
<button onClick={btnClick}>修改文本</button>
</div>
);
}
rootRender();
</script>
3.2.hello React组件化开发
<script type="text/babel">
// 使用组件进行重构代码
// 类组件和函数式组件’
class App extends React.Component {
// 组件数据
constructor() {
super();
this.state = {
message: "Hello World",
name: "kk",
age: 18,
};
// 对需要绑定的方法，提前绑定好this
this.btnClick = this.btnClick.bind(this);
}
// 组件方法(实例方法)
btnClick() {
// 内部完成了两件事情
// 1，将state中message值修改掉， 2.自动重新执行render函数
this.setState({
message: "hello React",
});
}
// 渲染内容render方法
render() {
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={this.btnClick}>修改文本</button>
</div>
);
}
}
// 将组件渲染到界面上
const root = ReactDOM.createRoot(document.querySelector("#root"));
// App根组件
root.render(<App />);
</script>
- 封装组件
- 以类的方式封装组件(类名大写，组件名称大写)
- render函数返回当前的jsx内容
- 数据依赖
- 数据定义在当前对象的state中
- this.state={} 括号里面是定义的数据
- 数据变化时，调用this.setState更新数据，并且通知React进行upDate操作，（进行update操作时，就会重新调用render函数，使用最新的数据，来渲染页面）
- 事件绑定
- onClick
3.3.案例
计数器案例
<script type="text/babel">
// 1.创建root
const root = ReactDOM.createRoot(document.querySelector("#root"));
// 封装组件
class App extends React.Component {
constructor() {
super();
this.state = {
counter: 20,
};
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
}
render() {
const { counter } = this.state;
return (
<div>
<h2>当前计数: {counter}</h2>
<button onClick={this.increment}>+1</button>
<button onClick={this.decrement}>-1</button>
</div>
);
}
increment() {
this.setState({
counter: this.state.counter + 1,
});
}
decrement() {
this.setState({
counter: this.state.counter - 1,
});
}
}
// 2，渲染组件
root.render(<App />);
</script>
电影列表案例——进行列表数据的展示
- for循环
- map
<script type="text/babel">
const root = ReactDOM.createRoot(document.querySelector("#root"));
class App extends React.Component {
constructor() {
super();
this.state = {
movies: ["千与千寻", "你的名字", "烟花", "天气之子"],
};
}
render() {
// 1、for循环
// const arr = [];
// for (let i = 0; i < this.state.movies.length; i++) {
// const item = this.state.movies[i];
// const liItem = <li>{item}</li>;
// arr.push(liItem);
// }
// 2.map
// const arr = this.state.movies.map((item) => <li>{item}</li>);
return (
<div>
<h2>电影列表</h2>
<ul>
{this.state.movies.map((item) => (
<li>{item}</li>
))}
</ul>
</div>
);
}
}
root.render(<App />);
</script>
