导入的React组件无法显示，寻求技术解决方案

组件无法显示的核心原因是React组件的命名必须遵循首字母大写的规范——小写开头的标识符会被React解析为普通HTML标签，而非自定义组件。

具体修改步骤： #

1. 修改 functionalComponent.js 文件
   将类名改为首字母大写的FunctionalComponent，保持导出一致：

   import React from "react";
   
   class FunctionalComponent extends React.Component{
       render(){
           return <p>This is a component.</p>
       }
   }
   
   export default FunctionalComponent;
   

   注：该组件实际是类组件，建议将文件名改为ClassComponent.js更语义化，不过这不影响功能运行。

2. 修改 App.js 文件
   更新导入的组件名称，并在渲染时使用大写开头的组件标签：

   import React from 'react';
   import logo from './logo.svg';
   import './App.css';
   import FunctionalComponent from './functionalComponent';
   import classComponent from './classComponent';
   
   function App() {
     return (
       <div className="App">
         <FunctionalComponent />
       </div>
     );
   }
   
   export default App;
   

完成以上修改后，重新运行项目，组件即可正常显示在页面上。

内容的提问来源于stack exchange，提问作者Deus Ex