尝试嵌套React组件

Question

I'm new to React.js and am trying to use it to build myself a website. What I'm trying to do is to nest a child component within a parent component; the parent component should be rendered in the main page with the child component nested inside. I've included an example below of my attempt.

My approach thus far has been to

1. Create the child component in 'childComponent.js'
2. Export that child component as 'childComponent'
3. Import 'childComponent' to parent component
4. Render 'childComponent' in that parent component
5. Export that parent component as 'parentComponent'
6. Import 'parentComponent' to 'index.js'
7. Render 'parentComponent' in 'index.js'

The problem here is that 'childComponent' is never visible in my React app. Am I taking the wrong approach here? Is there a fundamental mechanic that I'm not understanding?

Thanks in advance!!

--

The child component (childComponent.js):

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

childComponent.css:

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

The parent component (parentComponent.js):

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;

The main page (index.js):

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

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

Answer 1

Your first, and maybe only, issue is that react components must start with a capital letter.

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.

From: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

The comment advising removal of CSS and moving everything into one file is also good advice for debugging and the early stages of a React app.