第一个react应用程序并添加样式
编写第一个react应用程序
将目录下的文件、src文件夹、public文件夹清空,项目根目录下新建一个文件index.js
在文件中写入以下代码
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>欢迎进入React的世界</h1>,document.getElementById('root')
)

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')
)

react.js - 2. 第一个react应用程序并添加样式 - React技术栈 - SegmentFault 思否
相关文章:
第一个react应用程序并添加样式
编写第一个react应用程序 将目录下的文件、src文件夹、public文件夹清空,项目根目录下新建一个文件index.js 在文件中写入以下代码 import React from react import ReactDOM from react-dom ReactDOM.render(<h1>欢迎进入React的世界</h1>,document.…...
Java——Object类
什么是Object类? 类 java.lang.Object是类层次结构的根类,即所有其它类的父类。每个类都使用 Object 作为超类。(父类和超类是一个意思,不同的叫法) 也就是当初的Java语言设计时,就将Object作为所有类的父…...
CotEditor for mac 4.0.1 中文版(开源文本编辑器)
coteditorformac是一款简单实用的基于Cocoa的macOS纯文本编辑器,coteditormac版本可以用来编辑网页、结构化文本、程序源代码等文本文件,使用起来非常方便。 CotEditor for Mac具有正则表达式搜索和替换、语法高亮、编码等实用功能,而CotEdi…...
【大数据】图解 Hadoop 生态系统及其组件
图解 Hadoop 生态系统及其组件 1.HDFS2.MapReduce3.YARN4.Hive5.Pig6.Mahout7.HBase8.Zookeeper9.Sqoop10.Flume11.Oozie12.Ambari13.Spark 在了解 Hadoop 生态系统及其组件之前,我们首先了解一下 Hadoop 的三大组件,即 HDFS、MapReduce、YARN࿰…...
c++ qt--事件过滤(第七部分)
c qt–事件过滤(第七部分) 一.为什么要用事件过滤 上一篇博客中我们用到了事件来进行一些更加细致的操作,如监控鼠标的按下与抬起,但是我们发现如果有很多的组件那每个组件都要创建一个类,这样就显得很麻烦ÿ…...
Inventor软件安装包分享(附安装教程)
目录 一、软件简介 二、软件下载 一、软件简介 Inventor软件是一款由Autodesk公司开发的三维计算机辅助设计(CAD)软件,主要用于机械设计和工程领域。它基于参数化建模技术,可以创建出复杂的三维模型,并且提供了丰富的…...
STM32F103 4G Cat.1模块EC200S使用
一、简介 EC200S-CN 是移远通信最近推出的 LTE Cat 1 无线通信模块,支持最大下行速率 10Mbps 和最大上行速率 5Mbps,具有超高的性价比;同时在封装上兼容移远通信多网络制式 LTE Standard EC2x(EC25、EC21、EC20 R2.0、EC20 R2.1&a…...
38、springboot为 spring mvc 提供的静态资源管理,覆盖和添加静态资源目录
springboot为 spring mvc 提供的静态资源管理 ★ Spring Boot为Spring MVC提供了默认的静态资源管理: ▲ 默认的四个静态资源目录: /META-INF/resources > /resources > /static > /public ▲ ResourceProperties.java类的源代码࿰…...
Go 输出函数
Go语言拥有三个用于输出文本的函数: Print()Println()Printf() Print() 函数以其默认格式打印其参数。 示例 打印 i 和 j 的值: package mainimport "fmt"func main() {var i, j string "Hello", "World"fmt.Print(…...
L1-037 A除以B(Python实现) 测试点全过
题目 真的是简单题哈 —— 给定两个绝对值不超过100的整数A和B,要求你按照“ A / B 商 A/B商 A/B商”的格式输出结果。 输入格式 输入在第一行给出两个整数 A A A和 B ( − 100 ≤ A , B ≤ 100 ) B(−100≤A,B≤100࿰…...
睿思BI旗舰版V5.3正式发布
发布时间:2023-7-20 主要更新内容: 1.增加3D地图功能 2.增加水球图 3.增加扇形图,在数据大屏 - 自定义组件中定义。 4.增加指标引导线功能,在数据大屏 - 自定义组件中定义。 5.详情页增加回调函数功能。 6.大屏/仪表盘模版下载,…...
基于Jenkins自动化部署PHP环境---基于rsync部署
基于基于Jenkins自动打包并部署Tomcat环境_学习新鲜事物的博客-CSDN博客环境 准备git仓库 [rootgit ~]# su - git 上一次登录:五 8月 25 15:09:12 CST 2023从 192.168.50.53pts/2 上 [gitgit ~]$ mkdir php.git [gitgit ~]$ cd php.git/ [gitgit php.git]$ git --b…...
学信息系统项目管理师第4版系列02_法律法规
1. 信息安全的法律体系可分为四个层面 1.1. 一般性法律法规,如宪法、国家安全法,国家秘密法 1.2. 规范和惩罚信息网络犯罪的法律,如刑法、《全国人大常委会关于维护互联网安全的决定》等 1.3. 直接针对信息安全的特别规定,如《…...
【大数据】Doris:基于 MPP 架构的高性能实时分析型数据库
Doris:基于 MPP 架构的高性能实时分析型数据库 1.Doris 介绍 Apache Doris 是一个基于 MPP(Massively Parallel Processing,大规模并行处理)架构的高性能、实时的分析型数据库,以极速易用的特点被人们所熟知ÿ…...
【rust/egui】(五)看看template的app.rs:SidePanel、CentralPanel以及heading
说在前面 rust新手,egui没啥找到啥教程,这里自己记录下学习过程环境:windows11 22H2rust版本:rustc 1.71.1egui版本:0.22.0eframe版本:0.22.0上一篇:这里 SidePanel 侧边栏,如下图 …...
MTK6833_MT6833核心板_天玑700安卓5G核心板规格性能介绍
MTK6833安卓核心板采用台积电 7nm 制程的5G SoC,2*Cortex-A766*Cortex-A55架构,搭载Android12.0操作系统,主频最高达2.2GHz 。内置 5G 双载波聚合技术(2CC)及双 5G SIM 卡功能,实现优异的功耗表现及实时连网…...
Maven-Java代码格式化插件spring-javaformat
TOC 官方文档:点击进入 前言 项目研发过程中,随着团队人员的增加变更环境配置的不同,有些同学甚至没有格式化代码的习惯,导致编码风格不统一杂乱无章,为解决这一问题引入Spring提供的格式化代码插件。插件支持多种方…...
设计模式之八:模板方法模式
泡咖啡和泡茶的共同点: 把水煮沸沸水冲泡咖啡/茶叶冲泡后的水倒入杯子添加糖和牛奶/柠檬 class CoffeineBeverage { public:void prepareRecipe(){boilWater();brew();pourInCup();addCondiments();}private:void boilWater(){std::cout << "Boiling w…...
hive可以删除单条数据吗
参考: hive只操作几条数据特别慢 hive可以删除单条数据吗_柳随风的技术博客_51CTO博客...
python3-Flask实现Api接口
1、:python3-Flask实现Api接口_flask api_Shiro to kuro的博客-CSDN博客 2、 Flask框架的web开发01(Restful API接口规范)_flask patch post_~须尽欢的博客-CSDN博客...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
