使用create-react-app构建React项目

安装完后，可以将任何文件重命名为TypeScript文件如： src/index.js=>src/index.tsx。安装或配置像 webpack 或 Babel 这样的工具，它们是预配置和隐藏的。引入，则此文件和其他文件都将会自动编译。如果未选择模板，将使用基本模板创建项目。使用sass的话，首先需要安装sass。首先需要安装bootstrap。默认情况下，提供了2个模板。

b1asu

307人浏览 · 2023-08-02 14:24:40

b1asu · 2023-08-02 14:24:40 发布

构建项目

npx create-react-app my-app
cd my-app
npm start

使用命令安装后，不需要安装或配置像 webpack 或 Babel 这样的工具，它们是预配置和隐藏的。

官网给出3种方法

构建项目过程中，可选择模板

npx create-react-app my-app --template [template-name]

默认情况下，提供了2个模板

如果未选择模板，将使用基本模板创建项目

使用sass

使用sass的话，首先需要安装sass

npm install sass

或者

yarn add sass

并更新 src/App.js 以引入 src/App.scss。如果以扩展名 .scss 或 .sass 引入，则此文件和其他文件都将会自动编译。

使用bootstrap

首先需要安装bootstrap

npm install bootstrap

或者

yarn add bootstrap

安装完成后，需要在 src/index.js 中，导入css

import 'bootstrap/dist/css/bootstrap.css';

使用TypeScript

1、最开始构建项目时，使用ts

使用模板

npx create-react-app my-app --template typescript
或者
yarn create react-app my-app --template typescript

2、在已构建好项目中，使用ts

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
或者
yarn add typescript @types/node @types/react @types/react-dom @types/jest

安装完后，可以将任何文件重命名为TypeScript文件如： src/index.js => src/index.tsx