React基础教程:react脚手架

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

这需要等待一段时间,这个过程实际上会安装三个东西:

在这里插入图片描述

  1. 【react】:react的顶级库。
  2. 【react-dom】:因为react有很多的运行环境,比如app端的react-native,我们要在web上运行就使用react-dom。
  3. 【react-scripts】:包含运行和打包react应用程序的所有脚本及配置。

如果看到以下内容,就说明安装成功了

在这里插入图片描述

常见问题:npm安装失败

  • 切换为npm镜像为淘宝镜像

    • npm i -g nrm
      
    • nrm ls
      
    • 在这里插入图片描述

  • nrm use taobaonrm ls
    
  • 在这里插入图片描述

2、编写第一个react应用程序

react开发需要引入多个依赖文件:react.jsreact-dom.js,分别又有开发版本和生产版本,create-react-app已经帮我们把这些东西安装好了。把通过CRA创建的额工程目录下的【src】目录清空,然后在里面重新创建一个index.js写入以下代码:

import React from "react";
import ReactDOM from 'react-dom';ReactDOM.render(<div><p>Team Suns</p><ul><li>杜兰特</li><li>布克</li><li>比尔</li></ul>
</div>, document.getElementById('root'))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/24757.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小主机折腾记25

10.买了惠普光驱&#xff0c;想给880g5twr安装上&#xff0c;结果发现卡扣不对 880g5twr的卡扣更长一些&#xff0c;比光驱本身长一些&#xff0c;各位如果想买的注意擦亮眼睛&#xff0c;看看卡扣跟你的主机一致与否 后续在闲鱼上买了个卡扣&#xff0c;加邮费12块钱…… 1…

转让闲置商标别中了残标,与驰名商标近似被驳回!

前几天有个人说要购买一个闲置的已注册商标&#xff0c;普推商标知产老杨帮忙去联系了一下&#xff0c;发现这个商标是残标用不成&#xff0c;他是要买回来的做化妆品的&#xff0c;但是在3类化妆品里面化妆品的小类并没有通过初审下证。 大家转让闲置商标就要注意了&#xff0…

链表的中间结点

一、题目链接 https://leetcode.cn/problems/middle-of-the-linked-list/submissions/538121725、 二、思路 定义快慢指针&#xff0c;快指针一次走两步&#xff0c;慢指针一次走一步&#xff0c;最后慢指针的位置就是中间结点的位置 三、题解代码 //快慢指针&#xff0c;快…

带你学习Mybatis之逆向工程

逆向工程 可以针对单表自动生成MyBatis执行所需要的代码&#xff0c;包括&#xff1a;Mapper.java&#xff0c;Mapper.xml&#xff0c;实体类&#xff0c;这样可以减少重复代码的编写 <dependency> <groupId>org.mybatis.generator</groupId> …

【计算机视觉(9)】

基于Python的OpenCV基础入门——形态学操作 形态学操作腐蚀膨胀开运算闭运算梯度运算顶帽黑帽 形态学操作代码实现以及效果图 形态学操作 形态学操作是数字图像处理中的一种方法&#xff0c;用于改变和提取图像中的结构和形状信息。它基于图像的形状和大小特征&#xff0c;通过…

基于SpringBoot+Vue单位考勤系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…

B3928 [GESP202312 四级] 田忌赛马

[GESP202312 四级] 田忌赛马 题目描述 你要和田忌赛马。你们各自有 N N N 匹马&#xff0c;并且要进行 N N N 轮比赛&#xff0c;每轮比赛&#xff0c;你们都要各派出一匹马决出胜负。 你的马匹的速度分别为 u 1 , u 2 , ⋯ &#xff0c; u n u_1,u_2,\cdots&#xff0c;…

2024上海初中生古诗文大会倒计时4个多月:单选题真题和独家解析

现在距离2024年初中生古诗文大会还有4个多月时间&#xff0c;我们继续来看10道选择题真题和详细解析&#xff0c;以下题目截取自我独家制作的在线真题集&#xff0c;都是来自于历届真题&#xff0c;去重、合并后&#xff0c;每道题都有参考答案和解析。 为帮助孩子自测和练习&…

STM32F103C8移植uCOSIII并以不同周期点亮两个LED灯(HAL库方式)【uCOS】【STM32开发板】【STM32CubeMX】

STM32F103C8移植uC/OSIII并以不同周期点亮两个LED灯&#xff08;HAL库方式&#xff09;【uC/OS】【STM32开发板】【STM32CubeMX】 实验说明 将嵌入式操作系统uC/OSIII移植到STM32F103C8上&#xff0c;构建两个任务&#xff0c;两个任务分别以1s和3s周期对LED进行点亮—熄灭的…

