React 入门笔记

news2024/11/26 9:52:54

前言

国庆值班把假期拆了个稀碎, 正好不用去看人潮人海, 趁机会赶个晚集入门一下都火这么久的 React 前端技术. 话说其实 n 年前也了解过一丢丢来着, 当时看到一上来就用 JS 写 DOM 的套路直接就给吓退了, 扭头还去看 Vue 了🤣, 现在从市场份额来看, 确实 React 还是占有率更高 (数据来源) 加上单位现在也都在推 CloudScape 做项目, 有必要再试一试了.
在这里插入图片描述
本次入门主要围绕 React 前端开发的环境准备和基本功能实现, 后端用 https://reqres.in/api/users?page=2 提供的 Mock 数据, 以后有空再尝尝 FastAPI (挖个坑先). Mock 数据长这样:

{
    "page": 2,
    "per_page": 6,
    "total": 12,
    "total_pages": 2,
    "data": [
        {
            "id": 7,
            "email": "michael.lawson@reqres.in",
            "first_name": "Michael",
            "last_name": "Lawson",
            "avatar": "https://reqres.in/img/faces/7-image.jpg"
        },
        // 省略更多其他相同结构数据
    ],
    "support": {
        "url": "https://reqres.in/#support-heading",
        "text": "To keep ReqRes free, contributions towards server costs are appreciated!"
    }
}

计划使用这些数据制作一个通信录页面, 包含每个人物的基本信息, 以卡片形式排列展示.

环境准备

  • Windows 11 + VScode
  • 安装 nodejs https://nodejs.org/
# 检查 nodejs 版本
node -v
v20.8.0

# 修改镜像源
npm config set registry https://registry.npmmirror.com

使用 Vite 脚手架创建项目

# 创建文件夹
mkdir my-react; cd my-react

# 创建项目
npm create vite

# 完成向导, 使用 React + TypeScript 组合
Need to install the following packages:
create-vite@4.4.1
Ok to proceed? (y)
√ Project name: ... frontend
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in C:\Users\lpwm\Desktop\react-study\my-react\frontend...

Done. Now run:

  cd frontend
  npm install
  npm run dev

# 安装基础的 React 依赖
cd frontend; npm install

# 使用 VScode 打开项目
code .

VScode 插件配置

安装以下插件可以使 Coding 的快乐(效率)加倍

  • ES7 React/Redux/Styled-components snippets 常用代码片段
  • Prettier - Code formatter 格式化
  • vscode-icons 扩展图标(好看)

快捷键 Ctrl + , 打开 VScode 设置, 搜索 “format on save”, 勾选上 Editor: Format On Save; 搜索 “default formatter” , Editor: Default Formatter 选择 Prettier - Code formatter

配置完的项目 Folder 长这个样子:
在这里插入图片描述
通过 Vite 脚手架创建的项目中乍一看好多文件, 其实大多数都不需要动, 主要 focus 在 src 里面就中.

安装 UI 依赖

