Javascript 应用程序中未显示的组件

我正在尝试在react中构建基本应用程序，但我不明白为什么在DOM中看不到一个组件（称为指令）的信息。 有人需要帮忙吗

App.js：

import React from "react";
import ReactDOM from "react-dom";
import instructions from "./components/instructions/instructions"

class Generator extends React.Component {

  render() {
  return (
    <div className="App">
    <div className="gen-button">
    <instructions />
    <button type="button">generate</button>
      </div>
      <div className="random-number"> 
      <p>0</p>
      </div>
    </div>
    );
  }
}

export default Generator;

从“React”导入React；
从“react dom”导入react dom；
从“/组件/说明/说明”导入说明
类生成器扩展了React.Component{
render（）{
返回(
生成
0

);
}
}
导出默认生成器；

和说明部分：

import React from "react";

const instructions = () => {

    return (
        <div>
        <p>Click "generate" for a random number"</p>
        </div>
        );
}

export default instructions;

从“React”导入React；
常量指令=（）=>{
返回(
单击“生成”以获取随机数

);
}
导出默认指令；

乍一看，一切似乎都是正确的。但是，在做了两次拍摄后，我注意到您的

组件不是以大写字母开头的，这是对自定义组件的要求

如上所述

JSX标记名约定（小写名称表示内置组件，大写名称表示自定义组件）

因此，如果将

更改为

（在导入、调用、导出和创建中），它将按预期工作

请检查这个

---

希望这有帮助！

乍一看，一切似乎都是正确的。但是，在做了两次拍摄后，我注意到您的

组件不是以大写字母开头的，这是对自定义组件的要求

如上所述

JSX标记名约定（小写名称表示内置组件，大写名称表示自定义组件）

因此，如果将

更改为

（在导入、调用、导出和创建中），它将按预期工作

请检查这个

---

希望这有帮助！

请将您的

组件更改为

，根据JSX惯例，只考虑资本请将您的

组件更改为

，根据JSX惯例，只考虑资本组件应以资本开头。 如果您将“说明”更改为“说明”，它将起作用

请参阅下面的代码（在空的React应用程序中）App.js

---

组件应以大写字母开头。 如果您将“说明”更改为“说明”，它将起作用

请参阅下面的代码（在空的React应用程序中）App.js

---

你能在stack blitz或其他地方给出一个可复制的例子吗？你能在stack blitz或其他地方给出一个可复制的例子吗

import React from 'react';
import './App.css';

const aaa = () => {
    return (
        <p>This is from 'aaa' component</p>
    )
}

const Bbb = () => {
    return (
        <p>This is from 'Bbb' component</p>
    )
}

const App = () => {
  return (
    <React.Fragment>
      <aaa/>
      <Bbb/>
    </React.Fragment>
  );
}

export default App;

This is from 'Bbb' component