ネストしようとする反応成分

Question

私はReact.jsを初めて使っていて、自分自身でウェブサイトを構築しようとしています。私がしようとしているのは、親コンポーネント内に子コンポーネントをネストすることです。親コンポーネントはメインページにレンダリングされ、子コンポーネントは内部にネストされます。私は私の試みの下の例を含んでいます。

私のアプローチは、これまで「childComponent.js」

輸出に子コンポーネントを作成します

1. にされていることを、子コンポーネントのchildComponent "
2. 親コンポーネントへのインポート「childComponent」
として
3. その親コン​​ポーネントの 'childComponent'をレンダリングします。
4. 親コンポーネントを 'parentComponent'としてエクスポートします。
5. インポート「parentComponentに」「index.js」
ここで「index.js」

問題は「childComponentは」私のリアクトアプリで決して見えることであるで「parentComponentに」をレンダリングします。私はここで間違ったアプローチをしていますか？私が理解していない基本的なメカニックはありますか？

ありがとうございます！

-

子コンポーネント（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; 
} 

親コンポーネント（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; 

メインページ（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

あなたの最初の、おそらく問題は、反応成分が大文字で始まることです。

資本化タイプは、JSXタグがReactコンポーネントを参照していることを示します。これらのタグは、名前付き変数への直接参照にコンパイルされるため、JSX式を使用する場合、Fooはスコープ内になければなりません。

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

コメントCSSの除去を助言し、一つのファイルにすべてを移動するにも、デバッグのための良いアドバイスして反応アプリの初期段階です。