Feeling Bloaty? File Cleanup After Create-React-App
Tags: react, javascript, beginners, programming
Published: 2022-05-29 05:51:00

The create-react-app command is a great way to start a new React project; everything just works out of the box like magic. In fact, I don't think I've ever _not_ used it to start any of my React projects. However if you're anything like me, the number of never-touched files generated once CRA is done working its magic - index.css, robots.txt, manifest.json, and others - is bothersome. 

When starting out it in your coding journey it can be difficult to discern which files are actually _needed_ since the inner workings of CRA are not (yet) obvious to you. It was one of the first issues I grappled with when I was new, and one for which I still don't easily find answers. So here I am.

Here's what my sample project's file structure looks like after running create-react-app and opening it in VS Code (I'm assuming you already know how to do this):

![file structure image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ye8j4pr4bpctrurq3e0.png)

First, let's outright delete the following files in their entirety:

* favicon.ico (this is the icon for the browser tab)
* logo192.png (react's default logo)
* logo512.png (react's default logo)
* manifest.json (describes the app)
* robots.txt (for search engine crawlers)
* App.test.js (boilerplate test file)
* index.css (boilerplate stylesheet)
* logo.svg (another default logo)
* reportWebVitals.js (for measuring user experience metrics)
* setupTests.js (imports Jest-DOM testing library)
* yarn.lock (if you're using NPM, which I do)

That's 11 files deleted right off the bat. All of these files can be re-added later, if needed, rather than cluttering your view for much of your app's development.

![cleaned up file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipnzbued518gv2whiegi.png)

Now let's move on to some cleanup within the remaining files. Let's start with index.html, which is the root of your project:

![default index.html file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik203urj7vx1a1lv137e.png)

That's a lot of lines of code, and much of it isn't needed. Go ahead and delete lines 5, 12, 17, 30. Then delete all the comments, and consolidate lines 8-10 into one line. You should be left with something like this: 

![cleaned up index.html file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbwo5cfq6e34heq0a0y5.png)

Navigate into App.css next. This file isn't needed until you actually start styling, so you can remove this file in its entirety and re-add it later if you prefer. But if you want to keep it, go ahead and delete everything within it.

Now it's time for index.js, which should look like this:

![default index.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6u8oj9cgzcfh3ppysy85.png)

Go ahead and delete lines 3, 5, and 14-17. You should be left with a barebones file looking like this:

![cleaned up index.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65thair7gjlqorn1cwzn.png)

Finally, let's check out App.js. I prefer the relatively newer arrow functions for my components, so let's convert it. Then delete lines 1, 2, everything within the div, and the classname for the div. Finally, even though we no longer _need_ to import React for simple components, you will need to do so if you plan on using Hooks or other features React provides. Add the import at the top. Your file should look like this: 

![cleaned up App.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjpb82vjs4dlgyx39bxy.png)

That's it! You've removed much of the unused boilerplate clutter, and are ready to start your project with a blank(er) slate. Clutter can be distracting, so I hope you've found this guide useful. 

"The real problem is that we have far more than we need or want.” -Marie Kondō

:)