快速创建 React +TypeScript 基础项目

3,506 阅读1分钟

最近在学习使用React+TypeScript开发项目,然后我在这里整理一下react+ts基础项目的创建过程, node/npm/yarn 这些东西没有的去自行安装, 下面就简单搭一个初始化的demo,仅供参考

首先第一步:(两种方法)

1.使用create react app脚手架创建:

yarn global add create-react-app  (也可以用npm)
create-react-app 项目名 --template typescript  (项目名可以自定)

2.直接创建:(推荐方法)

 yarn create react-app 项目名 --template typescript  (项目名可以自定)
 npx create-react-app 项目名 --template typescript   (项目名可以自定)

image.png image.png

顺便在这里分享一下 vue 项目的创建方式 用npx创建vue项目:

$ npx @vue/cli 项目名   (项目名可以自定)

创建完成后的目录是这样的

src是我们写代码进行项目开发的目录

现在看起来可能会没有头绪 屏幕快照 2022-08-14 下午14.45.33 下午.png

现在第二步:

整理目录

删除src下不必要的文件,完成后是这样的 屏幕快照 2022-08-14 下午14.48.55 下午.png

app.tsx 屏幕快照 2022-08-14 下午14.50.55 下午.png

index.tsx 屏幕快照 2022-08-14 下午14.51.40 下午.png

如果缺少 node_modules

 yarn / npm i

启动项目:

 yarn start  /  npm run start

打开http://localhost:3000在浏览器中查看

屏幕快照 2022-08-14 下午14.58.25 下午.png