App Component and File Structure

App #

This is the root component that wraps the TodoList in the Provider.

// ./components/App.js

import React from 'react';

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

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

export default App;

Utils #

We have one more file that exports useFlasher.

// ./utils.js

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;
};

Folder structure #

Our files are stored in different directories. Below is a list of all the files:

store.js
hooks/useTodoList.js
hooks/useAddTodo.js
hooks/useDeleteTodo.js
hooks/useToogleTodo.js
hooks/useQuery.js
components/TodoList.js
components/TodoItem.js
components/NewTodo.js
components/App.js
utils.js

Next #

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