React基础

React特点

• 声明式编程
• 组件化开发

• 多平台适配

  React的开发依赖

• react

• react-dom
• babel: jsx转换为React.createElement ```javascript

```javascript
<script type="text/babel">
  // react18之前
  ReactDOM.render(<App/>, document.querySelector('#root'))
    // react18之后
    const app = ReactDOM.createRoot(document.querySelector('#app'))
  app.render(<App/>)
  const root = ReactDOM.createRoot(document.querySelector('#root'))
  root.render(<App/>)
</script>

hello react案例

<script type="text/babel">
  let message = 'hello world'
  function btnClick() {
    message = 'hello react'
    render()
  }
  const root = ReactDOM.createRoot(document.querySelector('#root'))
  render()
  function render() {
    root.render(
    (
      <div>
        <h2>{message}</h2>
          <button onClick={btnClick}>修改文本</button>
      </div>
    )
    )
  }
</script>

组件化开发

1. 类组件
   • 定义一个类，并且继承**React.Component**
   • 实现当前组件的**render**方法
2. 函数式组件 ```jsx // 内聚在一起 class App extends React.Component { constructor() { super() // 维护数据 this.state = { message: ‘hello world’, name: ‘jinbudaily’, age: 21 } } // function btnClick() {console.log(this)} // undefined btnClick = () => { this.setState({ message: ‘hello react’ }) } // 渲染内容 render() { return (

    <h2>{this.state.message}</h2>
    // this.btnClick
    <button onClick={this.btnClick}>修改文本</button>

   ) } }

// 将组件渲染到界面上 const root = ReactDOM.createRoot(document.querySelector(“#root”)) // App根组件 root.render()

```javascript
this.btnClick.bind(this)
this.btnClick = this.btnClick.bind(this)

列表展示

this.state.array.map(item => <li>{item}</li>)

JSX

1. jsx结构中只能有一个根元素
2. jsx结构中通常会包裹一个(), 把jsx当成一个整体
3. jsx可以是单标签，也可以是双标签，但是单标签必须闭合。
4. jsx注释：{/* 注释内容 */}
5. jsx显示内容：jsx作为子元素时如何显示
   1. number、string、array类型直接显示
   2. undefined、null、boolean类型显示为空(转为字符串显示）
   3. object类型不能作为子元素进行显示
6. 可以插入对应的表达式 { firstName + ' ' + lastName }
7. 可以插入三元运算符{ age >= 18 ? '成年人' : '未成年人' }
8. 可以调用方法获取结果{this.func()}
9. 绑定属性<div style={styleObj}></div>

   <h2 className={classList.join(" ")}>中秋快乐</h2>

   <h2 style={{color: 'red', fontSize: '30px'}}>中秋快乐</h2>

   事件绑定

   ```jsx // es6 class fields btn2Click = () => { console.log(this) }

默认传递`**event参数**`
```jsx
<button onClick={(event) => this.btnClick(event, 'nannan', 20)}>按钮</button>

条件渲染

• 使用if进行条件判断，根据条件给变量赋值不同的内容
• 三元运算符

• &&逻辑与运算符

  {/* 场景: 当某一个值, 有可能为undefined时, 使用&&进行条件判断 */}
  <div>
  { friend && <div>{friend.name + " " + friend.desc}</div> }
  </div>

  列表渲染

  展示列表最多的就是使用数组的**map高阶函数**

  this.state.students.filter(item => item.age > 18).slice(0,2).map((student,index) => return ())

  **！！！请不要忘记列表渲染中的key属性。**

  JSX本质

  jsx是**React.createElement(component,props,...children)**函数的语法糖。

• 参数一：type，当前ReactElement的类型。

• 参数二：config: jsx中config以对象的属性和值的形式存储。
• 参数三：存放在标签中的内容，以children数组的方式进行存储。

  虚拟DOM

  React利用React.createElement对象组成了一个JavaScript对象树，这个对象树就是**虚拟DOM**
**ReactDOM.render**让虚拟DOM和真实DOM同步起来，这个过程叫做协调

脚手架

脚手架可以帮助我们快速生成项目的工程化结构。
**npm install create-react-app -g**
create-react-app 项目名称
cd 项目名称
**npm start**
**npm run eject**

基本目录

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector('#app'))
root.render(<App/>)

function App() {
  return (
    <div>
      App组件
    </div>
  );
}
export default App;