网站建设营销公司网页设计模板图片
1、JSX基本使用
JSX是React的核心 JSX是ES的扩展 jsx语法 -> 普通的JavaScript代码 -> babel
React可以使用JSX的前提和原因：
- React生态系统支持： 脚手架通常用于构建React应用程序，而JSX是React框架的核心语法之一。因此，脚手架默认支持JSX语法，以便更轻松地编写和管理React组件。
- 提高开发效率： JSX语法使得在JavaScript代码中编写类似HTML的结构更加直观和便捷，提高了开发者的开发效率和代码可读性。
- 组件化开发： JSX语法支持组件化开发，使得开发者可以将UI拆分为独立的组件，更好地组织和管理代码结构，提高了应用的可维护性和可扩展性。
- 工具支持： 脚手架通常配置了相应的编译器或转换工具（如Babel）来将JSX转换为浏览器可执行的纯JavaScript代码，使得开发者可以在开发阶段使用JSX语法，而不必担心浏览器的兼容性问题。
React JSX语法
格外注意：
定义虚拟DOM，不要使用引号。
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写，不仅方便了React应用程序的开发，还提高了开发效率和代码质量。
javascript
var names = ['Alice', 'Emily', 'Kate'];React.render(<div>{names.map(function (name) {return <div>Hello, {name}!</div>})}</div>,document.getElementById('example')
);JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析； 遇到代码块（以 { 开头），就用 JavaScript 规则解析。
javascript
<div id="example"></div>
<script type="text/babel">var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(<div>{names.map(function(name,index){return <div className="zhan" key={index}>这是{index}:{name} </div>})}</div>,document.getElementById('example'));
</script>注意：
document.getElementById('example') 背后不能添加; 这个符号
React的命名
驼峰命名法
想要在返回的div中添加类名：使用className="zhan"而不是class
使用calss会提示
js
Invalid DOM property `class`. Did you mean `className`?JSX允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
特殊属性名
1、React的属性名使用驼峰命名法2、特殊属性名：
class=> className
for=> htmlFor
tabindex=>tabIndex3、没有子节点的可以以/>结尾
4、推荐：使用小括号包裹JSX，从而避免自动插入分号陷阱
javascript
使用小括号包裹jsx
const div=(<div> hello jsx </div>)对应的错误：
（1）未使用驼峰命名法
javascript
var arr = [<h1>Hello world!</h1>,<h2>React is awesome</h2>,
];
React.render(<div>{arr}</div>,document.getElementById('example')
);> 案例:
<div id="example"></div>
<script type="text/babel">var names = [<span className="zhan" key="1">Alice</span>,<span className="zhan" key="2">Emily</span>];ReactDOM.render(<div>{names}</div>,document.getElementById('example'));
</script>2、 JSX之中使用JavaScript表达式
（1） JSX中嵌入javascript表达式
javascript
const reactname='hello react 大雨';
const title=<h1>{reactname}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);（2） JSX的条件渲染
1️⃣ 条件渲染 ：
if else 加载中以及加载完成效果
JS
const isloading=true;
const loadData=()=>{
if(isloading) {
return (<div>正在加载中.......</div>)
}
return (<div>欢迎你加载完成!</div>)
};
const title=(<h1className="h1titi">{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);2️⃣ 三元表达式
JS
const isloading=false;
const loadData=( )=>{
return isloading?(<div>正在加载中.......</div>):(<div>欢迎你加载完成!</div>);
}
const title=(<h1 className="h1titi">{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);3️⃣ 逻辑与运算符
逻辑与运算符是一种中断操作,比如下面的就是当前面成立的时候才执行，否则不执行
JS
const isloading=false;
const loadData=()=>{
return isloading&&(<div>正在加载中.......</div>);
const title=(<h1 className="h1titi">加载效果:{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);（3） JSX的列表渲染
map方法
JS
const Arr=[
{name:'11',value: '11'},
{name: '22',value:'2'},
{name: '333',value:'333'},
const list=(
<ul>
{Arr.map(item=><li>{item.name}</li>)}
</ul>
)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(list);随后我们发现会报错：
翻译过来的意思就是：
JS
注意:渲染列表时应该添加key属性，key属性的值要保证唯一加上key 属性唯一值，正确 同时需要注意的是：尽量避免使用索引号作为key值
JS
const list=(
<ul>
{Arr.map(item=><li
key={item.value};{item.name}</li>)}
</ul>（4） JSX的样式处理
1️⃣ 行内样式
javascript
{Arr.map(item=
<li
style={{color:'red', backgroundColor:'cadetblue'}}
key={item.value}>{item.name}
</li>)}2️⃣ 类名（className 推荐的方法）
js
import React from 'react';
import ReactnoM from 'react-dom/client'; //React 18
import './index.css' // 引入样式
const Arr=[{name:'11',value:'11'},{name:'22',value:'2'},{name: '333',value:'333'},
]// title 类名
const list=(
<ul>
{Arr.map(item=>
<li
className='title' !
key={item.value}>{item.name})
</li>
</ul>
)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(list);3、 JavaScript语句和表达式
javascript
复制代码注意区分:【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式:
(1).a
(2).a+b
(3).demo(1)
(4). arr.map()
(5).function test(){}2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}