持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
上一篇文章中我们介绍了如何在JSX中使用JavaScript表达式以及JSX的条件渲染以及JSX的列表渲染，接下来我们将介绍jsx的一些样式处理以及React的组件内容
JSX的样式处理
- 行内样式----style 示例代码如下所示：
<h1 style={{color:'red',backgroundColor:'skyblue'}}>
JSX的样式处理
</h1>
- 类名----className（推荐） 示例代码如下所示：
<h1 className="title">
JSX的样式处理
</h1>
- JSX总结
- JSX是React的核心内容
- JSX表示在JS代码中写HTML结构，是React声明式的体现
- 使用JSX配合嵌入式的JS表达式，条件渲染，列表渲染，可以描述任意UI结构
- 推荐使用className的方式给JSX添加样式
- React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML的功能
- React组件介绍
- 组件是react的重要内容，使用react就是在用组件
- 组件表示页面中的部分功能
- 组合多个组件实现完整的页面功能
- 特点：可复用性，独立性，可组合性
- React组件的两种创建方式
- 使用函数创建组件：使用JavaScript中的函数创建的组件叫做函数组件，函数组件必须要有返回值，组件名称必须以大写字母开头，React根据此来区分组件和普通的React元素，使用函数名作为组件标签名，示例代码如下所示：
function Hello(){
return (
<div>
这是我的第一个函数组件
</div>
)
}
ReactDOM.render(<Hello />,root)
- 抽离为独立JavaScript文件：可以将所有组件放在同一个JavaScript文件中，也可以将每一个组件放在单独的JavaScript文件中，组件作为独立的个体，一般都会放到一个单独的JavaScript文件中。
