初探React环境搭建与运行

news2024/9/27 17:27:49

在家看React 知识,在本地环境搭建,记录下来,方便查看。
环境前置:Nodejs 14 及以上
网站地址:React中文官网

一、方式一命令生成项目

通过 create-react-app脚手架 来创建 React项目,其中 npx 是 npm5.2+ 附带的package运行工具

// 创建项目 my_react
npx create-react-app my_react
// 进入项目
cd my_react
// 启动项目
npm start

执行成功后,控制台输出结果如下。
在这里插入图片描述
生成项目文件夹内容如下
在这里插入图片描述

项目启动成功,在浏览器 输入 http://localhost:3000/ 即可访问react。
在这里插入图片描述
以上三步即 通过脚手架创建简单的React项目。

二、方式二手动引入

第一步、安装依赖
react包 是核心,提供创建元素、组件等功能;
react-dom包 提供DOM相关功能
npm 方式安装代码如下

// 安装依赖包
npm i react react-dom

第二步、引入两个js文件

// 引入js
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

第三步、创建React元素

// 参数1:元素名称;参数2:元素属性;参数3:元素的子节点
const title = React.createElement('h1',null,'hello react');

第四步、渲染React元素

<div id="root"></div>
// 参数1:要渲染的react元素;参数2:挂载点
ReactDOM.render(title,document.getElementById('root'));
异常处理

1)创建项目错误,代码:reason: connect ECONNREFUSED 127.0.0.1:31181
处理方案:可暂时取消代理
npm config set proxy null
npm config set https-proxy null

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

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

相关文章

68、4K-NeRF:高分辨率重建

简介 官网&#xff1a;https://github.com/frozoul/4K-NeRF 基于nerf方法的渲染过程通常依赖于一种像素方式&#xff0c;在这种方式中&#xff0c;射线(或像素)在训练和推断阶段都是独立处理的&#xff0c;这限制了其描述微妙细节的表示能力&#xff0c;特别是当提升到极高分…

机器学习——04朴素贝叶斯

机器学习——04朴素贝叶斯 参考资料 AIlearningMachine-Learning-in-Action庞善民.西安交通大学机器学习导论2022春PPT 更多原理请参考本人另一篇博客&#xff1a;[机器学习导论]——第六课——贝叶斯分类器 使用Jupyter进行练习&#xff0c;python3 一、知识准备 贝叶斯…

【算法技术专题】如何用Java实现一致性 hash 算法( consistent hashing )(上)

一致性hash的历史 【Consistent Hashing算法】早在 1997 年就在论文 Consistent hashing and random trees 中被提出&#xff0c;目前在 cache 系统中应用越来越广泛&#xff1b; 一致性hash的目的 一致性哈希算法是分布式系统中常用的算法&#xff0c;一致性哈希算法解决了…

[附源码]Nodejs计算机毕业设计基于社区疫情防控管理系统Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分…

猿如意中的【DBeaver】工具详情介绍,包含下载安装使用保姆级教程

猿如意中的【DBeaver】工具一、 猿如意工具介绍二、 工具名称2.1 下载安装渠道2.2 如何在载猿如意中下载DBeaver工具&#xff1f;2.3 安装流程2.4 安装完成的打开界面2.6 DBeaver使用步骤使用感受一、 猿如意工具介绍 打开猿如意程序工具。猿如意下载地址&#xff1a;猿如意官…

RocketMq简介以及名词概念

&#x1f3b6; 文章简介&#xff1a;RocketMq简介以及名词概念 &#x1f4a1; 创作目的&#xff1a;简单介绍RocketMq的信息以及名词概念 ☀️ 今日天气&#xff1a; &#x1f4dd; 每日一言&#xff1a;如果你执意追逐我的幻影&#xff0c;迟早会被真正的我打败。 --棋魂 文章…

Spring Cloud Sleuth Zpkin 简介

下载 zipkin-server-2.9.4-exec.jar zipkin-server-2.9.4-exec.jar Zipkin 简介 Spring Cloud Sleuth集成了非常强大的跟踪系统——Zipkin。Zipkin是Twitter开源的分布式跟踪系统。它的主要功能是收集系统的时序数据&#xff0c;从而追踪微服务架构的系统延时。 利用链路追…

微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)

把 iconfont 图标批量转换成多个平台小程序的组件。不依赖字体&#xff0c;支持多色彩。 0 支持平台 微信小程序支付宝小程序百度小程序头条小程序&#xff08;字节跳动&#xff09;快手小程序QQ小程序 1 安装插件 npm install mini-program-iconfont-cli -D2 生成配置文件…

一次性能调优记录:压测报错out of memory内存溢出【杭州多测师_王sir】【杭州多测师】...

