❤React-JSX语法认识和使用

1、JSX基本使用

JSX是React的核心 JSX是ES的扩展 jsx语法 -> 普通的JavaScript代码 -> babel

React可以使用JSX的前提和原因:

  1. React生态系统支持: 脚手架通常用于构建React应用程序,而JSX是React框架的核心语法之一。因此,脚手架默认支持JSX语法,以便更轻松地编写和管理React组件。
  2. 提高开发效率: JSX语法使得在JavaScript代码中编写类似HTML的结构更加直观和便捷,提高了开发者的开发效率和代码可读性。
  3. 组件化开发: JSX语法支持组件化开发,使得开发者可以将UI拆分为独立的组件,更好地组织和管理代码结构,提高了应用的可维护性和可扩展性。
  4. 工具支持: 脚手架通常配置了相应的编译器或转换工具(如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}
相关推荐
Black蜡笔小新1 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_2 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2132 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy2 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪3 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞3 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-3 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与3 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun3 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇3 小时前
ES6进阶知识一
前端·ecmascript·es6