【前端知识】React基础巩固(二)

React基础巩固(二)

为什么需要JSX？

1. createElement存在的问题：

• 繁琐不简洁
• 不直观，无法一眼看出所描述的结构
• 不优雅，开发体验不好

2. JSX

• 简介：JSX 是 JavaScript XML 的简写，表示了在JS代码中写XML（HTML）格式的代码
• 优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率
• JSX 是 react 的核心内容‘
• JSX 不是标准的JS语法，是JS的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包用来解析该语法

JSX注意点

1. 只有在脚手架中才能使用JSX语法，因为JSX需要经过babel的编译处理才能在浏览器中使用。脚手架中已经默认有了这个配置。
2. JSX必须要有一个根节点，<>
3. 没有子节点的元素可以使用/>结束
4. JSX中语法更接近于JavaScript（class => className、for => htmlFor）
5. JSX可以换行，如果JSX有多行，推荐使用（）包裹JSX,防止自动插入分号的bug

/**
 * 1. 导入React和ReactDOM
 * 2. 创建react元素 1.React。createElement 2.jsx
 * 3. 渲染
 */

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

const element = (
  <div id="box">
    <h1>标题</h1>
    <ul>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </div>
);

// 幽灵节点
const element_1 = (
  <>
    <div className="box">test</div>
    <span>outman</span>
    <a href="#">百度一下</a>
    <img src="./abc.gif" alt=""></img>
  </>
);


// 老版本：ReactDOM.render(element, document.getElementById("root"));
/**
 * react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. 
 * Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. 
 * Learn more: https://reactjs.org/link/switch-to-createroot
 */
createRoot(document.getElementById("root")).render(element_1);