一次性能调优记录&#xff1a;压测报错out of memory内存溢出1、首先这是一段压测的报错日志截图 2、服务器的配置还不错&#xff0c;执行机全64核以上&#xff0c;运存256g以上&#xff0c;服务器80核&#xff0c;512g&#xff0c;所有机器线程数设置655360 3、刚开始以为是jm…

@ZBBIX集成LDAP功能实现用户统一登录认证

文章目录 1.zabbix认证方式2.LDAP模块查看3.windows AD配置4.zabbix配置LDAP5.开启LDAP账户登录6.AD账户登录测试7.AD账户批量添加zabbix8.数据库zabbix认证方式修改1.zabbix认证方式 zabbix6.0中,认证方式包含三种方式,如:LDAP、HTTP、SAML 实现ldap用户账户统一认证需要ad…

数据模型篇之维度设计

第10章 维度设计 1.维度设计基础 维度的基本概念 &#xff08;1&#xff09;维度是什么 维度是维度建模的基础和灵魂。在维度建模中&#xff0c;将度量称为“事实”&#xff0c;将环境描述为“维度”&#xff0c;维度是用于分析事实所需所需的多样环境。 &#xff08;2&…

JS详解 | BOM | 系统性学习 | 无知的我费曼笔记

无知的我正在复盘js… 该笔记特点是 重新整理了涉及资料的一些语言描述、排版而使用了自己的描述对一些地方做了补充说明。比如解释专有名词、类比说明、对比说明、注意事项提升了总结归纳性。尽可能在每个知识点上都使用一句话 || 关键词概括更注重在实际上怎么应用提出并回答…

关于缓存与数据双写一致性问题(清晰易懂)

缓存与数据双写一致性问题 一般来说&#xff0c;执行更新操作时&#xff0c;我们会有两种选择&#xff1a; 先操作数据库&#xff0c;再操作缓存先操作缓存&#xff0c;再操作数据库 这两个操作要么同时成功&#xff0c;要么同时失败。所以&#xff0c;这会演变成一个分布式…

架构设计(五):有状态服务和无状态服务

架构设计&#xff08;五&#xff09;&#xff1a;有状态服务和无状态服务 作者&#xff1a;Grey 原文地址&#xff1a; 博客园&#xff1a;架构设计&#xff08;五&#xff09;&#xff1a;有状态服务和无状态服务 CSDN&#xff1a;架构设计&#xff08;五&#xff09;&…

批量查询搜狗收录,查询结果不准是什么原因

网站的收录情况是常用的技术手段&#xff0c;会影响到网站的流量和展现量&#xff0c;想要获得一个好的收录就必须重视原创内容&#xff0c;因为网站的收录直接影响力搜索引擎的关键词排名。 网站收录信息如何批量查询? 以搜狗收录为例&#xff1a; 1、打开SEO综合…

17 CPP面向对象编程

简单实用类&#xff1a; 1 类的成员函数可以直接访问该类其它的成员函数 2 类的成员函数可以重载。 3 类指针的用法与结构体指针用法相同 4 类的成员可以是任意数据类型&#xff08;类中也可以有枚举&#xff09; 5 可以为类的成员指定缺省值&#xff08;C11标准&#xff…

Redis基础数据结构源码

1、SDS&#xff1a;动态字符串 src/sds.h:50 struct sdshdr {// 记录buf数组中已使用的字节数&#xff0c;即SDS字符串长度int len;// 记录buf数组中未使用的字节数int free;// 字节数组&#xff0c;用于保存字符串char buf[]; } 杜绝缓冲区溢出。减少修改字符串长度时所需的内…

概率统计·参数估计【区间估计】

置信区间 求解步骤 例 构造一个函数&#xff08;主要是函数不用依赖未知量只有一个未知量&#xff0c;问μ的置信水平用这个函数&#xff0c;如果σ也未知&#xff0c;就要替换掉这个式子中的σ为S&#xff0c;并且变成服从 t 分布&#xff09;取上下区间&#xff08;用2个常数…

邪道方法-字典转字符串以传参字典给多GPU训练的mmseg

文章首发及后续更新&#xff1a;https://mwhls.top/4387.html&#xff0c;无图/无目录/格式错误/更多相关请至首发页查看。 新的更新内容请到mwhls.top查看。 欢迎提出任何疑问及批评&#xff0c;非常感谢&#xff01; 目录引言 解决方法 引言 我想把字典传参给多GPU训练&#…

CleanMyMac X4.12.2版本功能实用性测评

相信大多数MAC用户都较为了解&#xff0c;Mac虽然有着许多亮点的性能&#xff0c;但是让用户叫苦不迭的还其硬盘空间小的特色&#xff0c;至于很多人因为文件堆积以及软件缓存等&#xff0c;造成系统空间内存不够使用的情况。于是清理工具就成为了大多数MAC用户使用频率较高的实…