创建第一个React项目

React脚手架

npx create-react-app react-demo

npx是直接从互联网网上拉最新的脚手架进行创建react
运行React项目

npm start

若想找到Webpack配置文件

npm eject

React的基本使用

基本步骤

导入react和react-dom vue
创建react元素
渲染react元素到页面中

导入

import React from "react";
import ReactDom from "react-dom"

声明

const title = React.createElement('h1',null,'hello react')
const element2 = React.createElement('div',{id:'demo',title:'哈哈'
},'我是一段DIV内容'
)

渲染

const element = ReactDom.render(title,document.getElementById('root'))

渲染复杂结构

<ul><li>香蕉</li><li>橘子</li><li>苹果</li>
</ul>
import React from "react";
import ReactDom from "react-dom"//创建react元素
const react_ul = React.createElement('ul',{className:'list'},[React.createElement('li',null,'香蕉'),React.createElement('li',null,'橘子'),React.createElement('li',null,'苹果'),])// 渲染
ReactDom.render(react_ul,document.getElementById('root'))

在渲染过程中父元素第三个参数代表内容,可以为一个数组,数组里面可以放更多的值进行渲染操作

React18

使用React18创建React的时候,导入ReactDOM进行变更,并且创建发生变化,具体代码如下:

import React, {Component} from "react";
import ReactDOM from "react-dom/client";class App extends Component {render() {return (<div><h1>hello world</h1></div>);}
}const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

如果不解决这个问题他会一直产生一个警告,说明他目前使用的是React17

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

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

相关文章

python统计分析——多解释变量的方差分析

参考资料&#xff1a;用python动手学统计学 1、导入库 # 导入库 # 用于数值计算的库 import numpy as np import pandas as pd import scipy as sp from scipy import stats # 用于绘图的库 from matplotlib import pyplot as plt import seaborn as sns sns.set() # 用于估计…

Android 10 音量UI更新解析

1 VolumeUI 的启动 由于VolumeUI 是继承 SystemUI 的&#xff0c;所以它的启动方式和 SystemUI 的启动方式一样。 直接看 VolumeUI 的start()方法 frameworks/base/packages/SystemUI/src/com/android/systemui/volume/VolumeUI.java Override public void start() {boolean …

Linux基础命令—进程管理

基础知识 linux进程管理 什么是进程 开发写代码->代码运行起来->进程 运行起来的程序叫做进程程序与进程区别 1.程序是一个静态的概念,主要是指令集和数据的结合,可以长期存放在操作系统中 2.进程是一个动态的概念,主要是程序的运行状态,进程存在生命周期,生命周期结…

YY调音台:直播主播的体验

我是直播平台的主播&#xff0c;日常工作就是在直播间里打游戏、唱歌、聊天之类的。刚开始的时候我的直播工具只有一台电脑&#xff0c;收音也是用的我自己常用的耳机&#xff0c;设备比较简陋&#xff0c;直播间的用户留存率也不高。但是我相信天道酬勤&#xff0c;每天晚上坚…

javaScript数组去重的几种实现方式——适用非引用数据去重

最传统的使用循环遍历 //最传统的使用循环遍历 function getUnique(arr) {let newArr [];for (let i 0; i < arr.length; i) {for (let j i 1; j < arr.length; j) {if (arr[i] arr[j]) {i; //相同丢掉前面的元素}}newArr.push(arr[i]);}return newArr; } 利用Set实…

Seata分布式事务实战XATCC模式

目录 XA模式 XA 模式的使用 Spring Cloud Alibaba整合Seata XA TCC模式 TCC模式接口改造 TCC如何控制异常 Spring Cloud Alibaba整合Seata TCC XA模式 整体机制 在 Seata 定义的分布式事务框架内&#xff0c;利用事务资源&#xff08;数据库、消息服务等&#xff09;对…

【Python从入门到进阶】49、当当网Scrapy项目实战(二)

接上篇《48、当当网Scrapy项目实战&#xff08;一&#xff09;》 上一篇我们正式开启了一个Scrapy爬虫项目的实战&#xff0c;对当当网进行剖析和抓取。本篇我们继续编写该当当网的项目&#xff0c;讲解刚刚编写的Spider与item之间的关系&#xff0c;以及如何使用item&#xff…

【python】0、超详细介绍:json、http

文章目录 一、json二、http2.1 json 读取 request 序列化 三、基本类型3.1 decimal 四、图像4.1 颜色格式转换 一、json import json f open(data.json) # open json file data json.load(f) # 读出 json object for i in data[emp_details]: # 取出一级属性 emp_details, …

