React

1. React 基础

1) 环境准备

创建项目

首先，通过 react 脚手架创建项目

npx create-react-app client --template typescript

• client 是项目名
• 目前 react 版本是 18.x

运行项目

cd client
npm start

• 会自动打开浏览器，默认监听 3000 端口

修改端口

在项目根目录下新建文件 .env.development，它可以定义开发环境下的环境变量

PORT=7070

重启项目，端口就变成了 7070

• 参考文档：Advanced Configuration | Create React App (create-react-app.dev)

浏览器插件

插件地址 New React Developer Tools – React Blog (reactjs.org)

VSCode

推荐安装 Prettier 代码格式化插件

2) 入门案例

Hello

编写一个 src/pages/Hello.tsx 组件

export default function Hello()  {
  return <h3>Hello, World!</h3>
}

• 组件中使用了 jsx 语法，即在 js 中直接使用 html 标签或组件标签
• 函数式组件必须返回标签片段

在 index.js 引入组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import reportWebVitals from './reportWebVitals'
// 1. 引入组件
import Hello from './pages/Hello'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <React.StrictMode>
    {/* 2. 将原来的 <App/> 改为 <Hello></Hello> */}
    <Hello></Hello>
  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

将欢迎词作为属性传递给组件

<Hello msg='你好'></Hello>

• 字符串值，可以直接使用双引号赋值
• 其它类型的值，用 {值}

而组件修改为

export default function Hello(props: { msg: string }) {
  return <h3>{props.msg}</h3>
}

jsx 原理

export default function Hello(props: { msg: string }) {
  return <h3>{props.msg}</h3>
}

在 v17 之前，其实相当于

import { createElement } from "react";
export default function Hello(props: {msg: string}) {
  return createElement('h3', null, `${props.msg}`)
}

3) 人物卡片案例

样式已经准备好 /src/css/P1.css

#root {
   
   
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

div.student {
   
   
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  width: 128px;
  height: 330px;
  /* font-family: '华文行楷'; */
  font-size: 14px;
  text-align: center;
  margin: 20px;
  display: flex;
  justify-content: flex-start;
  background-color: #7591AD;
  align-items: center;
  flex-direction: column;
  border-radius: 5px;
  box-shadow: 0 0 8px #2c2c2c;
  color: #e8f6fd;
}

.photo {
   
   
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border-radius: 0%;
  overflow: hidden;
  transition: 0.3s;
  border-radius: 5px;
}

.photo img {
   
   
  width: 100%;
  height: 100%;
  /* object-fit: scale-down; */
  object-fit: cover;
}

.photo::before {
   
   
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #333, transparent);
}

div.student h2 {
   
   
  position: absolute;
  font-size: 20px;
  width: 100%;
  height: 68px;
  font-weight: normal;
  text-align: center;
  margin: 0;
  line-height: 68px;
  visibility: hidden;
}

h2::before {
   
   
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 68px;
  background-color: rgba(0, 0, 0, 0.3);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;  
}

div.student h1 {
   
   
  position: absolute;
  top: 250px;
  font-size: 22px;
  margin: 0;
  transition: 0.3s;
  font-weight: normal;
}

div.student p {
   
   
  margin-top: 300px;
  width: 80%;
  font-weight: normal;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid #8ea2b8;
}

.student:hover .photo::before {
   
   
  display: none;
}

.student:hover .photo {
   
   
  width: 90px;
  height: 90px;
  top: 90px;
  border-radius: 50%;
  box-shadow: 0 0 15px #111;
}

.student:hover img {
   
   
  object-position: 50% 0%;
}

.student:hover h1 {
   
   
  position: absolute;
  top: 190px;
  width: 40px;
}

div.student:hover h2 {
   
   
  visibility: visible;
}

类型 /src/model/Student.ts

export interface Student {
   
   
  id: number,
  name: string,
  sex: string,
  age: number,
  photo: string
}

组件 /src/pages/P1.tsx

import { Student } from '../model/Student'
import '../css/P1.css'
export default function P1(props: { student: Student }) {