【React】9、使用create-react-app（CRA）创建react项目

已于 2022-07-09 22:40:45 修改
阅读量1.2k 收藏 15
点赞数 22
分类专栏： React--从基础到实战 文章标签： react.js javascript 前端 前端框架
于 2022-06-01 13:59:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Svik_zy/article/details/125056139
版权
本篇博客介绍如何使用create-react-app创建React项目，包括脚手架的作用、项目结构解析、创建与启动步骤，以及index.html的内容概述。通过本教程，读者将能快速上手React开发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

👏欢迎来到我的React系列文章
🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列
🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界
🍭持续更新中～希望大家能够喜欢，系列文章👉React–从基础到实战
🌈博客主页👉codeMak1r的博客
👉关注✨点赞👍收藏📂

  1. 🔥React入门与概览（JSX语法）
  2. 🔥面向组件编程——组件实例的三大核心属性state、props和refs超详解
  3. 🔥受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）
  4. 🔥React函数的柯里化（什么？这玩意儿不仅能装x，还能优化代码？）
  5. 🔥四行代码让我的cpu跑上90度——走进组件生命周期
了解本专栏 订阅专栏 解锁全文 超级会员免费看
React脚手架
m0_45136861的博客
03-21 550
React脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer…） 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化 第一步，全局安装：npm i -g create-react-app
create-react-app 快速搭建一个react项目（完整结构）
u012805132的博客
06-01 5360
说明 这是facebook团队的一个小项目，可以快速搭建一个react的项目结构，容易上手，非常适合像我这样的初学者。 步骤 node.js环境： 首先你得安装这个，因为后续的npm命令是基于这个的，不赘述。 直接安装： 运行npm install -g create-react-app; 为什么要-g这个我说一下我的情况，因为我在创建my-app的时候，一开始没有全局安装，导致np...
使用create-react-app创建一个react项目
留白声的博客
05-11 885
使用create-react-app创建一个react项目 create-react-app是react官方提供的脚手架，该脚手架为我们省去多余的操作，可以让我们更快捷的开发react项目 create-react-app创建项目：
快速开始React开发（一）
最新发布
韵律咖啡馆
03-05 765
React是一个，用于构建交互式网站，并且能够快捷创建，其组件化的思想也是被一再传播，无论是普通的Web网站还是嵌入移动端交互都常见到其身影，那么，搞起~~
使用 create-react-app 创建 react 应用
qiao
01-24 3826
/ 定义类式组件render() {return (Hello 组件Component// React 中使用了默认暴露和分别暴露，所以可以使用下面的引入方式// 定义类式组件render() {return (Welcome组件能使用以上引用方式是因为 React 中使用了默认暴露和分别暴露// 分别暴露 Component// 默认暴露 React。
React使用create-react-app创建react项目
HTML网页设计
08-21 1940
👏欢迎来到我的React系列文章🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界。
create-react-app创建项目并对cra兼webpack二次配置详解
01-20
在本文中，我们将深入探讨如何使用`create-react-app`创建React项目，并进行Webpack的二次配置...如果你的React项目也需要这样的定制，不妨尝试使用`create-react-app`结合`customize-cra`进行二次配置，提升开发体验。
create-react-app-express：CreateExpress服务器用于您的Create React App（cra-universal的骨干网）
02-05
在创建项目时，你需要首先安装`create-react-app-express`。这可以通过运行以下命令完成： ```bash npx create-react-app-express my-app ``` 这会创建一个名为`my-app`的新目录，其中包含了前端React应用和后端...
cra-and-storybook：使用create-react-app@3.4.0并手动安装@ storybookcli @ 5.3.14
02-04
使用create-react-app@3.4.0和storybook@5.3.14一次加载多个故事 故事书创建用于的预设 此存储库基于的， 要复制它，您可以执行以下操作： npx create-react-app my-app cd my-app npm install --save-dev @...
create-react-app-monorepo-example:使用create-react-app和yarn工作区的Monorepo示例
04-30
具有create-react-app和yarn工作区的Monorepo示例 这只是一个对纱线工作区进行快速monorepo测试并创建react应用程序。 工作区是设置程序包体系结构的一种新方法，默认情况下从Yarn 1.0开始可用。 它允许您以以下...
【React】创建React项目：使用 create-react-app 创建 React 应用
DZSpace，专注于计算机科学与技术领域的技术博主，致力于分享实用知识与技巧，帮助读者快速掌握技术要点，共同探索计算机世界的无限可能。欢迎访问DZSpace的博客，一起学习进步！
07-16 2345
创建React项目：使用 create-react-app 创建 React 应用
【React 系列】Create React App
贾斯丁的博客
04-19 190
快速创建app npm install -g create-react-app create-react-app react-admin
React（4）—— 使用create-react-app创建一个React项目
2401_84091321的博客
04-07 746
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取知识点，真正体系化！**[外链图片转存中…(img-V6Y1vc4W-1712473404751)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取。
react---create-react-app搭建项目
maidu_xbd的博客
06-12 485
【index.js】--将APP组件渲染到页面。%PUBLIC_URL%代表public目录。【index.html】--应用入口文件。【Hello组件/Welcome组件】3.hello_react示例。
React基础(1)-create-react-app
itclanCoder
11-06 493
前言 如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词 尽管三者实现业务最终的目的都能达成一致,但是各有特色,其中任何一框架,个人觉得,都博大精深,可圈可点,要学习的内容有很多,我也仅仅是浅尝辄止而已. 有时候,因为工作项目的需要,自己在切换各个技术栈的时候,只要一段时间没有用,就有些陌生,说到底不得不承认自己功力不够 本文并不是什么教...
react create-react-app v5 从零搭建（使用 npm run eject）_react app
2401_86358943的博客
09-11 1608
如果你的项目使用的是较旧的 Babel 版本，则无法支持使用 .babelrc 进行配置，需要改用 babel.config.js 文件进行配置。Babel 默认配置：Create React App v5 的默认 Babel 配置中使用了 @babel/preset-env，它会根据目标浏览器的兼容性要求，自动转译代码并进行 Tree Shaking。解决方案就是只保留一个配置：要不就直接在package.json里配置，要不就 把package.json的babel删掉都放在.babelrc.
create React App
weixin_44105087的博客
06-12 361
Create React App 创建项目 TypeScript模版增加配置请查看 # 默认创建项目 yarn create react-app <项目名> # 使用typescript创建项目 yarn create react-app <项目名> --template typescript 优化package.json 将原来的dependencies、scripts改为以下 { "scripts": { "dev": "react-scripts start"
Create React App
前端小白成长记
11-05 1222
一、mac电脑Create React App 在item中通过cd 相应的文件夹 然后 npx create-react-app my-app（my-app可以替换成任何你想要命名的文件夹） 如下图所示 出现报错：there appears to be trouble with your network connection. retrying 解决方法： yarn --ne...
create react app
神zhi殇的博客
01-08 337
文章目录indexless to learn：only one dependency 只有一个依赖No Lock-In 没有锁定Easy to Maintain 易于维护getting startedcreating an appnpxnpmyarnselecting a templateselecting a package managerfolder structure 官网：https://...
评论 29
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codeMak1r.小新

感谢大佬的资瓷！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值