项目目录

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);