React基础教程：react脚手架

最新推荐文章于 2024-08-10 13:33:27 发布
最新推荐文章于 2024-08-10 13:33:27 发布
阅读量662 收藏 2
点赞数 16
分类专栏： React教程 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WwLK123/article/details/139522662
版权

1、create-react-app

全局安装create-react-app

npm install -g create-react-app

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

安装成功之后，通过命令create-react-app -V检查是否安装成功

在这里插入图片描述

创建一个项目

create-react-app my-app

在这里插入图片描述

如果不想全局安装，可以直接使用npx，也可以实现相同的效果

npx create-react-app my-app

这需要等待一段时间，

了解本专栏 订阅专栏 解锁全文 超级会员免费看
叁拾舞
关注
  • 16
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
react create-react-app脚手架安装及查看版本
u014678583的博客
12-26 9435
create-react-app是业界最优秀的 React 应用开发工具之一，也就想相当于vue 的vue-cli。 查看create-react-app版本 create-react-app -V or create-react-app --version 安装及创建项目 // 全局安装 npm install -g create-react-app // 检查有没有安装成功，成功的话会返回一个版本号 create-react-app -V //构建一个react的项目antd-dem..
如何使用create-react-app脚手架安装
NoahOswinChan的博客
03-27 486
首先，确保已经安装了node，如果没有安装node可以參考https://blog.csdn.net/NoahOswinChan/article/details/88842696 使用命令 npm i -g create-react-app 全局安装create-react-app 检测create-react-app是否安装成功 create-react-app -V 注意，V是大写。...
01-React安装(CRA)、概念、组件创建-嵌套-组合-样式-数据挂载的两种方式
qq_37970964的博客
09-16 752
一、create-react-app（CRA） 1、安装create-react-app $ npm install -g create-react-app 如果不想全局安装，可以使用npx安装 npx create-react-app appName 1、如果npm安装失败，可切换为npm淘宝镜像， 2、或者使用yarn yarn config set registry https://re...
React - 1 项目结构（以及创建项目）
a9874561328的博客
02-14 823
1 'react' 和 'react-dom' 'react'和'react-dom'是每个react文件必须要有的包 'react' 是react的顶级API，包含众多方法，其中Component尤为重要作用为编译jsx,还包括Fragment(空标签),createRef(定义类组件的ref),useRef(定义函数组件的ref)等方法 'react-dom'的唯一作用是渲染并构建dom树 ...
create-react-app命令的执行问题
MK.Gao Blog
01-26 3720
当cretate-react-app appname是出现 postinstall: info时间。。。时， 使用 npm install -g npm@latest 更新下npm，之后使用管理运行npm 重新试下就ok了。
React教程（详细版）
热门推荐
Ronychen的博客
03-19 19万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
React教程（一）：React基础
qq_43682422的博客
03-23 861
一个专注于构建用户界面的javascript库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内最流行的的js前端框架。概念：JSX是javascript XML（HTML)的缩写，表示在JS代码中书写HTML结构。作用：在React中创建HTML结构（页面UI结构）优势：1）采用类似HTML的语法，降低学习成本，即会用HTML就会JSX2）充分利用JS自身的可编程能力创建HTML结构。
react 基础 react脚手架安装与使用教程
qq_52426181的博客
08-02 320
react 基础 react脚手架安装与使用教程 安装node与npm 你需要在你的机器上安装 Node >= 10.16 和 npm >= 5.6 版本。 要创建项目，请执行： npx create-react-app my-app 如果遇到yarn报错，可以升级yarn（本人当时嫌麻烦 直接删除掉了 。。。） 启动项目 进入需要安装的文件夹的命令行cd my-app然后再根文件的命令行输入 npm start react的使用 1、进去后找src>index.js 全部删了 里面
create-react-app脚手架安装使用
Dancy的博客......
10-26 2487
首先，确保已经安装了node，如果没有安装node可先去node.js中文网下载安装。 使用命令 npm i -g create-react-app 全局安装create-react-app 检测create-react-app是否安装成功 create-react-app -V 注意，V是大写。如果出现版本号，则表示安装成功，不过如果你当前安装的node版本不支持你安装的create-rea...
React 知识点（二）
措手不及ya的博客
08-07 829
React 组件、React 组件通信-父子通信、React 组件通信-子父通信、React 组件通信-兄弟通信、React 组件通信-跨组件通信(祖先)、props-children 属性、props-类型校验、React 生命周期、setState 扩展
详细解释 React 组件的生命周期方法
久念☆的博客
08-07 1010
React 组件的生命周期方法可以分为三个主要阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting），以及错误处理阶段。每个阶段都有特定的生命周期方法，允许开发者在组件不同的生命周期时执行特定的操作和逻辑。
全栈物联网云平台搭建：MQTT、Node.js、MongoDB、InfluxDB与React的应用示例
嵌入式极客小张
08-07 1035
在本篇文章中，我们将深入探讨如何搭建一个高效的物联网（IoT）云平台，采用的核心技术栈包括MQTT协议、Node.js、MongoDB、InfluxDB以及React框架。首先，我们利用MQTT协议实现设备与云端的高效通信，确保数据的实时传输和可靠性。然后，后端使用Node.js建立服务，处理来自MQTT Broker的消息，并将采集到的温度数据存储在MongoDB和InfluxDB中，以便进行灵活的数据管理和复杂的时间序列分析。此外，我们设计了RESTful API，方便前端应用获取数据。
React事件绑定的方式有哪些？区别？
久念☆的博客
08-07 330
这是最常见和推荐的方式。事件名（如onClick）作为 JSX 的属性，值为一个函数，当事件触发时该函数将被调用。这种方式下，事件处理函数是类中的一个方法，需要确保在 JSX 中通过this来引用它。useStateuseEffect使用useState来管理状态，然后在 JSX 中直接使用事件处理函数。可以通过匿名函数来传递参数给事件处理函数，这在需要传递额外参数时很有用。
vue3中 ref 和 reactive 的区别
肖肖肖丽珠的博客
08-08 373
2.访问方式不同：对于通过ref函数创建的响应式数据，我们可以通过.value属性来访问其实际值；1. 数据类型不同：ref用于包装JavaScript基本类型的数据（如字符串、数字、布尔值等），而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。3.设计理念不同：ref主要是为了解决单一元素/数据的响应式问题，而reactive则是为了解决JavaScript对象和数组等复杂数据结构的响应式问题。相同：均是声明响应式对象。且声明的响应式对象是深层的。
React类组件与函数组件有什么异同
liangzhenmeng的博客
08-07 5962
组件是react的最小代码片段，无论函数组件还是类组件 在使用方式 和 最终呈现效果是一致的 类组件可以用函数组件重构，同样函数组件也可以用类组件重构（并不推荐），在现代浏览器中闭包 和 类的性能只有在极端场景下才会有差异，所有认为基本一致 差异 从心智模型上分析，类组件是面向对象编程，核心概念是 继承 和 生命周期； 类组件的内核是函数式编程，主打immutable、没有副作用、引用透明（类中的this有很多自带属性，相对不透明）等 之前，在使用场景，如果需要生命周期钩子，则首推类组件
关于React.createContext全局注入的一些记录
小小小卒
08-07 516
React.createContext 全局注入异步数据
GitHub开源项目精选：轻量级预约/预订日历组件，用React和TypeScript构建
最新发布
前端达人
08-10 136
在日常开发中，我们经常需要在项目中添加预约或预订功能。今天给大家推荐一个超级轻量级的预约/预订日历组件，它是用React和TypeScript构建的，非常适合那些需要简单易用的日历解决方案的开发者。安装方法：你可以选择使用npm或者yarn进行安装：npminstallreactjs-availability-calendar或者yarnaddreactjs-availability-ca...
react脚手架安装失败
08-15
回答: 如果在安装React脚手架时遇到失败，可以尝试以下解决办法: 1. 确保你的npm版本高于5.2，如果低于这个版本，请先升级npm。你可以在命令行中输入npm -v来查看当前的npm版本。 2. 如果npm版本低于5.2，可以尝试全局安装create-react-app。在命令行中输入npm install -g create-react-app来进行安装。 3. 如果全局安装create-react-app后仍然失败，可以尝试卸载全局安装包。在命令行中输入npm uninstall -g create-react-app来进行卸载。 4. 如果还是无法解决问题，可以尝试使用淘宝镜像的cnpm命令来导入react和react-dom，具体命令是cnpm install --save react react-dom。 希望以上解决办法能够帮助到你。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [React npm i react react-dom 安装不成功，报错](https://blog.csdn.net/m0_52173534/article/details/117884614)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [安装react脚手架以及错误如何解决](https://blog.csdn.net/weixin_57156748/article/details/120025282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [react脚手架安装问题及其解决办法](https://blog.csdn.net/zw1358978796/article/details/113785653)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

叁拾舞

你的鼓励将是我最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值