react速成 - 技术栈

项目目录

package.json文件：包含核心两个依赖（react、react-dom）和命令（start、bulid）

src：源码目录，开始之用的到index.js和App.js

index.js：是项目的入口，一切的运行起点

复制代码

// 项目入口


//导入核心库
import React from 'react';
import ReactDOM from 'react-dom/client';

//导入项目根组件
import App from './App';



//把App根组件渲染到id为root的dom节点上
//在public/index.html中
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <App />)

App.js：

复制代码

//项目根组件

//核心渲染路径 App--index.jx--publi/index.html(root)
function App() {
  return (
    <div className="App">
      this is App component
    </div>
  );
}

export default App;

什么是jsx

jsx的本质

jsx高频场景

1，jsx中使用js表达式

2，jsx中实现列表渲染

主要是使用map方法

3，jsx中实现条件渲染

下面是两种最简单的条件渲染

4，jsx中实现复杂条件渲染

实现方案：自定义函数+if判断语句

React基础事件绑定

事件处理程序也是回调函数

回调函数

回调函数是指一个作为参数传递给另一个函数的函数，这个函数会在特定事件发生或某个操作完成后被调用。

工作原理

定义一个函数（回调函数）
将这个函数作为参数传递给另一个函数
当特定条件满足或事件发生时，接收函数会"回调"这个函数

// 定义一个回调函数
function greeting(name) {
console.log('Hello ' + name);
}

// 定义一个接收回调函数的函数
function processUserInput(callback) {
const name = prompt('Please enter your name.');
callback(name); // 在这里调用回调函数
}

// 使用回调函数
processUserInput(greeting);

使用事件对象参数e

下面e不是固定的，通常规范的叫e

传递自定义参数

jack就会传递到name的位置。下面一定是箭头函数的写法，而不是单纯函数

既想要事件对象e还要自定义参数，怎么办？

注意形参顺序保持一致