React入门：使用npx命令创建一个React项目

最新推荐文章于 2025-10-04 18:01:49 发布
原创 最新推荐文章于 2025-10-04 18:01:49 发布 · 2.2k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #前端框架

本文介绍了如何利用npx工具在Node.js环境中创建React项目，包括确保npm版本高于5.2，通过npxcreate-react-app命令生成项目，以及处理npm镜像过期的问题。

准备工作

安装npx，npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具，npm5.2以上版本开始支持npx命令，请确保你的npm版本大于5.2。使用npm命令安装：

npm install -g npx

可以使用npx -v检查版本信息

创建React项目

在你想要创建React项目的文件夹下输入cmd打开命令行
在这里插入图片描述
执行npx create-react-app react-app命令，其中‘react-app’是自定义的项目名称
在这里插入图片描述
（注）如果卡在这一步无法进行，检查淘宝镜像地址是否过期，https://registry.npm.taobao.org/于2024年1月22日证书过期，更换新的npm镜像地址即可。如（https:/registry.npmmiror.com/）
运行成功-生成了react-app项目
在这里插入图片描述

运行项目

使用npm start命令运行项目
在这里插入图片描述
项目启动成功

afdgdf
关注
npx 使用教程
不怕麻烦的鹿丸的博客
03-31 7124
npm从 v5.2.0开始新增了 npx命令，>=该版本会自动安装npx，是一个npm包执行器，，npm 使得它非常容易地安装和管理托管在注册表上的依赖项，npx 使得使用 CLI 工具和其他托管在注册表，加强了用户的体验。Node安装后自带npm模块，可以直接使用npx命令。如果不能使用，就要手动安装一下。
React一基础
jiuchabaikaishui的专栏
07-15 1273
React 是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来。声明式——只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI基于组件——组件时React最重要的内容，组件表示页面中的部分内容，组合、复用多个组件，可以实现完整的页面功能学习一次，随处使用——使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用。
Next.js create-next-app命令介绍
最新发布
Dontla的博客
10-04 833
命令是Next.js开发的起点，理解其参数功能能帮助我们快速搭建符合需求的项目。根据项目规模和团队偏好，选择合适的参数组合，可以大大提高开发效率。随着Next.js的不断发展，这些参数也在不断更新，建议定期查看Next.js官方文档，了解最新功能。
React--》超详细教程——React脚手架的搭建与使用
热门推荐
ztK63LrD的博客
01-15 1万+
React脚手架是开发现代Web应用的必备，其充分利用Webpack、Babel、ESlint等工具辅助项目的开发，当然这些工具也无需手动配置即可使用，脚手架的意义更多的是关注的是业务而不是工具的配置；项目的整体技术架构为：react + webpack + es6 + eslint。使用脚手架开发项目的特点：模块化、组件化、工程化。
react项目搭建
m0_61783767的博客
07-27 616
首先创建一个存放react项目的空文件夹，然后直接使用官方提供的用于快速创建 React 应用的工具，打开cmd命令行，输入以下命令，后面的。是项目的名字，在其中生成一个新的react应用（这里我直接在系统默认路径下操作，可以修改自己的路径）是项目的名字，在其中生成一个新的react应用，需等待几分钟（警告是因为版本的问题，可忽略）因为修改了文件，所以重新查看一下是否能运行起来，出现如下界面代表是正常的。将其设置为空，再次查看已经为空了，继续进行后面的步骤。进入创建好的文件夹，后面的。
npx create-react-app
辉生活-记录程序生活的点滴。
04-24 558
1、查看npm的镜像源 npm config get registry // 默认是：https://registry.npmjs.org/ 2、修改成淘宝的镜像源 npm config set registry https://registry.npm.taobao.org 3、create-react-app创建项目 npx create-react-app test // npx comes with npm 5.2+，可以直接使用 npx create-react-app // 也可以使用 np
React-tracks入门项目：使用npx创建React应用
对于初学者，创建一个React项目通常包含以下几个步骤： - 安装Node.js环境，确保npm（Node Package Manager）可用。 - 使用命令行工具，输入`npx create-react-app react-tracks`来创建项目。 - 进入项目文件夹...
clean-react-app:通过npx创建干净的React应用程序的解决方案
04-11
clean-react-app删除了创建React应用时给出的示例应用，而是给您一个简单的“ Hello，world！”。 指示 创建以下目录：〜/ .Scripts 克隆此仓库 将执行权限授予克隆的存储库中的Shell脚本 将下一行添加到您的〜/ ....
React 入门教程：构建第一个 React 应用
vvilkin的学习备忘
04-16 1482
本教程将带你从零开始构建你的第一个 React 应用。我们将创建一个简单的计数器应用，涵盖 React 的基本概念和开发流程。
4、React入门：从Hello World到项目搭建
e4f5g6h7的博客
07-11 99
本文详细介绍了React的入门知识，从创建第一个React应用Hello World开始，涵盖了准备工作、代码编写、Web服务器的安装与运行，以及使用create-react-app工具快速搭建React项目的方法。同时，文章还总结了React的核心概念、特性以及常见问题，并为后续学习提供了展望。无论你是初学者还是有一定基础的开发者，都能从中获得有价值的指导。
npx create-react-app xxx创建项目报错的解决办法
11-21
根据React官方文档（上图）可以发现，此时并不需要安装create-react-app工具，只要你的node >= 8.10 && npm >= 5.6，就可以直接使用npx create-react-app命令来创建项目。 报错 好的:OK_hand:，那就根据上面的来呗，...
快速创建 react 项目
君非道的博客
10-27 416
使用Create React App脚手架快速搭建react项目，搭建之前请确保安装了nodejs和npm 打开cmd或者bash等命令行，进入到你要创建项目的文件夹，执行下面命令，然后耐心等待 npx create-react-app my-test // my-test是项目名称，可以修改成你想要的名字 当出现下面命令时就说明项目创建成功 这个时候可以看到文件夹中已经有了这个项目 执行cd my-test进入项目文件夹，我是在D盘的react文件夹里创建项目的，此时看路径已经进来，可以看到后面有个
React create-react-app搭建(npx)
qq_41497443的博客
01-13 2179
react脚手架项目搭建(npx)
使用create-react-app构建React项目
初入社会的前端程序员
08-02 445
安装完后，可以将任何文件重命名为TypeScript文件 如： src/index.js => src/index.tsx。安装或配置像 webpack 或 Babel 这样的工具，它们是预配置和隐藏的。引入，则此文件和其他文件都将会自动编译。如果未选择模板，将使用基本模板创建项目。使用sass的话，首先需要安装sass。首先需要安装bootstrap。默认情况下，提供了2个模板。
[ react app环境搭建 ] ---- 使用npx create-react-app my-app 报错
weixin_41697323的博客
12-02 3788
问题简述 根据react文档上安装命令行npx create-react-app my-app, 但是出现报错信息。信息如下 解决方法, 先全局安装create-react-app脚手架，然后再执行官网三 npm install -g create-react-app npx create-react-app my-app cd my-app npm start ...
创建一个react项目
lllwky的博客
05-04 1111
JSX是JavaScript XML（HTML）的缩写，表示在JS代码中书写HTML结构作用：在React中创建HTML结构（页面UI结构）优势1：采用类似于HTML的语法，降低学习成本，会HTML就会JSX2：充分利用JS自身的可编程能力创建HTML结构。
npx创建React项目报错
wjswangjinsheng的博客
02-05 830
先来看报错信息 然后百度了老半重装了node,npm,都更新了一遍还是不行,最后在在GitHub中找到这样一个评论 if you want to use current path that has space in username "C:\Users\Firstname Lastname\AppData\Roaming\npm-cache" you can replace the string...
React开发环境搭建
听海边涛声
07-24 825
React开发环境搭建
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值