react_0

1) 环境准备

创建项目

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

npx create-react-app client --template typescript

命令解释:

这条命令是在使用 create-react-app 工具创建一个新的 React 应用。create-react-app 是一个由 Facebook 提供的脚手架工具，用于快速创建 React 应用。

命令中的 client 是你要创建的应用的名称，--template typescript 表示你希望使用 TypeScript 作为应用的主要编程语言。

详细解释如下：

• npx: npx 是 npm 的一个命令行工具，用于在你的计算机上安装并运行包。如果你在你的项目目录中运行 npx 命令，它将查找当前目录的 package.json 文件，并查看其中列出的 create-react-app 版本。
• create-react-app: 这是用于创建新的 React.js 应用的命令行工具。它设置了一个新的项目环境，包括 Webpack、Babel、ESLint 等，使得你可以专注于你的应用代码，而不需要花费时间在配置和构建工具上。
• client: 这是你希望创建的 React 应用的名称。
• --template typescript: 这是一个选项，表示你希望使用 TypeScript 作为主要的编程语言。create-react-app 默认使用 JavaScript 或 JSX，但你也可以选择使用 TypeScript。

所以，总的来说，这条命令的意思是：使用 create-react-app 创建一个名为 "client" 的新的 React 应用，并使用 TypeScript 作为主要的编程语言。

目前react版本:"react": "^18.2.0"

运行项目

cd client
npm start

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

修改端口

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

PORT=7070

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

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

• VSCode

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

  2) 入门案例

  Hello

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

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