第一个react应用程序并添加样式

编写第一个react应用程序

将目录下的文件、src文件夹、public文件夹清空,项目根目录下新建一个文件index.js
在文件中写入以下代码

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>欢迎进入React的世界</h1>,document.getElementById('root')
)

image


react开发需要引入多个依赖文件:React和ReactDOM.
ReactDOM.render是 React 的最基本方法用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
该方法接收两个参数:

  • 创建的模板,多个DOM元素外面需要使用一个标签进行包裹,即有且只能有一个根元素
  • 插入该模板的目标位置

react添加样式

若要为创建的某个元素增加 class 属性,不能直接定义 class 而要用 className,因为 class 是 javascript 中的保留字。
例如:

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(//h1_style样式是引入的<h1 className="h1_style">欢迎进入React的世界</h1>,document.getElementById('root')
)

同样可以定义行内样式

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(//h1_style样式是引入的<h1 style={{"backgroundColor":"yellow","color":"red"}}>欢迎进入React的世界</h1>,document.getElementById('root')
)

另外,也可以直接将样式赋给一个变量,然后将变量的值赋给style

import React from 'react'
import ReactDOM from 'react-dom'let h1_style = {"backgroundColor":"yellow","color":"yellow"
}
ReactDOM.render(//h1_style样式是引入的<h1 style={h1_style}>欢迎进入React的世界</h1>,document.getElementById('root')
)

image

react.js - 2. 第一个react应用程序并添加样式 - React技术栈 - SegmentFault 思否 

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

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

相关文章

利用fsimage分析HDFS小文件

一、Hive 小文件概述 在Hive中&#xff0c;所谓的小文件是指文件大小远小于HDFS块大小的文件&#xff0c;通常小于128 MB&#xff0c;甚至更少。这些小文件可能是Hive表的一部分&#xff0c;每个小文件都包含一个或几个表的记录&#xff0c;它们以文本格式存储。 Hive通常用于…

clickhouse(十四、分布式DDL阻塞及同步阻塞问题)

文章目录 一、分布式ddl 阻塞、超时现象验证方法解决方案 二、副本同步阻塞现象验证解决方案 一、分布式ddl 阻塞、超时 现象 在clickhouse 集群的操作中&#xff0c;如果同时执行一些重量级变更语句&#xff0c;往往会引起阻塞。 一般是由于节点堆积过多耗时的ddl。然后抛出…

云计算和Docker分别适用场景

在大规模网络爬虫系统中&#xff0c;通过使用云计算和Docker技术&#xff0c;可以实现大规模网络爬虫系统的高效架构设计和部署。这种架构能够提供可扩展性、高可用性和灵活性&#xff0c;为爬虫系统的运行和管理带来便利。 云计算和Docker在大规模网络爬虫系统中有不同的业务…

《游戏编程模式》学习笔记(九)游戏循环 Sequencing Patterns

定义 一个游戏循环会在游玩时不断运行。 每一次循环&#xff0c;它都会无阻塞地处理玩家的输入&#xff0c;更新游戏的状态&#xff0c;渲染游戏。它追踪时间的消耗并控制游戏的速度。游戏循环需要做到始终以固定的速度运行游戏。 一个游戏循环中通常包含处理输入部分&#xf…

CTFhub-文件上传-无验证

怎样判断一个网站是 php asp jsp 网站 首先&#xff0c;上传用哥斯拉生成 .php 文件 然后&#xff0c;用蚁剑测试连接 找到 flag_1043521020.php 文件&#xff0c;进去&#xff0c;即可发现 flag ctfhub{ee09842c786c113fb76c5542}

【校招VIP】算法考点之堆排

考点介绍&#xff1a; 排序算法属于数据结构和算法的基础内容&#xff0c;并且也是大厂笔试中的高频考点。 堆排序是使用一棵树存储序列这个课树只保证跟节点是这棵树中的最小值&#xff0c;但并不保证其他节点是按顺序的。因此他的排序是每次从堆中取得堆顶&#xff0c;取得 n…

leetcode 563.二叉树的坡度

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;https://leetcode.cn/problems/binary-tree-tilt/description/ 代码&#xff1a; class Solution { public:int childFind(TreeNode* root , int& sumTile) {if (root nullptr) {return 0; // 空树坡度为0}int l…

JVM知识点(二)

1、G1垃圾收集器 -XX:MaxGCPauseMillis10&#xff0c;G1的参数&#xff0c;表示在任意1s时间内&#xff0c;停顿时间不能超过10ms&#xff1b;G1将堆切分成很多小堆区&#xff08;Region&#xff09;&#xff0c;每一个Region可以是Eden、Survivor或Old区&#xff1b;这些区在…

