Javascript 尝试嵌套组件

我是React.js新手，我正试图用它为自己建立一个网站。我想做的是在父组件中嵌套一个子组件；父组件应该在主页中呈现，子组件嵌套在主页中。下面我举了一个我尝试的例子

到目前为止，我的方法是

在“childComponent.js”中创建子组件

将该子组件导出为“childComponent”

将“childComponent”导入父组件

在父组件中呈现“childComponent”

将父组件导出为“parentComponent”

将“parentComponent”导入“index.js”

在“index.js”中呈现“parentComponent”

这里的问题是“childComponent”在我的React应用程序中永远不可见。我是不是走错了路？有没有我不懂的基本机械原理

提前谢谢

--

子组件（childComponent.js）：

父组件（parentComponent.js）：

import React，{Component}来自'React'；
从“./childComponent.js”导入childComponent；
导入“./parentComponent.css”；
类parentComponent扩展组件{
render（）{
返回(
);
}
}
导出默认父组件；

主页（index.js）：

从“React”导入React；
从“react dom”导入react dom；
从“/parentComponent”导入parentComponent；
导入“./index.css”；
ReactDOM.render(
,
document.getElementById（'root'））
);

您的第一个问题（可能也是唯一的问题）是react组件必须以大写字母开头

大写类型表示JSX标记引用的是React组件。这些标记被编译成对命名变量的直接引用，因此如果使用JSX表达式，Foo必须在范围内

发件人：

---

建议删除CSS并将所有内容移动到一个文件中的注释对于调试和React应用程序的早期阶段也是一个很好的建议。

提示：要调试此类问题，请删除所有CSS并将所有代码放在一个文件中。如果可以的话，您可以将组件逐个导出到它们自己的文件中。@pintxo谢谢您的建议！难以置信的对于这样一个小而重要的东西来说，这是一个多么大的兔子洞啊。谢谢

import React, { Component } from 'react';
import './childComponent.css';

class childComponent extends Component {
  render() {
    return (
      <div className="child-component">
        <span>Hello World</span>
      </div>
    );
  }
}

export default childComponent

.child-component {
  width: 100vw;
  height: 300pt;
  background-color: #F4F4F4;
  display: flex block;
  justify-content: center;
  align-items: center;
  align-content: center;
}

import React, { Component } from 'react';
import childComponent from './childComponent.js';
import './parentComponent.css';

class parentComponent extends Component {
  render() {
    return (
      <div className="parent-component">
        <childComponent></childComponent>
      </div>
    );
  }
}

export default parentComponent;

import React from 'react';
import ReactDOM from 'react-dom';
import parentComponent from './parentComponent';
import './index.css';

ReactDOM.render(
  <parentComponent/>,
  document.getElementById('root')
);