• Now let us setup the skeleton of our front end
• Enter your client folder, if you are still in the server folder you can do the following commands to back out into the awesometodos folder and then enter the client folder
• cd ..
• cd client
• now that we are in the client folder, we will install react using create-react-app, a popular way to get started with a react application easily, run the following command in your terminal (make sure you are in the client folder)
• npx create-react-app .
• the . means we want to create our application inside the folder are already in, which in this case is client, this might take a minute or two
• once everything finished installing run the following command, npm start
• the default react app should open up at http://localhost:3000 it should look like this

• press ctrl + C (on windows) or command + C (on mac), to close our react server
• Let's open the src folder and delete unnecessary files for this tutorial.
  • update your src folder to reflect the following

• along with deleting files, do the following as well
  • change App.js and index.js to App.jsx and index.jsx

<aside> 💡 when working with react I like to work with the .jsx extension although for the most part our application will work the same if we left the files with a .js extension

</aside>

• also rename our index.css file to styles.css, again, this is just a personal preference
• inside the styles.css, delete everything currently in it so that we have a blank file
• inside index.jsx, update the file to reflect the following

import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• inside App.jsx, update the file to reflect the following