Структура React-приложения

Сейчас код приложения имеет вот такой вид и лежит в файле index.js

import React from 'react';
import ReactDOM from 'react-dom';

const TodoList = () => {
  const items = ['Learn React', 'Create Awesome App'];
  return (
    <ul>
      <li>{items[0]}</li>
      <li>{items[1]}</li>
    </ul>
  );
};

const AppHeader = () => {
  return <h1>My Todo List</h1>;
};

const SearchPanel = () => {
  return <input placeholder = 'search' />;
};

const App = () => {
  return (
    <div>
      <AppHeader/>
      <SearchPanel/>
      <TodoList/>
    </div>
  );
};

ReactDOM.render(<App/>, document.querySelector('#root'));

Но такой код плохо масштабируется.
Типичный паттерн организации кода реакт-приложения - один файл - один компонент.
В папке src проекта создаём папку components
В ней создаём файлы js, с названиями, которые повторяют названия компонентов, копируем в них код компонентов, не забывая в конце прописать експорт.
Например, в файле TodoList.js находится такой код:

import React from 'react';
import ReactDOM from 'react-dom';

const TodoList = () => {
  const items = ['Learn React', 'Create Awesome App'];
  return (
    <ul>
      <li>{items[0]}</li>
      <li>{items[1]}</li>
    </ul>
  );
};

export default TodoList;

Все вынесенные в папку components js-файлы импортируем в файл index.js

import React from 'react';
import ReactDOM from 'react-dom';

import AppHeader from './components/AppHeader';
import SearchPanel from './components/SearchPanel';
import TodoList from './components/TodoList';

const App = () => {
  return (
    <div>
      <AppHeader/>
      <SearchPanel/>
      <TodoList/>
    </div>
  );
};

ReactDOM.render(<App/>, document.querySelector('#root'));

Структура приложения
1. Один компонент - один файл
2. Все компоненты помещаем в папку components
3. Хорошие компоненты - независимые компоненты