React学习— JSX

1.概述

JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在 JS 中编写与 XML 类似的语言,一种定义带属性树结构（DOM 结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的 JS 语言。

虽然你可以完全不使用 JSX 语法，只使用 JS 语法，但还是推荐使用 JSX，可以定义包含属性的树状结构的语法，类似 HTML 标签那样的使用，而且更便于代码的阅读。

这就是 JSX ，他是 JavaScrip 的一种扩展语法。我们推荐在 React 中使用这种语法来描述 UI 信息。JSX 可能会让你想起某种模板语言，但是它具有 JavaScrip 的全部能力。

我们把这种东西称之为，react 元素，它可以很好的描述 UI 信息（dom 节点的组合）

XML和HTML的区别：

HTML标签语言语法松散，XML语法严格，区分大小写
HTML主要是做页面传输，XML主要是做数据传输的
HTML所有标签都是定义好的，XML所有标签都是自定义的

2.JSX重构Hello world

ReactDOM.render(<h1>欢迎进入 React 的世界</h1>,document.getElementById('root') // 渲染到哪里
)

参数 1 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。

3.JSX语法中的js表达式

嵌入js表达式

js 表达式必须通过 {表达式} 的方式才能嵌入到 jsx 语法中.
```
<h1>欢迎进入 React 的世界 { 1+1 } </h1>
```

属性绑定

<h1 title={ a + 1 }>欢迎进入 React 的世界</h1>

class 的绑定用 className

<h1 className={`big ${i==index?'active':''}`}>欢迎进入 React 的世界</h1>

style 的动态绑定

<h1 style={{width:20,fontSize:20}} >user</h1>

label 中使用 for 的时候，要改成 htmlfor

<h1 htmlFor="xxx">欢迎进入 React 的世界</h1>

数组渲染

直接渲染

const list = [<li key="1">sunyang</li>,<li key="2">lining</li>,<li key="3">chenhe</li>
]

数组成员可以是简单数据 number, string , 也可以是 dom 元素

处理并渲染

当数组成员是复合数据时,需要经过 forEach 或 map 方法处理后再渲染输出; map作用是将数据渲染成标签

const list = [{ name:'sunyang',age:10 },{ name:'lining',age:20 },{ name:'chenhe',age:30 }
];
<ul>{list.map(function (item) {return <li key={item.age}>{item.name}</li>})}
</ul>

JSX语法中的注释

写法一（不推荐）： { // 注释 // … }

写法二（推荐，把多行写到单行中）： { /* 单行注释 */ }

写法三（多行）： { /* * 多行注释 */ }

注释在 babel 转换过程中会被忽略掉, 不会出现在最终的 js 代码中.

JSX基本语法规则
1. 必须有且只能有一个根节点
2. 多标签写到包到一个小括号中，防止 JavaScript 自动分号不往后执行的问题。
3. 遇到以 < 开头的 HTML 标签就用 HTML 规则解析
4. 遇到以 { 开头代码块，就用 JavaScript 规则解析
5. 单标签不能省略结束标签 , 必须结束 />
6. JSX 允许直接在模板中插入 JavaScript 变量
7. 如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中

4.案例

在项目src文件夹中创建components文件交放组件

在components文件夹下创建Input.jsx文件


//rcc 生成class形式的组件
//rsf 生成函数式的组件
import './Input.scss'
import React, { Component } from 'react';class Input extends Component {render() {// 像class这样编译为js后会产生歧义的代码, 必须按照react规定的语法书写, 并且必须遵循小驼峰命名法return (<div className='input'><input type="text" placeholder='输入商品名称' /><span>搜索</span></div>);}
}export default Input;

在components文件夹下创建Input.scss文件

.input{display: flex;margin: 10px;input{height: 40px;outline: none;padding-left: 20px;border: 1px solid #ccc;flex:1;}span{width: 80px;display: inline-block;text-align: center;height: 40px;line-height: 40px;}
}

在components文件夹下创建List.jsx文件

import React, { Component } from 'react';
//本地图片必须import导入, 才能使用
import logo from '../logo.svg'import './List.scss'class List extends Component {constructor(props){super(props);this.state = { //定义组件状态arr:[{name:'护肤',pic:logo},{name:'彩妆',pic:logo},{name:'香氛',pic:logo},{name:'进口酒',pic:logo},{name:'国产酒',pic:logo},{name:'精品奢货',pic:logo},{name:'食品百货',pic:logo},{name:'母婴专区',pic:logo},{name:'直播专区',pic:logo},{name:'特卖专场',pic:logo},]}}render() {return (<div className='list'>{// 列表渲染, 使用js中的map函数this.state.arr.map((item)=>{return (<div className="cate"><img src={item.pic} alt="" /><div className="name"> {item.name} </div></div>)})}</div>);}
}export default List;

在components文件夹下创建List.scss文件

.list{display: flex;flex-wrap: wrap;.cate{width: 20%;text-align: center;img{width: 80%;border-radius: 50%;}}
}

在src文件夹中的App2.jsx文件

import logo from './logo.svg';
import './App.css';
import React from 'react';
import Input from './components/Input'
import List from './components/List'class App extends React.Component{constructor(props){ //在constructor中对组件状态进行初始化super(props);this.state = { //初始化组件状态}}render(){ //render是必须的, render中必须通过return返回 组件模板return (<div className="App">{/* 渲染Input组件 */}<Input />{/* 渲染List组件 */}<List /></div>)}
}
export default App;

在index.js文件中

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App2';
import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();tMode><App /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

React学习--- JSX的学习相关推荐

jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
React学习:入门实例-学习笔记
文章目录 React学习:入门实例-学习笔记 React的核心需要引入三个库什么是JSX react渲染三步骤 React学习:入门实例-学习笔记 React的核心 1.组件化:把整一个网页的拆分 ...
React Native v0.55 学习笔记1
React Native v0.55 学习笔记1 学习内容来自官网文档0.55版本 RN 是基于 React 的思想,相比于 web 的一些组件,RN 使用的是基于原生( android.ios )的 ...
React Native小白入门学习路径——五
React Native小白入门学习路径--五序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
【react】react18的学习（三）--hooks组件
上一篇:[react]react18的学习(二)-三种组件 1.useState:使函数组件可以使用并修改 state import { useState } from 'react' const [ ...
react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...
React基础-JSX语法介绍
文章目录 JSX语法介绍认识JSX语法 JSX注释编写 JSX语法介绍认识JSX语法我们先来看一段代码 // 定义根组件 const element = <div>Hello Wor ...
react中 JSX介绍-基本使用
JSX是什么 JSX:是 JavaScript XML的缩写. 在 JS 代码中书写 XML 结构注意:JSX 不是标准的 JS 语法,是 JS 的语法扩展.脚手架中内置了 @babel/plugi ...

React学习--- JSX的学习