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;还…

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进行点亮—熄灭的…

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

当浏览器遇到性能瓶颈导致页面卡顿时&#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;…

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

当前&#xff0c;人形机器人使用的传统电子皮肤在处理触觉感知信息方面的能力并不强&#xff0c;尤其是在时间信息编码和快速特征提取方面存在一定的局限性。简单来说就是机器人无法完成在接触到物品的瞬间&#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之间的一级缓存是隔离的。…

Django更改超级用户密码

Django更改超级用户密码 1、打开shell 在工程文件目录下敲入&#xff1a; python manage.py shell再在python交互界面输入&#xff1a; from django.contrib.auth.models import User user User.objects.get(username root) user.set_password(123456) user.save()其中ro…

递归【2】(组合回溯(生成括号)、子集回溯(背包问题))

括号对 &#xff08;组合型回溯&#xff09; 分解成子问题&#xff0c;每一次添加括号分两步&#xff1a; if左括号小于n&#xff0c;加左括号&#xff0c;然后k(index1), if左括号大于有括号&#xff0c;加右括号&#xff0c;k(index1),然后收尾括号单独考虑&#xff0c;到…

【Ardiuno】实验使用ESP32连接Wifi(图文)

ESP32最为精华和有特色的地方当然是wifi连接&#xff0c;这里我们就写程序实验一下适使用ESP32主板连接wifi&#xff0c;为了简化实验我们这里只做了连接部分&#xff0c;其他实验在后续再继续。 由于本实验只要在串口监视器中查看结果状态即可&#xff0c;因此电路板上无需连…

ToxVidLLM:一个用于检测有害视频的多模态多任务框架

在一个社交媒体平台赋予用户成为内容创作者力量的时代&#xff0c;数字领域见证了前所未有的信息传播激增&#xff0c;到2023年&#xff0c;近82%的互联网流量是视频内容。因此&#xff0c;像抖音和YouTub这样的平台已经成为主要的信息来源。一个显著的统计数据凸显了这些平台的…

大泽动力30KW静音汽油发电机

安全操作&#xff1a; 在使用前&#xff0c;确保发电机放置在通风良好、干燥、无易燃物品的地方。 避免在发电机运行时触摸其热表面或运转部件&#xff0c;以免烫伤或受伤。 遵循发电机的启动和停机程序&#xff0c;不要随意操作。 燃油管理&#xff1a; 使用高质量的汽油&…