React and Redux not render view

Question

поэтому я разрабатываю приложение для хранения небольших книг в React + Redux. Но по какой-то причине представление не будет отображаться, и я не знаю, почему. Код также не вызывает ошибку.

Это структура моего приложения.

src 
----actions 
----components 
      ----App.js 
----containers 
      ----bookList.js 
----reducers 
      ----book.js 
      ----index.js 
--index.js 

Вот отдельные файлы

index.js/ГКЗ

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/App.js'; 
import {Provider} from 'react-redux'; 
import {createStore} from 'redux'; 
import rootReducer from './reducers/index.js'; 

let store = createStore(rootReducer); 


ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider>, 
    document.getElementById('root') 
); 

/components/App.js

import React from 'react'; 
import bookList from '../containers/bookList.js'; 

const App =() => { 
    return (
    <div> 
     <bookList /> 
    </div> 
) 
} 

export default App; 

/containers/bookList.js

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 

class bookList extends Component { 
    renderList() { 
     return this.props.books.map(book => { 
      return <li key={book.title}>{book.title}</li> 
     }); 
    } 

    render() { 
     return (
      <ul className='list-group col-sm-4'> 
       {this.renderList()} 
      </ul> 
     ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     books: state.books 
    } 
} 

export default connect(mapStateToProps)(bookList); 

/reducers/index.js

import {combineReducers} from 'redux'; 
import books from './books.js'; 

const rootReducer = combineReducers({ 
    books: books 
}); 

export default rootReducer; 

/reducers/book.js

const books =() => { 
    return [ 
     {title: 'JavaScript'}, 
     {title: 'Harry Potter'}, 
     {title: 'Some Random Title'} 
    ] 
} 

export default books; 

Как я уже говорил в начале, абсолютно никаких ошибок не бросают, и любые console.log заявления I попытка выполнить в файле bookList.js, не отображается.

Его как этот файл не читается компилятором Babel.

Однако, когда я регистрирую функцию bookList, которую я импортирую из bookList.js в App.js, она выводит на экран функцию подключения. Таким образом, этот файл явно импортируется.

Answer 1

Вы можете проверить это: User-Defined Components Must Be Capitalized.

В случае ссылка становится недействительным:

Когда тип элемента начинается со строчной буквы, это относится к встроенным в компоненте, как и результаты, и в строке 'div' или 'span' передается React.createElement. Типы, начинающиеся с заглавной буквы, такие как компиляция до React.createElement(Foo) и соответствуют компоненту, определенному или импортированному в ваш файл JavaScript.
Мы рекомендуем назвать компоненты с большой буквы. Если у вас есть компонент, начинающийся с буквы в нижнем регистре, назначьте его капитализированной переменной, прежде чем использовать его в JSX.

Answer 2

Хорошо, у меня есть ответ для вас, ребята, и я думаю, что это будет абсолютно взорвать ваш разум так же, как и мой.

Так получилось, что все, что мне нужно было сделать, это изменить «bookList» на «BookList» в любом случае этого слова в файле App.js и в файле bookList.js.

Я понятия не имею, почему это работает именно так. Если бы кто-нибудь мог это объяснить, я был бы очень благодарен. Потому что это первый раз, когда я сталкивался с ошибкой кода из-за различий в синтаксисе именования.