快速创建 react 项目

最新推荐文章于 2025-09-12 10:51:28 发布
原创 最新推荐文章于 2025-09-12 10:51:28 发布 · 187 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

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

本文介绍了如何在具备Node.js和npm环境的基础上，利用CreateReactApp脚手架创建一个React项目。通过命令行工具，执行npxcreate-react-app命令创建项目，然后使用cd进入项目文件夹，运行npmstart或yarnstart启动项目，最后在浏览器中查看项目运行效果。

搭建之前请确保安装了nodejs和npm

我就不多赘述这两个是什么了

使用官方的Create React App脚手架快速搭建react项目

打开cmd或者bash等命令行，进入到你要创建项目的文件夹，执行下面命令，然后耐心等待一下

npx create-react-app react-dome // react-dome是项目名称，可以修改成你想要的名字

当出现以下代码就说明成功了

 创建成功react项目之后，cd进入到项目文件夹。可以看到也有提示出来了，我们复制即可。

我这里就使用的是我的命名的文件夹。

执行cd reactzhufeng进入项目文件夹。 

可以看到最后一行我们已经进入到当前的项目文件夹了；然后使用npm start 或者yarn start运行项目，根据个人的安装来使用，我这里就使用yarn。

下面是项目启动成功的浏览器页面。

 

