一天搞定React（2）——JSX语法

    Hello！大家好，今天带来的是React前端JS库的学习，课程来自黑马的往期课程，具体连接地址我也没有找到，大家可以广搜巡查一下，但是总体来说，这套课程教学质量非常高，每个知识点都有一个小案例，最后有一个总的美团外卖案例教学，大家可以看看我这篇文章，如果能够帮到你们，还请多多点赞o(￣▽￣)ｄ支持支持🌹，如果文章中有错误的或者是遗漏信息，可以在评论区指出或者是与我私信。我看到了消息，一定会及时更正过来∠(°ゝ°)。话不多说，直接开学💪⛽️！

JSX语法

什么是JSX语法？其实就是JavaScript+XML。JSX 是 JavaScript 的一个语法扩展，它允许你在 JavaScript 代码中写类似 HTML 的标签结构。JSX 被设计为与 React 库一起使用，React 是一个用于构建用户界面的 JavaScript 库。JSX 本质上是一种语法糖，它使得组件的编写更加直观和结构化。

在 JSX 中，你可以像写 HTML 一样写标签，但是这些标签实际上是 JavaScript 表达式。这意味着你可以在 JSX 中使用变量、条件语句、循环等 JavaScript 功能。JSX 标签最终会被编译成 React 组件的调用。

JSX原理：是将 HTML 风格的标记语言转换为 JavaScript 对象，通过编译器（如 Babel）编译成可执行的 JavaScript 代码。它允许在 React 应用中以声明方式编写用户界面，利用组件化和虚拟 DOM 技术提高性能和可维护性。

说了这么多，可能听起来有点干涩。不明白没有关系，我们继续往下看，下面我准备了JSX初体验，里面包含了样式引入和事件引入以及渲染元素的步骤，通过这下面的三个初体验，然后我们再正式的引入JSX的原理和语法规则，相信你会很快上手的💪⛽️。

JSX初体验

样式引入

1. 导入样式形式：

   import 'css文件路径'
   

   添加class类名的时候不能直接在标签中写class=""而是需要className=""来指定。

2. 内联样式形式：

   function MyComponent() {
     return <div style={{ color: 'blue', fontSize: '16px' }}>Hello, world!</div>;
   }
   

   将样式定义为一个对象字面量，并直接传递给组件的 style 属性。

事件引入

事件命名需要使用驼峰命名法（第二个字母大写），然后绑定事件的值不再是一个字符串了，要换成一个{}，里面写函数。

<button onClick={ ()=> {alert('Hello')} }>按钮</button>

渲染元素步骤

1. 导包

   import {createRoot} from 'react-dom/client'
   

2. 创建React根对象

   const root = createRoot(document.querySelector('#root'))
   

3. 渲染React内容

   root.render(<h1>Heelo,React</h1>)
   

全部代码：

import { createRoot } from "react-dom/client";

const root = createRoot(document.querySelector("#root"));

root.render(
  <div>
    <h1>Hello，React</h1>
  </div>
);

JSX规则

1. 必须具有一个根节点

   root.render(
   	<div>
   		<h1></h1>
       <p></P>
   	</div>
   )
   

2. 所有标签必须是闭合的

3. 标签属性名称是驼峰命名法

   比如className属性，而不是classname❌
   

JSX{}的应用

作用：让JSX变为动态的，可以用在标签内容、属性中。

常见应用场景：

• 列表渲染：使用map方法
• 条件渲染：逻辑运算或者三元运算符
• 样式处理：类名样式处理className

React事件绑定

语法：

<标签 on+事件={函数} />

同样的为了符合JSX规则的第三条，需要遵循驼峰命名法，事件需要使用驼峰命名。

单独创建事件处理程序函数：

const 函数名 =()=>{方法体}
<标签 on+事件={函数名} />

将事件抽离出来了，这两种用法具体看实际应用，如果事件处理程序逻辑比较简单，我们就用第一种写法就可以了；如果事件处理程序比较复杂，就把事件处理程序单独 写成一个函数，抽离出来，这样代码就不会如此凌乱、复杂了。

例如：

<div className="box" onClick={()=>{
	alert('React事件绑定')
}}

箭头函数还可以进一步简写：去掉箭头函数的花括号简写完之后如下：

<div className="box" onClick={()=> alert('React事件绑定') }

事件对象

我们观看以下代码：

<a herf="www.baidu.com" onClick={()=>{
    alert('我们会发现点击这个超链接之后，跳转到了网页，但是没有触发alert这个警告窗，所以我们这里要想着如何关闭掉他这个默认事件。')
  }}
>

我们会发现点击这个超链接之后，跳转到了网页，但是没有触发alert这个警告窗，所以我们这里要想着如何关闭掉他这个默认事件。

所以我们需要关闭默认行为，在原生事件里面，就是通过事件对象去调用一个preventDefault() 来关闭。

<a herf="www.baidu.com" onClick={e=>{
		e.preventDefault()	//我们需要通过一个e（事件处理参数）来拿到事件对象
    alert('阻止默认行为')	
  }}
>

还是上面一个例子，有点过于冗杂了，所以这个时候我们使用单独创建事件处理程序函数来简化代码：

const handleClick = e=>{
	e.preventDefault()
	alert('阻止默认行为')
}

<a herf="www.baidu.com" onClick={handleClick}>

<a herf="www.baidu.com" onClick={handleClick()❌}>	//注意这里是函数名称，而不是函数调用，这里不能加上括号