React 其实并不会包含和 UI 相关的 Component / Style, 这部分还是需要使用其他的前端 UI 框架, 这里使用老朋友 Bootstrap 适配 React 的版本 React Bootstrap, 在 VScode 中通过快捷键 Ctrl + Shift + ` 打开 PowerShell 终端:

npm install react-bootstrap bootstrap

安装完成后可以检查 package.json 可以看到内容已经自动更新, 非高端玩家其实项目中的大多数配置文件都不需要手动修改的.

"dependencies": {
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.0",
    "react-dom": "^18.2.0"
},

Coding

Vite 创建的项目中包含了一个演示的页面, 对于新手来说, 看起来会比较混乱, 先删除 src 中的 App.css, index.css 这两个自定义的样式文件.

修改 src/main.tsx 删除 import './index.css' 这行相关的引用.

修改 src/App.tsx 删除所有内容, 输入 tsrafce 按 TAB 键自动补全填充代码片段 (其实不用输入完就能联想出来了) 这里其实是调用前面装的插件 ES7 React/Redux/Styled-components snippets

Creates a React Arrow Function Component with ES7 module system and TypeScript interface (ES7 React/Redux/Styled-components snippets)

在这里插入图片描述

自动补全的 React Component 代码(真省事):

import React from 'react'

interface Props {
  
}

const App = (props: Props) => {
  return (
    <div>
      
    </div>
  )
}

export default App

其实 JSX 也没有像之前想象的那么晦涩, 当成 XML 来对待就行了. 修改上面的代码, 删除没有用到的部分, 添加一个静态的 Bootstrap Navbar 和 Card. 在 return () 中输入 <Container 就会出现自动联想, 按 TAB 键就可以自动补全相关的 import 代码, 就很欢快了有木有! 另外得益于之前在 VScode 中设置的 Editor: Format On Save, 保存文件时会自动通过 Prettier 进行格式化.
在这里插入图片描述
参考 React Bootstrap 文档 完成页面设计.

import { Card, Col, Container, Navbar, Row } from "react-bootstrap";
// 别忘了添加 Bootstrap CSS 文件引用
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
  return (
    <Container fluid>
      <Row>
        <Navbar expand="lg" className="bg-primary-subtle">
          <Container>
            <Navbar.Brand>Contacts</Navbar.Brand>
          </Container>
        </Navbar>
      </Row>
      <Container className="p-3">
        {/* Container 加上 padding 类 */}
        <Row md="4">
          {/* 在 Row 上定义 Grid Column (每行最多 4 列) */}
          <Col>
            <Card className="m-2">
              {/* 加上 margin 类 */}
              <Card.Img variant="top" src="holder.js/100px180"></Card.Img>
              <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>Some text in the card.</Card.Text>
              </Card.Body>
            </Card>
          </Col>
        </Row>
      </Container>
    </Container>
  );
};

export default App;

在 Terminal 中启动开发服务器

npm run dev

  VITE v4.4.9  ready in 200 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h to show help

浏览器访问 http://localhost:5174/ 预览效果
在这里插入图片描述
多复制几个 Card 所在的 <Col></Col> 查看 Grid Column 效果:
在这里插入图片描述
静态页面已经没问题了, 接下来使用 https://reqres.in/api/users?page=2 模拟后端 API 返回的数据进行页面动态渲染, 修改后的 App.tsx

import { Card, Col, Container, Navbar, Row } from "react-bootstrap";
// 别忘了添加 Bootstrap CSS 文件引用
import "bootstrap/dist/css/bootstrap.min.css";
import { useEffect, useState } from "react";
import React from "react";

// 使用 Context 管理组件内部的上下文内容
const AppContext = React.createContext({
  users: [],
  fetchUsers: () => {},
});

const App = () => {
  // 模拟异步获取 API 数据
  const [users, setUsers] = useState([]);
  const fetchUsers = async () => {
    await fetch("https://reqres.in/api/users?page=2")
      .then((response) => {
        return response.json();
      })
      .then((json_data) => {
        setUsers(json_data["data"]);
      });
  };
  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <AppContext.Provider value={{ users, fetchUsers }}>
      <Container fluid>
        <Row>
          <Navbar expand="lg" className="bg-primary-subtle">
            <Container>
              <Navbar.Brand>Contacts</Navbar.Brand>
            </Container>
          </Navbar>
        </Row>
        <Container className="p-3">
          {/* Container 加上 padding 类 */}
          <Row md="4">
            {/* 在 Row 上定义 Grid Column (每行最多 4 列) */}
            {users.map((user) => (
              <Col key={user["id"]}>
                <Card className="m-2">
                  {/* 加上 margin 类 */}
                  <Card.Img variant="top" src={user["avatar"]}></Card.Img>
                  <Card.Body>
                    <Card.Title>{user["first_name"]}</Card.Title>
                    <Card.Text>Some text in the card.</Card.Text>
                  </Card.Body>
                </Card>
              </Col>
            ))}
          </Row>
        </Container>
      </Container>
    </AppContext.Provider>
  );
};

export default App;

刷新浏览器查看效果:
在这里插入图片描述
由于图片的高度不一致, 导致显示的 Card 大小也不一样, 先通过自定义 inline 样式的方式解决, 修改 Card.Img 添加 style 属性

<Card.Img
  variant="top"
  src={user["avatar"]}
  style={{ height: "100px", objectFit: "cover" }}
></Card.Img>

刷新页面, 制式~
在这里插入图片描述
换种方式, 将自定义样式放到单独的文件中, 然后为 Card.Img 添加 className 属性. 创建文件 src/App.css (就是开头删掉的那个🤣)

.card-avatar {
  height: 100px;
  object-fit: cover;
}

修改 App.tsx, 在开头加入引用 import "./App.css";, 并调整 Card.Img

<Card.Img
  variant="top"
  src={user["avatar"]}
  className="card-avatar"
></Card.Img>

再次刷新浏览器, 格式保持一致. 至此, 一个简单的 React 页面就开发完成了. 其实后面涉及到的 React.createContext, useState, useEffect 还属于一知半解, 也没好意思展开强行解释. 能先跑出来效果就打消了不少之前对 React 的恐惧了, 后面还是得花时间好好看一遍文档和基础学习.

项目部署

现在都是在本地通过 npm run dev 跑的开发测试环境, 生产部署的简单过程:

  1. Build, 会在项目文件夹中创建 dist 目录
npm run build
  1. 将 dist 目录中的文件部署到 Web Server, 以 WSL2 (Ubuntu 22.04) 中的 nginx 为例
# 先安装 nginx
sudo apt install nginx -y

# 从 Windows 的资源管理器中
# 将 dist 文件夹复制到 WSL2 的 Home 文件夹: /home/lpwm/dist
# 修改 nginx 配置
sudo vim /etc/nginx/sites-enabled/default

nginx 配置文件简单示意:

server {
	listen 80;
	root /home/lpwm/dist;
}

启动 nginx 服务

sudo systemctl restart nginx

此时通过浏览器访问 http://localhost 返回 403 Forbidden, 查看 /var/log/nginx/error.log 发现:

2023/10/01 01:09:59 [error] 1117#1117: *1 “/home/lpwm/dist/index.html” is forbidden (13: Permission denied), client: 127.0.0.1, server: , request: “GET / HTTP/1.1”, host: “localhost”

使用 sudo ps -ef |grep nginx 检查当前运行 nginx 的用户是 www-data, 没有对 /home/lpwm/dist 文件夹的访问权限. 这个好说, 把 www-data 用户添加到我自己用户的 lpwm 组就行了呗

sudo usermod -aG lpwm www-data
sudo nginx -s reload

齐活儿~

在这里插入图片描述
本次入门就先到这里吧, 后面抽时间再细琢磨 React 里面的各种基础概念.

参考资料

React Tutorial for Beginners - Programming with Mosh

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1053354.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

分析各种表达式求值过程

分析各种表达式求值过程

目录 算术运算与赋值 编译器常用的两种优化方案 常量传播 常量折叠 加法 Debug编译选项组下编译后的汇编代码分析 Release开启02执行效率优先 减法 Release版下优化和加法一致&#xff0c;不再赘述 乘法 除法 算术结果溢出 自增和自减 关系运算与逻辑运算 JCC指…
阅读更多...
决胜未来：解锁新科技趋势的无尽可能性

决胜未来：解锁新科技趋势的无尽可能性

随着科技的飞速发展,我们的未来迈入一个新的时代。无论是人工智能、区块链、大数据、物联网还是机器学习等,这些技术正以前所未有的速度重塑我们的世界和生活。面对这些未来的科技趋势,我们能否抓住其中的机遇并寻找新的突破? 首先&#xff0c;我们来看一看人工智能。人工智能…
阅读更多...
2023年中国工业脱水机行业供需分析：随着自动化和智能化技术的快速发展，销量同比增长4.9%[图]

2023年中国工业脱水机行业供需分析：随着自动化和智能化技术的快速发展，销量同比增长4.9%[图]

工业脱水机行业是指专门从湿润的固体物料中去除水分的设备制造和相关服务。它广泛应用于食品加工、化工、制药、纺织、环保等行业&#xff0c;用于去除物料中的水分&#xff0c;提高产品质量和降低能耗。 工业脱水机行业分类 资料来源&#xff1a;共研产业咨询&#xff08;共研…
阅读更多...
基于SpringBoot的师生共评的作业管理系统设计与实现

基于SpringBoot的师生共评的作业管理系统设计与实现

目录 前言 一、技术栈 二、系统功能介绍 课程管理 作业管理 作业互评 小组管理 作业管理 作业评分 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个…
阅读更多...
【Window10 】删除‘设备和驱动器’中的百度网盘、酷狗音乐、迅雷下载等

【Window10 】删除‘设备和驱动器’中的百度网盘、酷狗音乐、迅雷下载等

原因&#xff1a; 不想在设备里看到它。 解决方案&#xff1a; 打开cmd找到 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\MyComputer\NameSpace\ 目录在 NameSpace 目录下找到对应的软件目录&#xff0c;删除即可&#xff08;挨个目录的点击进去看…
阅读更多...
Java / MybatisPlus：JSON处理器的应用，在实体对象中设置对象属性，对象嵌套对象

Java / MybatisPlus：JSON处理器的应用，在实体对象中设置对象属性，对象嵌套对象

1、数据库设计 2、定义内部的实体类 /*** Author lgz* Description* Date 2023/9/30.*/ Data // 静态构造staticName&#xff0c;方便构造对象并赋予属性 AllArgsConstructor(staticName "of") NoArgsConstructor ApiModel(value "亲友", description …
阅读更多...
web：[极客大挑战 2019]PHP

web：[极客大挑战 2019]PHP

题目 点进页面显示如下 根据页面提示&#xff0c;这个网站有备份文件&#xff0c;备份文件一般是bak文件格式&#xff0c;用dirsearch扫描 访问之后下载了一个文件 里面都是一些代码 在index.php中发现了一个类的文件&#xff0c;一个get传参&#xff0c;然后将传进的值进行反序…
阅读更多...
【强化学习】基础概念

【强化学习】基础概念

1. Agent (智能体) 智能体是进行决策和学习的实体&#xff0c;它能感知环境的状态&#xff0c;并基于策略采取动作以影响环境。智能体的目标是通过与环境的交互获得最大化的累积奖励。 2. Environment (环境) 环境是智能体所处的外部系统&#xff0c;它与智能体交互。环境的…
阅读更多...
Error: node: unknown or unsupported macOS version: :dunno 错误解决

Error: node: unknown or unsupported macOS version: :dunno 错误解决

一、原因 今天安装 brew install node报错了&#xff0c;错误信息如下&#xff1a; 二、解决方案 1&#xff09;查找homebrew-cask安装位置 echo $(brew --repo homebrew/homebrew-cask) // 输出 /opt/homebrew/Library/Taps/homebrew/homebrew-cask2&#xff09;使用 gi…
阅读更多...
Linux系统编程系列之进程间通信-IPC对象

Linux系统编程系列之进程间通信-IPC对象

一、什么是IPC对象 消息队列&#xff0c;共享内存和信号量组被称为IPC对象。各种不同的IPC其实是在不同时期逐步引入的&#xff0c;他们是在UNIX伯克利版本system-V中引入的三种通信方式。 二、IPC对象特性 1、在系统中使用键值&#xff08;KEY&#xff09;来唯一确定&#xf…
阅读更多...
angular 在vscode 下的hello world

angular 在vscode 下的hello world

Angulai 是google 公司开发的前端开发框架。Angular 使用 typescript 作为编程语言。typescript 是Javascript 的一个超集&#xff0c;提升了某些功能。本文介绍运行我的第一个angular 程序。 前面部分参考&#xff1a; Angular TypeScript Tutorial in Visual Studio Code 一…
阅读更多...
yolov8 opencv模型部署（C++版）

yolov8 opencv模型部署（C++版）

yolov8 opencv模型部署&#xff08;C 版&#xff09; 使用opencv推理yolov8模型&#xff0c;仅依赖opencv&#xff0c;无需其他库&#xff0c;以yolov8s为例子&#xff0c;注意&#xff1a; 使用opencv4.8.0 &#xff01;使用opencv4.8.0 &#xff01;使用opencv4.8.0 &#…
阅读更多...
软件设计师_操作系统基本原理_学习笔记

软件设计师_操作系统基本原理_学习笔记

文章目录 2.1 操作系统概述2.2 进程2.2.1 进程状态转换图2.2.2 前趋图2.2.3 进程的同步与互斥2.2.4 PV操作2.2.5 死锁 2.3 存储管理2.3.1 分区存储管理 2.1 操作系统概述 2.2 进程 2.2.1 进程状态转换图 2.2.2 前趋图 哪些任务可以并行&#xff0c;哪些任务有先后关系&#xf…
阅读更多...
搭建前端框架

搭建前端框架

在终端进入web目录&#xff0c;然后创建vuecrud工程 创建工程并引入ElementUI和axios手把手教学>传送门:VueCLI脚手架搭建
阅读更多...
设计一个简单的通讯录

设计一个简单的通讯录

目录 导读&#xff1a; 一、主函数 1. 打印功能菜单 2. 用枚举常量列举功能给功能赋值&#xff08;0-5&#xff09; 3. main主函数 二、头文件 三、通讯录各功能的实现 1. 初始化通讯录 2. 增加联系人 3. 展示所有联系人信息 4. 删除指定联系人 5. 查询指定联系人…
阅读更多...
ARM汇编基础指令整合

ARM汇编基础指令整合

汇编语言的组成 伪操作 不参与程序的执行&#xff0c;但是用于告诉编译器程序该怎么编译 如&#xff1a; .text .global .end .if .else .endif .data 汇编指令 汇编器将一条汇编指令编译成一条机器码&#xff0c;在内存里一条指令…
阅读更多...
JAVA 学习笔记 2年经验

JAVA 学习笔记 2年经验

文章目录 基础String、StringBuffer、StringBuilder的区别jvm堆和栈的区别垃圾回收标记阶段清除阶段 异常类型双亲委派机制hashmap和hashtable concurrentHashMap 1.7和1.8的区别java的数据结构排序算法&#xff0c;查找算法堆排序 ThreadLocal单例模式常量池synchronizedsynch…
阅读更多...
【力扣周赛】第 364 场周赛⭐（前后缀分解+单调栈DFS技巧）

【力扣周赛】第 364 场周赛⭐（前后缀分解+单调栈DFS技巧）

文章目录 竞赛链接Q1&#xff1a;2864. 最大二进制奇数&#xff08;贪心&#xff09;写法1——手动模拟&#xff08;代码长&#xff0c;运行快&#xff09;写法2——API&#xff08;代码短&#xff0c;运行慢&#xff09; Q2&#xff1a;2865. 美丽塔 I竞赛时代码——枚举山顶 …
阅读更多...
C++ 基础_Day01

C++ 基础_Day01

准备工具Vscode或者Clion或者Dev C或者Vs studio 和 MSYS2 是C跨平台的重要工具链. 文章目录 准备工作安装MSYS2软件 创建文件 一、基本介绍1.1C源文件1.2 代码注释1.3变量与常量1.3.1变量1.3.2 常量1.3.3 二者的区别&#xff1a; 1.4 关键字和标识符 二、数据类型2.1 基本数据…
阅读更多...
嵌入式Linux应用开发-第十四章查询方式的按键驱动程序

嵌入式Linux应用开发-第十四章查询方式的按键驱动程序

嵌入式Linux应用开发-第十四章查询方式的按键驱动程序 第十四章 查询方式的按键驱动程序_编写框架14.1 LED驱动回顾14.2 按键驱动编写思路14.3 编程&#xff1a;先写框架14.3.1 把按键的操作抽象出一个button_operations结构体14.3.2 驱动程序的上层&#xff1a;file_operation…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023