React 入门笔记

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;

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
31
32
33
34
35
36

在 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

1
2
3
4
5
6
7
8

浏览器访问 http://localhost:5174/ 预览效果

多复制几个 Card 所在的 查看 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;

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

刷新浏览器查看效果:

由于图片的高度不一致, 导致显示的 Card 大小也不一样, 先通过自定义 inline 样式的方式解决, 修改 Card.Img 添加 style 属性

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

刷新页面, 制式~

换种方式, 将自定义样式放到单独的文件中, 然后为 Card.Img 添加 className 属性. 创建文件 src/App.css (就是开头删掉的那个🤣)

.card-avatar {
  height: 100px;
  object-fit: cover;
}
1
2
3
4

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

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

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

项目部署

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

1. Build, 会在项目文件夹中创建 dist 目录

npm run build
1

2. 将 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
1
2
3
4
5
6
7

nginx 配置文件简单示意:

server {
	listen 80;
	root /home/lpwm/dist;
}
1
2
3
4

启动 nginx 服务

sudo systemctl restart nginx
1

此时通过浏览器访问 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
1
2

齐活儿~

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

参考资料

React Tutorial for Beginners - Programming with Mosh