55.React学习 —— react脚手架使用

已于 2024-04-07 14:11:17 修改
阅读量388 收藏 12
点赞数 10
分类专栏： React基础学习 从零教你学Web前端 文章标签： react.js 学习 前端 笔记 前端框架 经验分享
于 2024-02-19 11:17:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kylincsg/article/details/136165810
版权

react脚手架使用

react中写代码,写完的代码,也要打包. 自己配置webpack非常繁琐,所以直接使用react脚手架工具,帮我们直接配置好webpack以及项目的目录结构

create-react-app

使用:

  1. 下载

     npm i create-react-app -g

  2. 使用这个工具

    create-react-app 项目名称

npm中提供了一个新的指令: npx

npx create-react-app 项目名称

npx做的事情:

  1. 先往全局下载create-react-app这个脚手架工具
  2. 自动通过这个脚手架工具,下载项目所有的所有文件
  3. 项目处理完毕,自动将create-react-app从全局中删除掉

上一篇：Hooks
下一篇：React路由

Kylincsg
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React---使用react脚手架搭建项目
lelara的博客
04-21 878
一、使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查、jsx编译、devServer…) 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: re...
React教程（由浅到深）
热门推荐
web$-小白
07-02 3万+
1.params参数路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>`接收参数：this.props.match.params2.search参数路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
React＜＞
qq_40055200的博客
09-12 2万+
创建react项目命令： npx create-react-app my-app 进入文件夹: cd my-app 启动项目: npm start（开发模式下运行） npm test(测试环境运行） npm run build(打包为生产模式） 显示配置文件:不可逆的，只要显示了就没有任何方法再隐藏回去 npm run eject 为什么在src创建子目录？ webpack只处理src的中的文件。如果不讲css和html放在src文件夹下，webpack发现不了。 rea.
React学习（一）——基础项目搭建以及环境配置
ClassMake的博客
05-31 250
关于react，就不多做介绍了，大家都懂，我们直接开始搭建React框架运行环境： 1：首先，我们需要安装node.js，直接搜索并在官网下载安装包。 node.js官网：https://nodejs.org/en/ 选择适合的版本后下载下来，并打开安装程序，如下图所示 然后，根据安装提示安装node.js，npm包管理工具也会一同安装。 安装完成后，打开cmd命令行,输入 node -v 和 ...
react面试题（六到七部分）
m0_61373758的博客
05-16 834
第六部分：React 1、React 事件绑定原理 理解：react中的事件都是合成事件，不是把每一个dom的事件绑定在dom上，而是把事件统一绑定到document中，触发时通过事件冒泡到document进行触发合成事件，因为是合成事件，所以我们无法去使用e.stopPropagation去阻止，而是使用e.preventDefault去阻止。 1.事件注册：组件更新或者装载时，在给dom增加合成事件时，需要将增加的target传入到document进行判断，给document注册原生事件回调为dispa
初学react native（脚手架与expo一些报错）
weixin_41105030的博客
05-29 2173
移动APP 移动指的是移动设备平台, app 是应用 (application) 的缩写, 移动App就是移动设备上运行的应用程序 安装 安装个环境感觉在大战一场武林大会一样… npm install -g create-react-native-app 当然什么node环境；cnpm；yarn什么的再这里就不说；保存我的内力… create-react-native-app [参考文档] h...
React-Native开发中常用的第三方控件持续更新
wayne214的博客
01-28 2万+
笔者简书：https://www.jianshu.com/u/8ba7c349861d， 欢迎大家关注 笔者个人网站：https://wayne214.github.io/ 公众号：君伟说 十一假期学习撸了一个小程序，欢迎各位朋友进行关注，代码已经在gitHub上开源： 清风天气 清风天气 2019.11.11更新： react-native-extra-dimensi......
低代码平台开发——基于React（文末送书）
小程的博客
03-05 3653
《低代码平台开发——基于React》这本书主要围绕低代码平台和React技术的结合展开，为读者提供了关于低代码平台开发的理论和实践知识。
Ink——一款使用React风格开发命令行界面应用(CLI App)的nodejs工具
weixin_30858241的博客
07-27 229
Github:https://github.com/vadimdemedes/ink Ink introduction: React for CLIs. Build and test your CLI output using components. （通过使用组件的方式去搭建和测试你的命令行界面输出） 也就是说，我们可以使用像react那样的方式来组织代码，开发出运行在命...
WEB 前端面试题 (高能)
m0_64191440的博客
11-11 1108
我们让原型对象等于另一个原型对象的实例,此时原型对象 ,将包含一个指向原型对象的指针，再让原型对象 的实例等于原型对象，如此层层递进就构成了实例和原型的链条，这就是原型链的概念。取得了另外一个值，则原先的引用值引用次数就减 1，当这个值的引用次 数为 0 的时候，说明没有办法再访问这个值了，因此就把所占的内存给。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的。描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
2023前端vue面试题及答案
bb_xiaxia1998的博客
02-28 1057
在 Vue2 中， 0bject.defineProperty 会改变原始数据，而 Proxy 是创建对象的虚拟表示，并提供 set 、get 和 deleteProperty 等处理器，这些处理器可在访问或修改原始对象上的属性时进行拦截，有以下特点∶。有的时候，需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情。
ref 和 reactive 区别
最新发布
weixin_46515691的博客
08-31 620
前言 ref 和 reactive是Vue 3中响应式编程的核心。在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。 ref ref是Vue 3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的)。它的主要优点是能够轻松包装基本数据类型，并且具有清晰的访问和更新方式 ref创建基本类型的响应
React 入门第七天：探索状态管理与Context API
Caleb的博客
08-27 467
在React学习的第七天，我深入了解了React的状态管理机制，特别是如何通过来实现跨组件的状态共享。React的状态管理是组件交互的核心，而则为全局状态的共享提供了一个简洁而强大的解决方案。
Netty Reactor面试连环问
Hi，我是sharkchili，CSDN Java领域博客专家，开源项目JavaGuide维护人员，我想写一些有意思的东西，希望对你有帮助。
08-27 737
笔者分别带入索引0、5、8，进行与运算时，真正参与的二进制永远是和永远是7以内的进制，得出的结果分别是0、5、0，永远不会越界，并且运算性能还能得到保证。中查看是否有继续的任务，如果有则查看它的到期时间，并基于这个时长查询是否存在就绪的任务。因为近期收到很多读者的私信，所以也专门创建了一个交流群，感兴趣的读者可以通过上方的公众号获取笔者的联系方式完成好友添加，点击备注。因为近期收到很多读者的私信，所以也专门创建了一个交流群，感兴趣的读者可以通过上方的公众号获取笔者的联系方式完成好友添加，点击备注。
vue ref和reactive区别
灰海
08-25 5419
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
React基础面试题
只会写bug
08-30 806
Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。这可以提高应用程序的性能。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。状态是 React 组件的核心，是数据的来源，必须尽可能简单。
React antd 表格嵌套表格（可展开）
m0_63788547的博客
08-27 492
React antd 表格嵌套表格（可展开）
react 父子传值_React学习——通过模态框中的表单学习父子组件之间传值
05-17
class Modal extends React.Component { constructor(props) { super(props); this.state = { formData: {} }; } // ... } ``` 然后，在Modal组件中定义一个函数，用来接收Form组件传递的数据，并更新Modal...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值