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

相关推荐
@小红花41 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵44 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html