-
2022-04-25 16:19:22
创建方式一
- 先全局安装脚手架工具包
npm i -g create-react-app
- 用脚手架工具来创建项目
create-react-app your-project-name
创建方式二
- 直接使用npx来创建项目
命令:
npx create-react-app your-project-name
解释:
npx create-react-app 是固定命令,create-react-app 是 React 脚手架的名称
your-project-name 表示项目名称,可以修改拓展
npx 是 npm v5.2 版本新添加的命令,用来简化 npm 中工具包的使用
没有npx之前:
全局安装npm i -g create-react-app
在通过脚手架的命令来创建 React 项目
有了npx之后
npx 调用最新的 create-react-app 直接创建 React 项目更多相关内容 -
Vite创建React项目
2021-09-16 14:25:33项目创建完成5. 项目结构6. 启动项目 Vite 需要 Node.js 版本 >= 12.0.0。(node -v 查看自己当前的node版本) 使用 yarn:yarn create @vitejs/app 使用 npm:npm init @vitejs/app 1. 输入项目名称 这里...
Vite 需要 Node.js 版本 >= 12.0.0。(
node -v
查看自己当前的node版本)- 使用 yarn:
yarn create @vitejs/app
- 使用 npm:
npm init @vitejs/app
1. 输入项目名称
这里输入我们的项目名称:
vite-react
2. 选择框架
这里选择我们需要集成的框架:
react
- vanilla:原生js,没有任何框架集成
- vue:vue3框架,只支持vue3
- react:react框架
- preact:轻量化react框架
- lit-element:轻量级web组件
- svelte:svelte框架
3. 选择不同
这里我们选择:
react
4. 项目创建完成
5. 项目结构
项目结构非常简单:
6. 启动项目
- 进入项目:
cd vite-react
- 安装依赖:
npm install
- 运行项目:
npm run dev
或npx vite
- 编译项目:
npm run build
或npx vite build
启动速度极快:
- 使用 yarn:
-
VSCode创建React项目
2021-12-07 14:31:57VSCode创建React项目 1、 打开Teriminal命令行,安装react的脚手架create-react-app yarn global add create-react-app 2、创建项目命令 create-react-app demo 3、开启项目命令 cd demo yarn start 或 ...VSCode创建React项目
1、 打开Teriminal命令行,安装react的脚手架create-react-app
yarn global add create-react-app
2、创建项目命令
create-react-app demo
3、开启项目命令
cd demo yarn start 或 npm start
4、效果如下:
-
React脚手架搭建及创建React项目
2021-11-27 16:25:171.安装node.js和npm: 可自行到node官网下载,下载node完成后,npm也会自行下载完成。 2.通过cmd执行 node -v 和 npm -v ...4.安装react脚手架,cmd执行 npm i -g create-react-app (-g为全局下载) 5.安装好...1.安装node.js和npm:
可自行到node官网下载,下载node完成后,npm也会自行下载完成。
2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。
3.安装好的npm的源默认是国外的源,会因为网络原因导致执行npm操作有延时,我们可以切换npm的源为淘宝的源镜像。操作方法: 安装淘宝镜像或者使用cnpm详解
4.安装react脚手架,cmd执行 npm i -g create-react-app (-g为全局下载)
5.安装好 node 和 react脚手架后就可以创建项目啦,cmd切换至指定路径,执行 create-react-app project (project为自定义项目名),最后出现 happy hacking说明创建成功。
6.项目创建成功后,我们可在对应的路径下看到项目文件。打开文件可以看到文件结构。
7.启动项目。在项目所在路径下cmd执行 npm start。
8.启动成功后会自动打开浏览器,并出现react图标,说明项目启动成功。
-
quick-react-cli:方便地使用基本配置创建react项目
2021-03-04 01:43:06快速Reactcli 方便地使用基本配置创建React项目` npx quick-react-cli [您的项目名称]` 创建一个带有打字稿,craco,axios,proxy,eslint,漂亮,路线,布局的react项目。 提交可能触发eslint。 现在,它只有一个... -
创建React项目全过程(傻瓜式教程)
2021-12-29 16:07:43创建React项目。npm无法识别 -
使用create-react-app创建React项目
2022-05-26 17:09:18简单记录一下使用create-react-app创建React项目,使用craco进行了简单的配置。 包括支持装饰器语法、按需加载和简单的包体积优化。 -
yarn创建react项目
2019-12-05 15:17:11yarn创建react项目 1.安装yarn https://yarnpkg.com/zh-Hans/docs/install 2.创建项目及安装antd 在cmd下输入“npm install create-react-app yarn -g” 在指定项目目录下输入 create-react-app your_project_... -
vite创建react项目及基础配置
2022-05-10 15:08:59vite创建react项目。配置less,eslint,修改端口号 -
命令行创建React项目
2020-09-25 15:45:04cnpm install -g create-react-app ...找一个创建项目的目录,用cmd打开资源管理器对应目录运行 create-react-app demo 注意:安装过程中最好焦点不要移出cmd窗口,有时候会莫名其妙的中断安装 -
React vscode 创建 react 项目流程【超详细】
2021-04-19 20:13:57文章目录一、安装node二、配置淘宝镜像三、配置 vscode(win10)四、全局安装脚手架五、创建项目 一、安装node 请在官网下载安装:https://nodejs.org/zh-cn/ vscode 中 点击 ( ctrl + `) 调出终端 输入指令node -v... -
创建React项目命令流程
2020-10-14 15:40:51//然后使用create-react-app命令来创建项目 create-react-app <项目名> //创建my-app项目 create-react-app my-app cd my-app npm run start 或 yarn start 安装webpack 首先安装webpack和webpack- -
使用vite创建react项目
2021-08-30 10:31:111、进入项目目录 运行 npm init @vitejs/app react-1 根据提示选择react ->> react 根据提示完成命令输入 cd 进入项目目录 npm install 加载依赖 npm run dev 启动项目 浏览器访问 ... -
create-react-app / UmiJS创建React项目
2022-05-11 22:59:49一、create-react 创建项目 create-react-app 是基于 webpack 的打包层方案,包含 build、dev、lint 等,他在打包层把体验做到了极致,但是不包含路由,不是框架,也不支持配置。 1、全局安装crate-react-app npm... -
idea创建react项目
2021-07-05 17:36:35创建react项目 这里记得勾上typescript,这样子创建的项目是基于typescript,个人更喜欢typescript的编码风格,如果你就是喜欢js,你可以不勾 创建好的项目结构 有typescript 无typescript -
react-app-starter:一个用于快速创建React项目的模板脚手架,使用Webpack与Storybook构建的工具。...
2021-02-04 06:28:04一个用于快速创建React项目的模板脚手架,使用Webpack与Storybook构建。 快速开始 git clone https://github.com/senntyou/react-app-starter.git --depth=1 cd react-app-starter npm install # 安装依赖 npm run ... -
如何从零开始创建React项目(三种方式)
2021-12-02 10:11:28在开发 React 项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,在这里介绍三种从零开始创建 React 项目的方式,分别是 “在浏览器中直接引入”、“使用官方脚手架 create-... -
解决 create-react-app 创建react项目时异常缓慢的问题
2019-11-05 18:20:46第一次通过create-react-app 或者 通过webstorm等编译器创建创建react项目时,因为要安装很多相关的包,而这些包的安装基本都是在内部通过npm进行安装。 由于npm在访问有些国外的资源会非常卡,有的时候即使开了VPN... -
创建react项目时遇到的报错
2021-02-04 09:39:36创建react项目时遇到的报错 百度到的第一个方法: 1.执行npm install -g create-react-app全局安装 2.执行npx create-react-app myapp创建项目 结果控制台打印: (node:18924) ExperimentalWarning: The fs.promises... -
VSCode中如何创建React项目
2021-02-05 15:00:30susan@susandeMac-mini ~ % 3、在终端输入create-react-app demoone,创建名称为demoone的项目 susan@susandeMac-mini ~ % create-react-app demoone Creating a new React app in /Users/susan/demoone.... -
使用creata-react-app脚手架创建react项目时非常慢的问题
2020-09-18 21:34:26在使用 create-react-app 创建项目时,项目依赖包的下载速度非常慢,可能你的npm在使用外网下载,我们可以把默认的下载地址改成淘宝镜像。 操作方法: 更换npm源: npm config set registry ... -
创建react项目并启动出现的报错解决,学习资源
2022-02-18 16:40:572.切换到想创建项目的目录(hello-react):create-react-app hello-react 3.进入项目文件夹:cd hello-react 4.启动项目:npm start 三、可能出现的报错: 1. 'react-app-rewired' 不是内部或外部命令,也... -
使用umi创建react项目
2020-12-19 12:17:18$ mkdir myapp && cd myapp 通过官方工具创建项目, $ yarn create @umijs/umi-app 或 npx @umijs/create-umi-app Copy: .editorconfig Write: .gitignore Copy: .prettierignore Copy: .prettierrc Write: .umirc.... -
npm 创建react项目
2018-08-01 20:57:35win+R 输入cmd ,打开cmd面板 安装cnpm (淘宝镜像,作用:提升下载速度) npm install -g cnpm --... 安装react的构建器create-react-app cnpm install -g create-react-app create-react-app my-app... -
如何创建一个react项目
2022-04-02 17:54:10通过这条指令在电脑中加入一个创建react项目的指令 2. create-react-app hello-react 通过这个指令来创建一个hello-react的指令,如果安装慢的话可以运行如下命令切换淘宝镜像 (如果是在企业实习的好兄弟千万... -
使用脚手架创建react项目
2018-05-17 12:04:07首先:全局安装脚手架: npm install create-react-app -g其次:选择一个目录,执行create-react-app react-test最后:进入项目目录,运行 npm start执行热加载结果如下图所示:... -
创建react项目、使用react-cli脚手架创建
2019-05-10 16:12:27build-react-cli是帮助你快速创建生成react项目的脚手架工具,配置了多种可选择的不同类型项目模版。 创建好的react项目后,可以进项目文件的readme.md文件,里面有详细的介绍。 1.react-cli安装脚手架 npm... -
react-cli创建React项目
2019-03-15 09:22:01下面就是快速创建生成react项目,利用脚手架工具,简单,快捷。 1:安装react-cli脚手架 npm install -g build-react 复制代码2: 使用脚手架搭建项目 build-react init my-react 复制代码会出来一些问题,比如:... -
创建React项目时出错,提示node版本要>=12
2020-12-01 16:19:00创建React项目时出错,提示node版本要>=12 自己的node版本是11,所以需要升级node的版本 ####################################################################### 本机环境:Windows 10 1、下载安装包 ...