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

Overview

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
Comments
  • Doesn't work with

    Doesn't work with "create-react-app --template typescript"

    I loved your project! But I just work with Typescript...

    It would be cool to verify if the file extension of the generated files are in .js, .jsx, .tsx or .ts format and keep their original extensions. By now, the Clean-React CLI is adding an index.js and an App.js file to the src/ dir and keeping my originals index.tsx and App.tsx. Anyways... everything works fine after deleting the original files and renaming the new .js files to .tsx.

    Your project seens to become a huge utility for the React community. Hope it keeps growing and becoming more compatible with more templates rather then only with the default! Maybe even with other generators like create-next-app?

    enhancement 
    opened by euaaron 1
  • Bump ansi-regex from 5.0.0 to 5.0.1

    Bump ansi-regex from 5.0.0 to 5.0.1

    Bumps ansi-regex from 5.0.0 to 5.0.1.

    Release notes

    Sourced from ansi-regex's releases.

    v5.0.1

    Fixes (backport of 6.0.1 to v5)

    This is a backport of the minor ReDos vulnerability in [email protected]<6.0.1, as requested in #38.

    • Fix ReDoS in certain cases (#37) You are only really affected if you run the regex on untrusted user input in a server context, which it's very unlikely anyone is doing, since this regex is mainly used in command-line tools.

    CVE-2021-3807

    https://github.com/chalk/ansi-regex/compare/v5.0.0..v5.0.1

    Thank you @​yetingli for the patch and reproduction case!

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump minimist from 1.2.5 to 1.2.6

    Bump minimist from 1.2.5 to 1.2.6

    ⚠️ Dependabot is rebasing this PR ⚠️

    Rebasing might not happen immediately, so don't worry if this takes some time.

    Note: if you make any changes to this PR yourself, they will take precedence over the rebase.


    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • TypeScript Template Support

    TypeScript Template Support

    Types of changes

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Description

    This PR adds support for cleaning out Create React App projects that have been initiated with the default TypeScript template. It also adds enhancements for checking the pre-chosen file type of components (js, ts, jsx, or tsx) to adjust the file rewrite accordingly, as well as comparison of multiple file versions when searching for previously modified files.

    Related Issue

    Directly addresses issue #1

    Checklist:

    • [x] My change requires a change to the documentation.
    • [x] I have added tests to cover my changes.
    • [x] All new and existing tests passed.
    enhancement 
    opened by mhanki 0
  • [BUG] Original content in index.js and index.tsx differ

    [BUG] Original content in index.js and index.tsx differ

    Describe the bug The new default template content for the index file differs slightly between the JavaScript and TypeScript template, resulting in the app warning the user that index.tsx has already been changed, when in fact it hasn't.

    Expected behavior If nothing has been changed after creating a new project with CRA, the user should not be prompted by any warnings.

    Solution Add index.tsx as a separate file under config.js and adjust the rest of the code accordingly to take this new change into account.

    bug 
    opened by mhanki 0
Releases(v2.0.0)
  • v2.0.0(Jun 9, 2022)

  • v1.1.3(Jun 13, 2021)

    What's Changed

    • Meta tweaks by @mhanki in https://github.com/mhanki/Clean-React/pull/4
    • Bump minimist from 1.2.5 to 1.2.6 by @dependabot in https://github.com/mhanki/Clean-React/pull/5
    • Bump ansi-regex from 5.0.0 to 5.0.1 by @dependabot in https://github.com/mhanki/Clean-React/pull/6

    New Contributors

    • @dependabot made their first contribution in https://github.com/mhanki/Clean-React/pull/5

    Full Changelog: https://github.com/mhanki/Clean-React/compare/v1.1.1...v1.1.3

    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Jun 11, 2021)

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

Malakhov Mikhail 4 May 24, 2022
hopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate

Shopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate, but moved it to Typescript, and more modularized, so you can use any frontend framework you want. I left it comes by default, with React.

Leonel Aimar 9 Nov 21, 2022
💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

??A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

Saad Irfan ⚡️ 234 Oct 18, 2022
Electron-app - A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript

Electron App ??  A ready-to-go with a well-thought-out structure Electron app bo

Dalton Menezes 147 Dec 2, 2022
The New CLI tool explicitly for react.

Reactli (under development) The New CLI tool explicitly for react. This is a CLI tool similar to @angular/cli. The main purpose of this is, to create

Dulranga Dhawanitha 2 Jun 23, 2022
Mg-project-template - A cli tool for creating a template project

Proyect Template CLI Tool A cli tool for creating a template project Quick Overv

Marcelo Garcia 3 Mar 10, 2022
A CLI tool for quickly creating my own Vue3 template and React18-template

vgt Description A CLI tool for quickly creating my own Vue3 template and React18-template. ?? I build it just for fun, it is still in progress. ?? And

Cupid Valentine 4 Nov 12, 2022
A clean, extensible react + redux boilerplate with universal/isomorphic rendering, testing and more

Universal Redux Template A boilerplate doing universal/isomorphic rendering with Redux + React-router + Express, based on Redux-Realword-Example Philo

Yang-Hsing Lin 465 Feb 18, 2022
Template for developing react app with structure inspired by Ignite CLI's react native boilerplate

React Template A react template heavily inspired by Ignite CLI's boilerplate for React Native, it uses a couple of generators with simple template cus

Ibrahim Elaradi 12 Aug 18, 2022
Template for developing react app with structure inspired by Ignite CLI's react native boilerplate

React Template A react template heavily inspired by Ignite CLI's boilerplate for React Native, it uses a couple of generators with simple template cus

Ibrahim Elaradi 12 Aug 18, 2022
Create-t3-app - Interactive CLI to quickly set up an opinionated, full stack, typesafe NextJS project using the T3 Stack

create-t3-app Interactive CLI to quickly set up an opinionated, full stack, typesafe NextJS project using the T3 Stack Usage npm npx [email protected]

T3 Open Source 11.1k Dec 3, 2022
An out-of-box UI solution for enterprise applications as a React boilerplate.

An out-of-box UI solution for enterprise applications as a React boilerplate.

xyj 11 Nov 9, 2022
An out-of-box UI solution for enterprise applications as a React boilerplate.

An out-of-box UI solution for enterprise applications as a React boilerplate.

Ant Design Team 33.3k Dec 1, 2022
Frontend Folder using Create react app and tailwind config, without all the create-react-app boilerplate

Using This Template To use this template click the green button above labled "use this template", then clone it from your repository and run npm insta

Joseph Gibis 7 Sep 5, 2022
Agrippa is a humble CLI, whose purpose is to assist React developers in creating components without the boilerplate.

Agrippa is a humble CLI, whose purpose is to assist React developers in creating components without the boilerplate. It can easily generate te

Nitzan Hen 556 Nov 25, 2022
React template app with clean architecture approach (light version for small projects)

React app with clean architecture approach (light version for small projects) app App directory contains the State Management (in models folder) and C

Viktoriya 1 Feb 7, 2022
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

React Component Generator v1.0.0 A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also aut

Udit Kumar 7 Aug 31, 2022
Boilerplate app for full-stack MERN app with Create React App client toolchain. Uses JWT for auth.

Boilerplate app for full-stack MERN app with Create React App client tool chain. Includes React, JWT authentication, Mongoose/MongoDB, Apollo Server/Client, and ExpressJS.

John Desrosiers 5 Feb 2, 2022
Cleanfolio - a clean and simple portfolio template for developers, built using React

Cleanfolio - a clean and simple portfolio template for developers, built using React

Raj Shekhar 412 Nov 25, 2022