App Component and File Structure
In this lesson, we create an App component.
We'll cover the following
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.
Get hands-on with 1200+ tech skills courses.