前端学习之React02: JSX的基本使用

Posted 2021-09-20 浅弋、璃鱼

文章目录

• 一、JSX的基本使用：
• • 1. createElement()的问题:
  • 2. jsx简介:
  • 3. 使用步骤:
  • • 3.1 使用JSX语法创建React元素
    • 3.2 使用ReactDOM.render()方法渲染react元素到页面中:
  • 4. 为什么脚手架中可以使用JSX语法:
• 二、JSX中使用javascript表达式：
• • 1. 嵌入js表达式
  • 2. 注意点:
• 三、JSX的条件渲染：
• 四、JSX的列表表达式：
• 五、JSX的样式处理
• • 1. 行内样式 -- style
  • 2. 类名 -- className

一、JSX的基本使用：

1. createElement()的问题:

• 繁琐不简洁;
• 不直观, 无法一眼看出所描述的结构;
• 不优雅, 用户体验不爽;

2. jsx简介:

jsx是javascript XML的简写, 表示在JavaScript代码中写XML(html)格式的代码;

优势:

• 声明式语法更直观, 与HTML结构相同, 降低了学习成本, 提升开发效率
• JSX是React的核心内容

3. 使用步骤:

3.1 使用JSX语法创建React元素

const title = <h1>Hello JSX</h1>

3.2 使用ReactDOM.render()方法渲染react元素到页面中:

ReactDOM.render(title, root)

4. 为什么脚手架中可以使用JSX语法:

• JSX不是标准的ECMAScript语法, 它是ECMAScript语法的扩展;
• 需要使用babel编译处理后, 才能在浏览器环境中使用;
• create-react-app脚手架中已经默认又该配置, 无需手动配置;
• 编译JSX语法的包: https://www.babeljs.cn/docs/babel-preset-react

ps:

• React元素的属性名使用驼峰命名法;
• 特殊属性名:
  • class => className;
  • for => htmlFor;
  • tabindex => tabIndex;
• 推荐: 使用"小括号包裹Jsx", 从而避免编辑器往js中自动插入分号

二、JSX中使用javascript表达式：

1. 嵌入js表达式

• 数据存储在js中
• 语法: {js表达式}

const name = "tom"
const div = (
	<div>你好, 我的名字是: {name}</div>
)

2. 注意点:

• 单大括号中可以使用任意的JavaScript表达式;
• jSX自身也是js表达式;
• js中的对象是个例外, 一般只会出现在style属性中;
• 不能在{}中出现语句(如: if/for);

三、JSX的条件渲染：

可以使用if/else或三元表达式、逻辑与(&&)运算符实现

四、JSX的列表表达式：

如果要渲染一组数据, 应该使用数组的map()方法;
ps: 渲染列表时应该添加key属性, key属性的值要保证唯一;
尽量避免使用索引号作为key;
原则: map()遍历谁, 就给谁添加key属性;

const songs = [
	{id:1, name: "歌曲1"},
	{id:2, name: "歌曲2"},
	{id:3, name: "歌曲3"},
]
const list = (
<ul>
	{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)

五、JSX的样式处理

1. 行内样式 – style

const title = <dev style={{color: 'red',  backgroundColor: 'skyblue'}}>
  <h1>hello react</h1>
</dev>

ReactDOM.render(
  title,
  document.getElementById('root')
);

2. 类名 – className

./imdex.css

.title {
  color: red;
  text-align: center;
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const title = <dev className="title">
  <h1>hello react</h1>
</dev>

ReactDOM.render(title, document.getElementById('root'));