学习|JSX基本使用前端|react.js|JSX|javascript

JSX基本使用
JSX： JavaScript XML的简写。就是一种在 JavaScript 中编写 XML（HTML）格式的代码。
优势：声明式语法更加直观，和HTML 结构相同，减低学习成本。提高开发效率。
基本使用：

//前提：使用react 脚手架进行项目初始化（npx create-react-app my-app） // 1.导入react import React from 'react' import ReactDOM from 'react-dom//使用JSX 进行 react 元素的创建 const title = （ Hello World!! ）//渲染 react 元素 ReactDOM.render(title, document.getElementById('root'))

【学习|JSX基本使用】JSX注意点：

React元素的属性名使用驼峰命名法
特殊的属性名：（HTML --> XML）
- class --> className 、 for -->htmlFor 、 tabindex --> tabIndex
没有子节点的 react 元素可以使用单标签进行表示 < />
推荐使用小括号包含 JSX，从而避免 JS 中的自动插入分号陷阱

JSX 中使用 javascript
语法：{ javascript表达式 } ----- （类似于插值语法）

const name = '小宝' const title = ( 我是：{ name } )

JSX 中使用 javascript 的注意点

单括号中可以使用任意的 javascript 表达式---也可以直接写一些简单（字符串、三元运算符等等）
JSX 自身也是 JS 表达式
JS 中对象一般只有作为 style 属性出现的时候才是合法的，不然直接在 JSX 中使用对象写法会报错
不能在 {} 中出现语句（例如：if/for等）

JSX条件渲染
场景：进行一些过渡加载效果时进行判断
使用：主要通过 if/else 、三元运算符、逻辑与来实现
基本使用：

const isLoading = true; const loading = () => { return isLoading ? (加载中...) : (加载完成) } const title = (条件渲染： { loading() })

JSX列表渲染
方法：使用数组的 map() 方法进行列表渲染
注意：列表渲染时，需要添加 key() 属性，key值要唯一，且尽量避免使用索引号为 key
基本使用：

// 列表渲染 const song = [ {id : 1, name : '幻听'}, {id : 2, name : '山水之间'}, {id : 3, name : '宇宙之大'}, ]const title = ( { song.map(item => {item.name}) } )

JSX样式处理