[react] react18核心语法

B站链接：https://www.bilibili.com/video/BV1pF411m7wV

react项目的目录结构

public文件夹用于存放静态页面资源，src文件夹用于存放react关键代码。

---

如何创建项目

npx create-react-app 项目名
记得安装nodejs环境
Windows下使用命令提示符或者powershell创建，Linux或macos使用对应的shell创建。

出现上图内容即为创建成功。

---

JSX

• index.js为项目的入口文件(可以理解为index.html)，其中的两个库很重要，分别是React和ReactDOM。
• ReactDOM的createRoot方法可以在浏览器的 DOM 节点中创建根节点以显示 React 组件(必须要有)。
• 变量名.render()方法用于进行根组件的渲染（没它整个页面就没有任何内容）。
• <React.StrictMode>方法是react的一个严格模式（可以显示代码中的错误）。

---

• react的组件是以函数的形式进行导出（react有函数和类这两种组件形式），此外react的代码是以JSX(JavaScript和HTML)的形式进行编程的。
• app.js调用后会直接返回①return ()方法内存放的HTML代码。
• 注意，JSX只能有一个根元素，多写了会直接罢工

---

JSX插值

用法：{值}
示例：

---

① return后面需要跟一个表达式，否则会报错。如果表达式不需要换行，写法为 return XXX，如果涉及多行，则写法为return ();，多行代码（比如app.js里演示的HTML代码）写到括号内。