在ADG只读备库使用数据泵导出数据

实际场景中存在某些需求&#xff0c;客户害怕在主库使用数据泵导出数据会对主库的运行造成影响&#xff0c;所以要求从备库导出数据。但数据泵无法直接从只读备库进行导出&#xff0c;需要借助一个中间库来实现。 针对在ADG只读备库环境无法使用数据泵进行导出的问题&#xff…

前端渲染大量数据思路【虚拟列表】【异步机制】

当浏览器遇到性能瓶颈导致页面卡顿时&#xff0c;你会怎么处理&#xff1f;如何查找问题的原因&#xff1f; 浏览器本身自带性能检测工具&#xff0c;通常我们分析由脚本导致的页面卡顿会选择 性能&#xff08;performance&#xff09; 选项卡&#xff0c;在其中我们可以找到导…

3D Gaussian Splatting for Real-Time Radiance Field Rendering

辐射场方法最近在基于多张照片或视频进行新视角合成方面取得了革命性进展。然而&#xff0c;实现高视觉质量仍然需要耗时且计算成本高的神经网络&#xff0c;而最近的快速方法不可避免地在速度和质量之间进行了权衡。对于无界和完整的场景&#xff08;而不是孤立的物体&#xf…

【Vue】vuex 的使用 - 创建仓库

通用的地方我们一般会称之为仓库 1.安装 vuex 安装vuex与vue-router类似&#xff0c;vuex是一个独立存在的插件&#xff0c;如果脚手架初始化没有选 vuex&#xff0c;就需要额外安装。 yarn add vuex3 或者 npm i vuex32.新建 store/index.js 专门存放 vuex ​ 为了维护项目…

【排序算法】总结篇

✨✨这些 排序算法都是指的 需要进行比较的排序算法 ✨✨下面都是略微讲解一下思路&#xff0c;如果需要详细了解哪一个排序&#xff0c;点击&#x1f449;链接即可 ✨✨对于时间、空间复杂度、稳定性&#xff0c;希望你&#x1f9d1;‍&#x1f393;能够理解记忆&#x1f9d1;…

如何优化Vue组件的性能和通信效率?

优化Vue组件的性能和通信效率涉及多个方面&#xff0c;包括组件的设计、懒加载、条件渲染、事件通信以及避免不必要的重新渲染等。下面是一些实用的优化策略&#xff1a; 组件懒加载&#xff1a; 使用异步组件加载机制&#xff0c;只有在组件需要显示时才去加载该组件。例如&a…

Science刊发!乌普萨拉大学最新神经形态触觉人造皮肤可快速精准识别物体

当前&#xff0c;人形机器人使用的传统电子皮肤在处理触觉感知信息方面的能力并不强&#xff0c;尤其是在时间信息编码和快速特征提取方面存在一定的局限性。简单来说就是机器人无法完成在接触到物品的瞬间&#xff0c;判断用怎样的力度去对该物品做出反应。尽管多模态大模型和…

顶级域名和二级域名的区别

互联网是一个由无数个网络节点组成的复杂系统&#xff0c;而域名则是这个系统中用于识别和定位这些节点的重要工具。在域名体系中&#xff0c;顶级域名(Top-Level Domain&#xff0c;TLD)和二级域名(Second-Level Domain&#xff0c;SLD)是两个基本的层级概念。本文将探讨这两者…

备战 清华大学 上机编程考试-冲刺前50%,倒数第6天

真题训练&#xff1a; T1:舞蹈团 - 排序滑动窗口 生活在在外星球X上的小Z想要找一些小朋友组成一个舞蹈团&#xff0c;于是他在网上发布了信息&#xff0c;一共有 \(n\) 个人报名面试。面试必须按照报名的顺序依次进行。小Z可以选择在面试完若干小朋友以后&#xff0c;在所有…

手搓文件格式转换

最初目标&#xff1a; 自己搞一个免费的pdf文件转换 根据现有的开源jar 项目实现思路&#xff1a; 1. 项目原因a. 我想转换文件b. wps 文件转换 2. 最初的状态a. jar运行的b. main,输入文件路径c. 一定的编程能力的人才能得 3. 开始构思项目a. 网页版本b. 想着大家一起用 4. …

MyBatis二级缓存开启条件

MyBatis缓存为俩层体系。分为一级缓存和二级缓存。 一级缓存&#xff1a; 一级缓存默认开启&#xff0c;一级缓存的作用域是SqlSession级别的&#xff0c;这意味着当你更换SqlSession之后就不能再利用原来的SqlSession的一级缓存了。不同的SqlSession之间的一级缓存是隔离的。…