react基本使用

基础使用-JSX语法

React开发的三个依赖包和作用

React：

• 作用：React 是 React 应用程序的核心库。它提供了用于构建用户界面的组件化开发模型，允许开发人员创建可重用的 UI 组件，并通过声明式的方式定义应用程序的用户界面。

ReactDOM：

• 作用：ReactDOM 是 React 应用程序的另一个重要部分，它负责将 React 组件渲染到实际的 DOM（文档对象模型）中。它使 React 组件能够在浏览器中显示，并处理与 DOM 相关的操作，例如事件处理和更新。

Babel（通常使用 Babel 相关插件，例如 @babel/preset-react）：

• 作用：Babel 是 JavaScript 编译器，它用于将新的 JavaScript 特性和语法转换为旧的浏览器可以理解的 JavaScript。对于 React，通常需要使用 Babel 的预设（preset）来支持 JSX 语法和其他特性。

React封装组件

// 1.定义App根组件，继承于React.Component
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            message: "Hello World"
        }
        // 对需要绑定的方法, 提前绑定好this
        this.btnClick = this.btnClick.bind(this)
    }
    // 组件方法(实例方法)
     btnClick() {
         // 内部完成了两件事情: 
         // 1.将state中message值修改掉 2.自动重新执行render函数函数
         this.setState({
             message: "Hello React"
         })
     }
    // 返回组件的UI结果，通常使用JSX语法
    render() {
        const { message } = this.state
        return (
            <div>
            	<h2>{message}</h2>
            	<button onClick={this.btnClick}>修改文本</button>
          	</div>
        )
    }
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

在进行函数绑定时，this关键字的绑定

// this绑定的问题
const app = new App()
const foo = app.btnClick
// 该方法中的this指向App
foo(); // this 默认绑定 => window 但是在严格模式下 => undefined
// Babel转义后默认为严格模式
function bar() {
  console.log("bar:", this); // undefined
}
bar()

列表数据的展示

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            movies: ["星际穿越", "流浪地球", "独行月球", "大话西游", "火星救援"]
        }
    }
    render() {
        // movies数组 => liEls数组
        const liEls = this.state.movies.map(movie => <li>{movie}</li>)
        return (
            <div>
            	<h2>电影列表</h2>
                <ul>{liEls}</ul>
            	<ul>
            		{this.state.movies.map(movie => <li>{movie}</li>)}
            	</ul>
          </div>
        )
    }
}