React

2024-07-20 07:00:48

搭建开发环境

create-react-app（创建项目）：npx create-react-app xxx（xxx 项目名）

解读项目目录

app.js

// 项目的根组件
// app被引入到index.js 被index.js里的核心代码 渲染到 public里的index.html里的root div上去
function App() {
  return (
    <div className="App">
     this is APP
    </div>
  );
}

export default App;

index.js

// 整个项目的入口
// 下面两个是react两个必要的核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入项目的根组件
import App from './App';

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

JSX

jsx：js+xml（html）

本质

jsx不是标准的js语法，浏览器不认识，需要通过解析工具（babel）做解析之后才能在浏览器中允许

想深入了解jsx （Babel · Babel (babeljs.io)）多看看区别呗

jsx中使用js表达式

{}

注意：仅支持表达式哦！！if语句、switch语句、变量声明属于语句不是表达式不允许出现在{}中

小练习

实现列表渲染
const a = [
  {name:'ju',age:12},
  {name:'j',age:1},
  {name:'u',age:2},
]

 {/* 渲染a li标签 */}
     <ul>
      {a.map(item =><li key={item.id}>{item.name}</li>)}
     </ul>

key的作用：提升列表更新性能

条件渲染

在react中，可以通过&&、三元表达式实现基础的条件渲染

const loading = false

可以根据函数调用的方式实现复杂的条件渲染

React基础的事件绑定

onClick={}

码农公寓