第一个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 思否

相关推荐
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's1 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.3 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09013 小时前
浅析Web存储系统
前端
foxhuli2293 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端