凯的个人博客

react基础

4/22/2024 react

# react 项目搭建

官网地址：https://reactjs.org/

中文官网：http://doc.react-china.org/ 【弃用】

官方脚手架： https://www.npmjs.com/package/create-react-app

# 1.项目快速搭建工具 脚手架工具

脚手架 ： 基于react 做了公共目录的封装 入口文件（主模块），通过脚手架 创建项目 不用自己 再去弄 公共的目录文件 等等。

创建项目的速度非常快

react 脚手架： create-react-app vite

# 1.全局安装脚手架 create-react-app

nvm --管理node 版本工具 https://www.gotang.cn/pages/b349c2/#_1-2-%E9%80%9A%E8%BF%87nvm%E5%AE%89%E8%A3%85

node版本：>=16.x

yarn 快速安装三方包的工具 和 npm相似

node: 16.16.0

nvm  install  node版本号   #下载对应的node版本 到本地
nvm use  node版本号  # 使用这个版本的node
npm install  三方包包名@版本号  -g   -D        # -g 全局安装：一台电脑只需要安装一次 可以一直反复使用
                                          # -D --save-dev  安装只需要在开发环境使用的三方包（编译代码的三方包 babel.js 将ES6编译为ES5）
                                       #@版本号 下载固定版本的三方包 
npm install                               #根据项目 package.json 三方包说明文件 一次性将所有三方包安装
npm run 自定义命令                         #可以根据package.json 中配置的自定义命令 启动项目 其他特定操作
npm uninstall 三方包包名                   #卸载三方包 


npm install yarn -g     #安装yarn 

yarn add 三方包包名@版本号  global -D   #global 全局安装：一台电脑只需要安装一次 可以一直反复使用
yarn remove 三方包包名                  #卸载三方包
1
2
3
4
5
6
7
8
9
10
11
12
13
14

全局安装的三方包 推荐使用npm

项目内部的三方包 推荐使用 yarn

# 安装脚手架 工具 vite

官网： https://cn.vitejs.dev/
1

# 创建项目

yarn create vite 项目名称 --template 项目模板（vue react vue-ts react-ts）
或
npm create vite 项目名称 --template 项目模板（vue react vue-ts react-ts）
1
2
3

# 运行项目

  • 下载项目所需的所有三方包
yarn 
或
npm  install
1
2
3
  • 运行项目
yarn  dev
或 
npm run dev
1
2
3

# main.jsx

// 导入 React 对象===react 语法核心库（react 的操作 封装了函数）
import React from 'react'
// 导入 React 操作 dom节点的 核心库-将jsx 渲染到页面
import ReactDOM from 'react-dom/client'
//导入根组件 
import App from './App.jsx'

// 全局样式
import './index.css'

// 获取了页面中 #root 节点
// 将获取到的 APP 根组件下 所有的 虚拟dom节点 通过 render方法 生成真实dom   将虚拟-->真实dom
//通过ReactDOM.createRoot()将 已经生成的真实dom 输出到 对应页面节点上    将真实 渲染到页面的 #root上
ReactDOM.createRoot(document.getElementById('app')).render(
    //代码严格模式关闭 
  //<React.StrictMode>
    <App />
  // </React.StrictMode>,
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2.react 单文件组件 SFC

组件后缀 .js .jsx

  • 类组件

1、类组件有一个Component类需要引入

2、类组件都要继承Component

3、每个类组件都有一个render方法，这个方法需要return出去

4、类组件要用export defualt暴露

import { Component } from "react";
export default class App extends Component{
  render(){
    return <h1>你好??</h1>
  }
}
1
2
3
4
5
6
  • 函数组件

1、有一个函数组件，里面有return

2、函数组件同样需要export default暴露

export default function App1(){
    return <h1>你好！！</h1>
}
1
2
3

# 3.jsx 语法

放在 类组件的render 函数的return 后面

放在 函数组件的 函数体的 reutrn 后面

js 与 html代码的混写

  • return 后面 一定是一句完整html代码
 return (
      <div className="box">
        我是box1
        <div className="box1">
          box1
          <div className="box2">box2</div>
        </div>
      </div>
    );
1
2
3
4
5
6
7
8
9
  • return jsx 必须 有且只有 一个 顶级节点
  return (
    <div>
      <div className="header">头部</div>
      <div className="main">内容</div>
      <div className="footer">底部</div>
    </div>
  );
1
2
3
4
5
6
7
  • jsx 顶级节点 可以是 无意义节点

在代码编译过程中 是一个节点，但是编译之后 不会输出到 页面上

<></>

 return (
    <>
      <div className="header">头部</div>
      <div className="main">内容</div>
      <div className="footer">底部</div>
    </>
  );
1
2
3
4
5
6
7

# 4.jsx语法 如何渲染变量值 mustach 表达式

vue mustach

ES6字符模板 ${name}

react mustach {name}

  • 函数组件 渲染变量
  // 学生成绩
  let user = {
    name: "刘玉清",
    age: 20,
    math: 100,
    english: 90,
    chinese: 80,
  };
  return (
    <>
      <table>
        <thead>
          <th>姓名</th>
          <th>年龄</th>
          <th>数学</th>
          <th>英语</th>
          <th>语文</th>
        </thead>
        <tbody>
          <tr>
            <td>{user.name}</td>
            <td>{user.age}</td>
            <td>{user.math}</td>
            <td>{user.english}</td>
            <td>{user.chinese}</td>
          </tr>
        </tbody>
      </table>
    </>
  );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  • 类组件渲染变量
user = {
    name: "刘玉清",
    age: 20,
    math: 100,
    english: 90,
    chinese: 80,
  };

  render() {
    return (
      <>
        <table>
          <th>姓名</th>
          <th>年龄</th>
          <th>数学</th>
          <th>英语</th>
          <th>语文</th>

          <tbody>
            <tr>
              <td>{this.user.name}</td>
              <td>{this.user.age}</td>
              <td>{this.user.math}</td>
              <td>{this.user.english}</td>
              <td>{this.user.chinese}</td>
            </tr>
          </tbody>
        </table>
      </>
    );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 5.样式引入

import './css/app.css'    #import  样式文件的路径
1

React 框架-类组件