react项目搭建、基础知识

前言

教学内容来源于黑马

黑马程序员前端React18入门到实战视频教程，从react+hooks核心基础到企业级项目开发实战

项目搭建

创建项目

pnpm create vite

选择框架

选择语言和构建

安装依赖并运行

pnpm install   
pnpm run dev

运行成功

基础知识

文件

main.jsx 项目的入口文件

// StrictMode在开发模式下默认开启严格模式，用于发现程序中的问题
import { StrictMode } from 'react'
// createRoot用于创建渲染器
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
// 创建渲染根节点，渲染react应用程序
createRoot(document.getElementById('root')).render(<StrictMode><App /></StrictMode>,
)

App.jsx 应用程序的根组件

import { useState } from 'react'
import './App.css'function App() {return (<div>11</div>)
}export default App

JSX

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，它允许你在 JavaScript 中书写类似于 HTML 的标签。JSX 是 React 生态系统中的一个重要组成部分，因为它使得编写组件变得更加直观和易于阅读。

const message = "Hello World";
function App() {return <div>{message}</div>;
}export default App;

与vue中的{{}}不同，react使用{}来解析变量、表达式

使用js表达式

在jsx中使用{}识别JavaScript中的表达式，比如常量、函数调用等

const message = "Hello World";const getName = () => {return "函数";
};const user = {name: "张三",age: 18,
};
function App() {return (<div>{/* 使用引号传递字符串 */}<div>{"这是一个字符串"}</div>{/* 识别变量 */}<div>{message}</div>{/* 函数调用 */}<div>{getName()}</div>{/* 使用对象 */}<div>名称：{user.name}，名称{user.age}</div></div>);
}

列表渲染

const userList = [{id: 1,name: "张三",age: 18,},{id: 2,name: "李四",age: 19,},
];function App() {return (<div><ul>{userList.map((e) => {return (<li key={e.id}>姓名：{e.name}，年龄：{e.age}</li>);})}</ul></div>);
}

与vue相似，列表渲染时也需要一个唯一的key值，字符串或者是数字

条件渲染

• 简单判断

const isLogin = false;function App() {return (<div>{/* 方式1：三元表达式 */}<div>是否登录：{isLogin ? "已登录" : "未登录"}</div>{/* 方式二，逻辑与 */}<div>是否登录：{isLogin && "已登录"}{!isLogin && "未登录"}</div></div>);
}

• 复杂判断

const articleType = 1; // 0、1、2// 根据文章类型返回不同的模板
const getArticleTemplate = (type) => {if (type == 0) {return <div>我是文章模板1</div>;} else if (type == 1) {return <div>我是文章模板2</div>;} else {return <div>我是文章模板3</div>;}
};function App() {return <div>{getArticleTemplate(articleType)}</div>;
}

事件绑定

const handleClick = () => {alert("被点击了")
}function App() {return (<div><button onClick={handleClick}>按钮</button></div>)
}

使用事件对象参数

const handleClick = (e) => {console.log("事件对象：",e)
}function App() {return (<div><button onClick={handleClick}>按钮</button></div>)
}

传递自定义参数

const handleClick = (name) => {console.log("参数：",name)
}function App() {return (<div><button onClick={()=>handleClick('点击了')}>按钮</button></div>)
}

同时传递事件对象和自定义参数

const handleClick = (name,e) => {console.log("参数：",name,e)
}function App() {return (<div><button onClick={(e)=>handleClick('点击了',e)}>按钮</button></div>)
}

组件

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可

// 自定义组件
const MyButton = ()=>{const handleClick = (e)=>{console.log('点击了',e)}return <button onClick={handleClick}>点击</button>
}function App() {return (<div><MyButton></MyButton></div>)
}