@mhanki/clean-react

A CLI tool to clean out boilerplate code from create-react-app

Usage no npm install needed!

<script type="module">
  import mhankiCleanReact from 'https://cdn.skypack.dev/@mhanki/clean-react';
</script>

README

clean react logo

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