如何提高视频清晰度?视频调整清晰度操作方法

现在很多小伙伴通过制作短视频发布到一些短视频平台上记录生活&#xff0c;分享趣事。但制作的视频有些比较模糊&#xff0c;做视频的小伙伴应该都知道&#xff0c;视频画质模糊不清&#xff0c;会严重影响观众的观看体验。 通过研究&#xff0c;总结了以下几点严重影响的点 …

Matlab图像处理-平移运算

几何运算 几何运算又称为几何变换&#xff0c;是将一幅图像中的坐标映射到另外一幅图像中的新坐标位置&#xff0c;它不改变图像的像素值&#xff0c;只是改变像素所在的几何位置&#xff0c;使原始图像按照需要产生位置、形状和大小的变化。 图像几何运算的一般定义为&#…

Python面试:什么是GIL

1. GIL (Global Interpreter lock)可以避免多个线程同时执行字节码。 import threadinglock threading.Lock()n [0]def foo():with lock:n[0] n[0] 1n[0] n[0] 1threads [] for i in range(5000):t threading.Thread(targetfoo)threads.append(t)for t in threads:t.s…

开发新能源的好处

风能无论是总装机容量还是新增装机容量&#xff0c;全球都保持着较快的发展速度&#xff0c;风能将迎来发展高峰。风电上网电价高于火电&#xff0c;期待价格理顺促进发展。生物质能有望在农业资源丰富的热带和亚热带普及&#xff0c;主要问题是降低制造成本&#xff0c;生物乙…

【Unity3D】水面特效

1 前言 水波特效 中通过屏幕后处理实现了环形水波效果&#xff0c;本文通过 Shader Graph 实现了模拟水面特效&#xff0c;包含以下特效细节。Shader Graph 基础知识详见→Shader Graph简介、Shader Graph节点、程序纹理简单应用。 深水区和浅水区颜色差异&#xff1b;水面有波…

Git分支机制

一、分支机制简述 要想真正理解Git的分支机制&#xff0c;我们要首先回过头来看一下Git是如何存储数据的。 Git并没有采用多个变更集( changeset )或是差异的方式存储数据&#xff0c;而是采用一系列快照的方式。当你发起提交时&#xff0c;Git存储的是提交对象( commi…

【测试】pywinauto的简单使用(安装、常用对象、元素控件、鼠标操作、键盘操作)

1.说明 pywinauto是一个用于自动化Python 模块&#xff0c;适合Windows系统的软件&#xff08;GUI&#xff09;&#xff0c;可以通过Pywinauto遍历窗口&#xff08;对话框&#xff09;和窗口里的控件&#xff0c;也可以控制鼠标和键盘输入&#xff0c;所以它能做的事情比之前介…

【Leetcode】124.二叉树中的最大路径和(Hard)

一、题目 1、题目描述 二叉树中的 路径 被定义为一条节点序列,序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root ,返回其…

解决ubuntu文件系统变成只读的方法

所欲文件变成只读&#xff0c;这种情况一般是程序执行发生错误&#xff0c;磁盘的一种保护措施 使用fsck修复 方法一&#xff1a; # 切换root sudo su # 修复磁盘错误 fsck -t ext4 -v /dev/sdb6 方法二&#xff1a; fsck.ext4 -y /dev/sdb6 重新用读写挂载 上面两种方法&…

龙蜥白皮书精选:SysAK—大规模复杂场景的系统运维利器

文/系统运维 SIG 01 概述 SysAK&#xff08;System Analyse Kit&#xff09;是龙蜥社区系统运维 SIG&#xff0c;通过对过往百万服务器运维经验进行抽象总结&#xff0c;而提供的一个全方位的系统运维工具集&#xff0c;可以覆盖系统的日常监控、线上问题诊断和系统故障修复…

checkstyle检查Java编程样式:隐藏属性

checkstyle可以使用HiddenField检查是否存在隐藏属性的行为&#xff1a;局部变量或者参数是否隐藏了在同一个类中的属性。 所谓隐藏属性&#xff0c;就是指局部变量、或者参数&#xff08;例如构造器的参数、方法的参数&#xff09;的名字和同一个类中的属性的名字相同。如果相…

【流量分析】Godzilla分析

一、哥斯拉流量的特点&#xff1a; 1.User-Agent (弱特征) 哥斯拉客户端使用JAVA语言编写&#xff0c;在默认的情况下&#xff0c;如果不修改User-Agent&#xff0c;User-Agent会类似于Java/1.8.0_121&#xff08;具体什么版本取决于JDK环境版本&#xff09;。但是哥斯拉支持…