Пытается вложить реактивные компоненты

Question

Я новичок в React.js и стараюсь использовать его для создания веб-сайта. То, что я пытаюсь сделать, - вложить дочерний компонент в родительский компонент; родительский компонент должен отображаться на главной странице с дочерним компонентом, вложенным внутри. Я привел пример моей попытки.

Мой подход до сих пор был в

1. Создать компонент ребенка в
2. Экспорт 'childComponent.js', что ребенок компонент как 'childComponent'
3. Import 'childComponent' в родительском компоненте
4. Render 'childComponent' в этом исходном компоненте
5. Экспортировать этот родительский компонент как 'parentComponent'
6. Import 'parentComponent' до '' index.js
7. Рендер 'parentComponent' в '' index.js

Проблема здесь состоит в том, что 'childComponent' никогда не видно в моем React приложении. Я здесь ошибаюсь? Есть ли фундаментальный механик, которого я не понимаю?

Спасибо заранее!

-

Ребенок компонент (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 и перемещение все в один файл, также хороший совет для отладки и на ранние стадии React приложения.