react 要求自定义组件名必须以大写字母开头，否则 jsx 会将其识别为原生 html 标签（如 `
在 React 中，JSX 对组件名称的大小写极为敏感——这是初学者最容易忽略却影响最直接的规则之一。当你定义 function bannner() { ... } 并在 JSX 中写成 <bannner />，React 会将其解析为一个小写 DOM 标签（类似 <div> 或 <span>），而非你期望的自定义组件。由于浏览器不存在 <bannner> 这个原生标签，最终渲染结果为空白，控制台也通常不会抛出明显错误，造成“代码运行无反应”的困惑。
✅ 正确做法是：所有自定义组件名首字母必须大写（如 Banner, Cart），这是 React 的强制约定，也是 JSX 编译器识别组件的关键依据。
此外，原始代码中还存在两处关键问题需同步修复：
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
- 拼写错误：pixhero 应为 prixhero（变量声明与使用需一致）；
- JSX 语法细节：<h1>{title}</h1> 等返回语句无需括号包裹（虽非错误，但推荐简洁写法）；<ul> 内 <li> 必须闭合，且嵌套结构需保持合法 HTML 语义。
以下是修正后的完整可运行代码：
function Banner() {
const title = "c'est pur ?";
return <h1>{title}</h1>;
}
function Cart() {
const prixbedo = 10;
const prixhero = 20; // ✅ 修正变量名拼写（原代码中误写为 pixhero）
const prixcoc = 70;
return (
<div>
<h2>Panier</h2>
<ul>
<li>bedo : {prixbedo}$</li>
<li>heroïne : {prixhero}$</li>
<li>cocaïne : {prixcoc}$</li>
</ul>
</div>
);
}
ReactDOM.render(
<div>
<Banner />
<Cart />
</div>,
document.getElementById("root")
);⚠️ 注意事项：
- 确保 HTML 文件中已正确引入 React、ReactDOM 及 Babel（用于 JSX 转译），例如通过 CDN：
<script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
- <script type="text/babel"> 标签包裹 JSX 代码，或使用构建工具（如 Vite、Create React App）避免手动配置；
- 所有组件函数必须在 ReactDOM.render() 调用前声明，避免变量提升或作用域问题。
遵循组件命名规范是 React 开发的第一道门槛，看似微小，却直接决定 UI 是否可见。养成 PascalCase 命名习惯（如 UserProfile, ProductList），不仅能规避渲染失败，也为团队协作和代码可维护性打下坚实基础。
