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> }