云尚办公-0.3.0

5. controller层 import pers.beiluo.yunshangoffice.model.system.SysRole; import pers.beiluo.yunshangoffice.service.SysRoleService;import java.util.List;//RestController&#xff1a;1.该类是控制器&#xff1b;2.方法返回值会被写进响应报文的报文体&#xff0c;而…

ChatRTX安装教程

介于本人一直想将现有的智慧城市的文档结合大模型RAG实现知识库问答助手&#xff0c;借着Chat With RTX的风潮正好将机器人和知识库合二为一&#xff0c;方便以后对众多文件进行查阅。 一、概要 Chat With RTX 是一个 Demo&#xff0c;用来将您自己的资料&#xff08;文档、笔…

关于硅的制造芯片的过程

芯片是如何制作的&#xff1f; 先将硅融化制成硅晶片&#xff0c;再用光刻机印压电路。 bilibili芯片制作视频 硅晶片作为现代芯片的主要元件&#xff0c;广泛用于集成电路。 首先将多晶硅放入特制的密封炉&#xff0c;排除其中空气后加热到1420摄氏度&#xff0c;将融化的硅放…

第三节:kafka sarama 遇到Bug?

文章目录 前言一、先上结果二、刨根问底总结 前言 前面两节&#xff0c;我们已经简单应用了sarama的两个类型Client和ClusterAdmin&#xff0c;其中有一个案例是获取集群的ControllerId&#xff0c;但是在后面的测试过程过程中&#xff0c;发现一个问题&#xff0c;返回的Cont…

vue菜单栏跳转方案

vue菜单栏跳转方案 <template><div><el-container style"height: 100vh"><el-aside width"200px" style"background-color: #b3c0d1"><el-menuopen"handleOpen"close"handleClose"select"h…

MongoDB聚合运算符:$bitXor

文章目录 语法用法举例 $bitXor聚合运算符返回整数或长整数数组元素按位异或的结果。 语法 { $bitXor: { [ <expression1>, <expression2>, ... ] }用法 如果操作数包括整型和长整型值&#xff0c;MongoDB会对计算出的整数结果进行符号扩展&#xff0c;并返回长…

处理器分支预测(Branch predictor)原理和实现

C++实例 我们先给一个实例,在windows系统下,使用VisualStudio的debug模式,编译和运行程序: #include <algorithm> #include <ctime> #include <iostream>int main(){// Generate dataconst unsigned arraySize = 32768;int data[arraySize];for (unsig…

循环队列和链表队列

循环队列&#xff1a; #include <iostream> using namespace std; const int MAX_SIZE 100; template <class DataType> /* 循环队列可以想象成一个环形&#xff0c;里面有一个个的格子&#xff0c;也就是环形数组 front表示首个&#xff08;但是这不会一直是0&a…

【PyQt5桌面应用开发】3.Qt Designer快速入门(控件详解)

一、Qt Designer简介 Qt Designer是PyQt程序UI界面的实现工具&#xff0c;可以帮助我们快速开发 PyQt 程序的速度。它生成的 UI 界面是一个后缀为 .ui 的文件&#xff0c;可以通过 pyiuc 转换为 .py 文件。 Qt Designer工具使用简单&#xff0c;可以通过拖拽和点击完成复杂界面…

仿12306校招项目业务二(列车检索)

目录 验证数据 加载城市数据 查询列车站点信息 查询列车余票信息 构建列车返回数据 12306 项目中列车数据检索接口路径 &#xfeff; TicketController的pageListTicketQuery&#xfeff;。 GetMapping("/api/ticket-service/ticket/query")public Result<T…

查看笔记本电池健康状态-windows11

在 Windows 11 中获取详细的电池报告 Windows 11 中内置的 Powerfg 命令行选项来生成电池报告。 在任务栏上选择“搜索”&#xff0c;键入“cmd”&#xff0c;长按&#xff08;或右键单击&#xff09;“命令提示符”&#xff0c;然后选择“以管理员身份运行” ->“是”。 …

Mac使用K6工具压测WebSocket

commend空格 打开终端&#xff0c;安装k6 brew install k6验证是否安装成功 k6 version设置日志级别为debug export K6_LOG_LEVELdebug执行脚本&#xff08;进入脚本所在文件夹下&#xff09; k6 run --vus 100 --duration 10m --out csvresult.csv script.js 脚本解释&…