addction
关注
从零搭建React全家桶框架教程：快速搭建react+react-router+redux项目
qq_24428851的博客
08-12 1448
本文中没有对react-router和redux做什么原理性和概念性的介绍，纯粹作为傻瓜式的教程，由react基本项目，到接入react-router，最后接入redux完成一个基本的react全家桶项目搭建，目的是让初学者能够体验一下完整的react全家桶基本项目。之前的教程是搭建一个常见jsx版react项目，最近在新项目中使用了ts语言，组件编写全面拥抱了hooks，redux使用reduxjs/toolkit，而不是thunk。接下来我们稍稍调整下项目的目录结构和页面内容，新增About页面。
从零开始创建&配置一个React项目
shifff的博客
11-01 3283
可能是因为 TypeScript 没有全局安装，或者你没有正确配置路径来运行 tsc。这里我们不需要全局安装，所以我们直接配置路径。需要使用 Babel 将 React 和 TypeScript 代码转换为 JavaScript。命令将ts安装为开发环境的依赖，不需要在生产环境中运行。在VSCode 中安装 EditorConfig 插件。安装TS，要先在全局安装有yarn包管理工具，tips：所有配置文件均配置在项目的根目录下。VScode中安装stylelint插件。进行TS配置，在项目根目录通过。
REACT实战项目从0到1搭建（仅供参考）
热门推荐
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
React项目搭建
weixin_45889523的博客
08-30 167
参考：文档 1.安装node.js https://nodejs.org/en/ 打开cmd命令行,输入 node -v 和 npm -v 来查看版本号 2.全局安装create-react-app， npm install -g create-react-app 3.选择文件夹创建项目 create-react-app my-new-app node_modules用于存放项目的依赖包，构建React项目可能会用到的工具 public是 index.html（React根页面）存放目录 src存放js文
使用creat-react-app快速新建一个react项目
qq_35430000的博客
04-03 5699
Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。由于create-react-app命令预先安装和配置了webpack和babel，同时也初始化了npm（可以通过npm init来初始化，初始化完会有一个package.json文件，专门来说明你的项目的一些基本信息和可以设置npm自定义命令），所以有几...
react-app-starter：一个用于快速创建React项目的模板脚手架，使用Webpack与Storybook构建的工具。 使用Webpack和Storybook创建React应用程序的样板
02-04
一个用于快速创建React项目的模板脚手架，使用Webpack与Storybook构建。 快速开始 git clone https://github.com/senntyou/react-app-starter.git --depth=1 cd react-app-starter npm install # 安装依赖 npm run ...
快速上手Vite创建React项目
最新发布
没有撤退可言.
09-12 1066
摘要：本文详细介绍了如何使用Vite快速创建React项目。首先确保Node.js 18+环境，通过npm create vite@latest命令启动项目初始化，交互式选择React框架和JavaScript/TypeScript变体。完成创建后，依次执行cd项目目录、npm install安装依赖，最后npm run dev启动开发服务器访问本地页面。Vite提供极速的开发体验，支持主流框架和TypeScript，适合快速搭建现代前端项目。
React入门01-从零开始快速搭建react基础开发环境
qq_33546823的博客
06-29 1374
介绍了入门搭建一个空白的React空白项目，详细介绍了npx的使用，与npm的对比以及优点。
使用Expo快速创建React Native项目
相信自己，没有攀不过去的高山！
08-15 1287
Expo快速上手，创建一个React Native项目a：android设备运行w：web设备上运行r：重新加载应用s：切换到开发构建模式此时，我们输入a可在Android上运行当前项目。
【新手向】我是如何快速创建 React +TypeScript 项目
超逸の学习技术博客
05-30 2846
文章目录使用 Create React App目录结构解读绝对路径与相对路径代码格式化统一配置（可选）What is Prettier?Why?如何安装自动化执行代码格式化Pre-commit Hook 使用Pre-commit Hook 介绍解决冲突问题后续最后 使用 Create React App Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。 React 官网：Create React App 那么，如果我们要创建一个名为
react创建新项目教程（超简单，一看就会，最新详细）
weixin_66071584的博客
08-27 6051
新建react项目初始化教程，报错找不到模块“./App”或其相应的类型声明。react啥都没有，你需要下载react-router-dom，用pnpm 或者npm yarn都行。，npm的命名限制规定名字不能包含大写字母），创建成功后cd 进入刚刚创建的目录。到这里React项目创建成功，如果额外的项目初始化可以往下操作。exercise是你需要创建的文件名（自定义，重新创建src目录/index.tsx。重新创建src目录/index.tsx。解决：在命令行中输入以下命令来找到。
快速创建一个react项目
halo1416的博客
03-07 1万+
创建一个react项目有三种方式： 1.create-react-app 快速脚手架（简单，类似于 vue-cli 工具） 2.webpack一步一步构建 3. 第三方脚手架（generator-react-webpack，需要yeoman的支持） 这里主要介绍利用create-react-app 快速脚手架 创建一个react项...
Xcode 12 新建OpenGL项目无需重新配置环境
NJR10byh的博客
09-24 567
在macOS下，我们大多会使用Xcode来运行OpenGL项目，目前，Xcode已经来到了12版本，我们该如何新建OpenGL项目而省略掉繁琐的配置过程呢？ 系统版本: macOS 10.15.6 软件版本: Xcode 12.0 首先我们进入Finder，找到我们已经创建好的OpenGL项目 这里我们可以看到，我创建的原项目名为GLFW OpenGL-test ，直接复制它，改个名字 我已经将新项目改名为GLFW OpenGL-test-2，我们进入Xcode看一下效果 GLFW OpenGL-t
React-快速搭建一套react项目
weixin_44675782的博客
12-28 680
看过一个人写的react学习，非常系统，循序渐进，可以说看过他的文章，想不会都难。我现在在他的基础上，总结适合我自己看懂的React学习之路。 首先，安装node和npm，这里不写具体方法。 第一步：全局安装create-react-app脚手架工具 *[npm install -g create-react-app]: 第二步：利用脚手架创建一个react项目 create-react-app ...
搭建React项目
tian19920813的博客
03-14 2861
创建一个新文件夹my-react-app，并在该文件夹下使用终端创建项目my-react-app。暴露webpack配置，此操作不可撤销，请按需要操作。react项目默认隐藏了webpack相关配置，执行。在src下新建文件src/api/http.ts。在页面上看到欢迎按钮，引入成功。此时，项目已经创建完成，运行。
创建react项目
alinavae的博客
08-06 1074
下面介绍三种创建react项目的方式是 React 官方推出的零配置脚手架工具，适合初学者和快速开发。
【学习】从零搭建react项目(简易版)
m0_61097007的博客
05-08 1456
在日常工作中，我大多是在已有的项目基础上进行开发，而非从头构建项目。因此，我期望通过本次学习能填补我在项目初始化阶段知识的空白，与大家共同进步。在此过程中，我欢迎并感激任何指正或建议，无论是关于错误修正还是更优的解决策略，让我们相互促进，共同提升。在我们正式开发之前，请确认您的计算机已安装Node.js环境，这是进行后续任务的前提。如未安装，请访问Node.js官网(https://nodejs.org/)，根据您的操作系统挑选并安装最新版本。安装完毕后，通过在命令行界面分别执行node -v和。
命令行创建React项目
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
09-25 5886
cnpm install -g create-react-app 找一个创建项目的目录，用cmd打开资源管理器对应目录运行 create-react-app demo 注意：安装过程中最好焦点不要移出cmd窗口，有时候会莫名其妙的中断安装
【React 】开发环境搭建详细指南
lph159的博客
07-24 7324
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值