App Component and File Structure

App #

import React from 'react';

import { Provider } from './store';
import TodoList from './TodoList';

const App = () => (
  <Provider>
    <TodoList />
  </Provider>
);

export default App;

This is the root component that wraps TodoList in Provider.

Utils #

We have one more file that exports useFlasher used in the previous lesson.

import { useEffect, useRef } from 'react';

export const useFlasher = () => {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.classList.add('flash');
    setTimeout(() => {
      ref.current.classList.remove('flash');
    }, 300);
  });
  return ref;
};

File structure #

As we have only a small number of files, we put them all flat.

• App.js
• store.js
• TodoList.js
• TodoItem.js
• NewTodo.js
• utils.js

Files with “PascalCase” names are components.

Next #

In the next lesson, we check the app behavior with a working demo.