Clean React
Clean React is a CLI tool that removes and modifies some of the boilerplate files and code that are being generated when initiating a new project with Create React App.
The tool is designed to provide a clean and minimalistic code base to your new project. It will first check to make sure you actually are in a Create React App project and then proceed to delete and overwrite these files.
Clean React supports both default Create React App templates (JavaScript and TypeScript). It tries to first determine the chosen file type for components (.js, .ts, .jsx, .tsx) and adjusts the rewrite process accordingly, to keep the files in the same format.
Installation
npm install -g @mhanki/clean-react
Usage
From the root of your project, simply run:
clean-react
If you already modified one or more of the files that Clean React tries to rewrite, it will prompt you with a warning and ask for your permission to proceed. Since the intended use of the app is to clean out the project before you start with your own code, just beware that it will delete these files without giving extra warnings.
Modified Files
All of the following JavaScript files can also be of type .ts, .tsx or .jsx.
Files that will be removed:
- favicon.ico
- all logo files (logo192.png, logo512.png, logo.svg)
- manifest.json
- robots.txt
- reportWebVitals.js
- setupTests.js
- App.test.js
Files that will be modified:
Clean React will empty the following files:
- index.css
- App.css
- README.md
And replace these files with the following content:
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
- index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
- App.js
import React from 'react'
import './App.css'
function App() {
return (
<div>
<p>Clean React App</p>
</div>
)
}
export default App
4 May 24, 2022
10 Dec 5, 2022
237 Dec 28, 2022
155 Dec 29, 2022
2 Jun 23, 2022
3 Mar 10, 2022
4 Nov 12, 2022
465 Feb 18, 2022
11 Nov 30, 2022
33.4k Jan 4, 2023
12 Aug 18, 2022
8 Dec 4, 2022
12.5k Jan 2, 2023
556 Jan 1, 2023
8 Dec 7, 2022
1 Feb 7, 2022
5 Feb 2, 2022
4 Nov 22, 2022