React Bloat

The first step to a new React project is to get rid of this.

If you are looking through the React docs trying to find out how to install React into your project you likely settled on the line:

npx create-react-app my-app

This creates a React template which you can then incorporate your project into. However, this also includes a lot of placeholders that are not necessary to your project and if you don’t know where to look for all these assets that come included, they may linger in your project long after you’ve finished it or it’s in production.
Is this the hugest deal, not really. I find it to be a nuisance though, especially when working with an ESLinter config which will require additional setup of you to even get the initial React app template to run.
In this article, I will first go over how to remove all the unnecessary parts of create-react-app with no other dependencies, and then I will go over how to get your React app working after you’ve added an ESLinter configuration such as Airbnb’s.
First, I’ll create and run my React app exactly as described in the React docs.

‘create-react-app’ is one of more than a few different ways to incorporate React into your project. See the docs.

Once I see that everything is working, I’ll open my src/App.js file.

Default App.js

Here I’ll get rid of the return and the imports, taking note of where the assets like the atom picture are being imported from because removing those will be the next step.

It is possible to make this shorter but not necessary and not the point.

Now that I’m not importing anything from src/App.css into my src/App.js anymore I can just remove that file. I typically use Styled Components instead of stylesheets anyway. You can learn more about Styled Components here.

Right-click -> Delete

Next, I’ll remove the logo that was being imported into our App.js file.

Right-click -> Delete

After that, I’ll go into the public directory and remove some of the images that come with the React installation.

3x Right-click -> Delete

The last thing I’m going to go ahead and delete is public/manifest.json which is responsible for downloading those images we deleted from our project when React was being installed.

Tired of Deleting things yet?

I will also need to go into my index.html and remove lines 12–17 which look for the manifest.json.

Console warnings on some of my recent projects made me aware of this.

I’ll refresh my project to make sure I am not getting any errors and I see that I’m not so I will move on.
Now, there are other things I could have removed but it’s starting to get case dependant as far as those things go.
For instance, if I was installing Styled Components, I would remove src/index.css and replace it with Global Styles. What I’ve deleted so far can be deleted from most projects with little to no consequence.
Now, what I’ll do is install my ESLinter with the Airbnb config for ESLinter and Prettier. This helps me write robust code by making sure I’m abiding by their best practices. You can find out more about that here.

I like trailing commas on everything even though I know it’s going to cause another error initially.

After that script finished installing everything and I restart my server I am greeted by several errors.

The only really important part is ‘react-in-jsx-scope’, the other errors are just Prettier formatting.

I’ll go through them one at a time.
First up,
src/App.js Line 2:10: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
This simply means that React isn’t being imported into src/App.js and it’s saying the error is on line 2 so that confirms this is the issue.
After importing React into my App.js and restarting my server I see the error is gone.

I think React made it unnecessary to import React in App.js but it’s good to be explicit and consistent.

The next two errors are within my src/index.js so I can fix both of them at the same time.

Remove Lines 5 & 14–17. Add comma to Line 11.

The top error we can correct by removing reportWebVitals from the file. That is where it’s being imported at the top as well as at the bottom where the function is being called. This can always be added later but also isn’t likely to be used on most projects anyway.
The second error can be fixed by just adding a comma at the end of the line. The reason this error occurred in the first place was that I told prettier that I wanted trailing comma’s when I executed the configuration script for ESLinter and Prettier.
The last thing we can do now that we’ve removed the webVitals from our index.js is remove the reportWebVitals.js file that our index.js was importing from since we aren’t using it anymore (the alternative here is to refactor the reportWebVitals.js file so that the import (‘webVitals’) happens before anything else in the file which would require changing the .then syntax which is beyond the scope of this particular article).

Note remaining files on the left.

This article details the actions I typically begin with when creating a new React app. There are other steps I take as well as far as creating GlobalStyles to replace index.css and adding a component file structure to all my projects but those steps really are dependant on whether you use Styled Components and the shape of your particular project. And yes, when you take into account git commits to keep track of files you are deleting also for other contributors this all does take annoyingly long to do considering not much progress is being made on the actual project but if you get yourself into the routine of knowing what to look for and making your React project just the way you like it, the routine really does make it a bit quicker.
I hope this article provided some value to you and thank you again for taking the time to read it. If you have any input or would like to discuss, please feel free to reach out in the comments or on LinkedIn.