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=>tabIndex
3、没有子节点的可以以/>结尾
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}