前言

教学内容来源于黑马

黑马程序员前端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>
  )
}