React学习第二步，JSX基础以及给JSX添加样式

目标

• 知道什么是JSX
• 能够使用JSX创建React元素
• 能够在JSX中使用JavaScript表达式
• 能够使用JSX的条件渲染和列表渲染
• 能够给JSX添加样式

概述

JSX产生的原因

由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽

JSX的概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

简单入门使用（⭐⭐⭐）

使用步骤

• 使用JSX语法创建react元素

let h1 = <h1>我是通过JSX创建的元素</h1>

• 使用ReactDOM来渲染元素

ReactDOM.render(h1,document.getElementById('root'))

为什么在脚手架中可以使用JSX语法

• JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
• 需要使用babel编译处理后，才能在浏览器环境中使用
• create-react-app脚手架中已经默认有该配置，无需手动配置
• 编译JSX语法的包： @bable/preset-react

注意点

• React元素的属性名使用驼峰命名法
• 特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
• 如果没有子节点的React元素可以用 /> 来结束
• 推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错

JSX语法（⭐⭐⭐）

JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持

嵌入JS表达式

语法：{JavaScritp表达式}

例子：

let content = '插入的内容'
let h1 = <h1>我是通过JSX创建的元素+ {content}</h1>

注意点

• 只要是合法的js表达式都可以进行嵌入
• JSX自身也是js表达式
• 注意：js中的对象是一个例外，一般只会出现在style属性中
• 注意：在{}中不能出现语句

条件渲染

根据不同的条件来渲染不同的JSX结构

let isLoading = true
let loading = ()=>{
    if(isLoading){
        return <div>Loading...</div>
    }
    return <div>加载完成</div>
}

可以发现，写JSX的条件渲染与我们之前编写代码的逻辑是差不多的，根据不同的判断逻辑，返回不同的 JSX结构，然后渲染到页面中

列表渲染

• 如果需要渲染一组数据，我们应该使用数组的 map () 方法
• 注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
• 原则：map()遍历谁，就给谁添加key属性
• 注意：尽量避免使用索引号作为key

let arr = [{
    id:1,
    name:'三国演义'
},{
    id:2,
    name:'水浒传'
},{
    id:3,
    name:'西游记'
},{
    id:4,
    name:'红楼梦'
}]
let ul = (<ul>
    {arr.map(item => <li key={403 Forbidden}>{item.name}</li>)}
</ul>)
ReactDOM.render(ul,document.getElementById('root'))

样式处理

行内样式 -style

在style里面我们通过对象的方式传递数据

<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐

类名 -className

创建CSS文件编写样式代码

.container {
    text-align: center
}

在js中进行引入，然后设置类名即可

import './css/index.css'

<li className='container' key={403 Forbidden} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

小结

JSX是React的核心内容

JSX表示在JS代码中写HTML结构，是React声明式的体现

使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构

推荐使用className的方式给JSX添加样式

React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能