Cleaning Up Your React App

Let's clean up and prepare to create your first React App ??

If you ever had used React or have ever tried to make a React project. YOu must have used

//This is what if prefer
npx create-react-app my-app
//This is some other ways to create a new react-app
//Next Js
npx create-next-app@latest
//Remix
npx create-remix
//React with Redux (State management Tool)
npx create-rreact-app my-app--template-redux        

Above are some of the ways to create a react app set-up. Keeping in mind in this article I would talk about how to clean up the default react set-up or the environment that the react team provides us pre-built.

I created a fresh react app using the npx command, This is what my rebuilt project looks like.

Just to mention here while you providing a name to your React app be sure not to have capitalized letters because React won't let you do that:).

Open the directory in your favorite IDE and let's dive deep into refactoring the code. And Let's build a small app using ReactJS.

The First thing I would do to clean up my reactJS boilerplate is to remove unwanted files. Yes, there are some files that we really don't need while developing or working with React in a local environment. When you will open the directory in which you ran the create-react-app command, We will get the following file structure.

Focus on the src folder, where we have to delete some files and refactor the code.

##Delete the about mentioned files
- App.test.js
- logo.svg
- reportWebVitals.js
- setupTests.js        

Remember, removing files would break your code. But we would fix it. The initial step to remove the errors, Is to remove the existence of all the removed files.

Removing reportWebVitals from index.js and similar we have to remove the logo from App.js.

Your App.js file must look like this. Now let's build a counter just so we have a react app up and running.

Up till this point you shouldn't have any errors and should have a clean react app running with App written in the center of the screen.

To have some functionality in your app copy the code above, this is a simple counter-built in React just to make your app run, Hooorry! you are all clean and ready to start.