高端大气装饰公司网站源码 百度网盘,马云做网站最早,手动搭建wordpress,万网域名注册官网1、JSX基本使用
JSX是React的核心 JSX是ES的扩展 jsx语法 - 普通的JavaScript代码 - babel
React可以使用JSX的前提和原因#xff1a;
React生态系统支持#xff1a; 脚手架通常用于构建React应用程序#xff0c;而JSX是React框架的核心语法之一。因此#xf…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 divHello, {name}!/div})}/div,document.getElementById(example)
);
JSX 的基本语法规则遇到 HTML 标签以 开头就用 HTML 规则解析 遇到代码块以 { 开头就用 JavaScript 规则解析。
javascript div idexample/div
script typetext/babelvar names [Alice, Emily, Kate];ReactDOM.render(div{names.map(function(name,index){return div classNamezhan key{index}这是{index}:{name} /div})}/div,document.getElementById(example));
/script
注意
document.getElementById(example) 背后不能添加; 这个符号
React的命名
驼峰命名法
想要在返回的div中添加类名使用classNamezhan而不是class
使用calss会提示
js
Invalid DOM property class. Did you mean className?
JSX允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组则会展开这个数组的所有成员。
特殊属性名
1、React的属性名使用驼峰命名法2、特殊属性名
class className
for htmlFor
tabindextabIndex
3、没有子节点的可以以/结尾
4、推荐使用小括号包裹JSX从而避免自动插入分号陷阱
javascript
使用小括号包裹jsx
const div(div hello jsx /div)
对应的错误
1未使用驼峰命名法 javascript
var arr [h1Hello world!/h1,h2React is awesome/h2,
];
React.render(div{arr}/div,document.getElementById(example)
); 案例:
div idexample/div
script typetext/babelvar names [span classNamezhan key1Alice/span,span classNamezhan key2Emily/span];ReactDOM.render(div{names}/div,document.getElementById(example));
/script
2、 JSX之中使用JavaScript表达式
1 JSX中嵌入javascript表达式
javascript
const reactnamehello react 大雨;
const titleh1{reactname}/h1;
const root ReactDOM.createRoot(document.getElementById(root));
root.render(title);
2 JSX的条件渲染
1️⃣ 条件渲染
if else 加载中以及加载完成效果
JS
const isloadingtrue;
const loadData(){
if(isloading) {
return (div正在加载中......./div)
}
return (div欢迎你加载完成!/div)
};
const title(h1classNameh1titi{loadData()}/h1);
const root ReactDOM.createRoot(document.getElementById(root));
root.render(title);
2️⃣ 三元表达式
JS
const isloadingfalse;
const loadData( ){
return isloading?(div正在加载中......./div):(div欢迎你加载完成!/div);
}
const title(h1 classNameh1titi{loadData()}/h1);
const root ReactDOM.createRoot(document.getElementById(root));
root.render(title);
3️⃣ 逻辑与运算符
逻辑与运算符是一种中断操作,比如下面的就是当前面成立的时候才执行否则不执行
JS
const isloadingfalse;
const loadData(){
return isloading(div正在加载中......./div);
const title(h1 classNameh1titi加载效果:{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(itemli{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(itemli
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
classNametitle !
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).ab
(3).demo(1)
(4). arr.map()
(5).function test(){}2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
