/cra-template-awesome

🚀 A custom template for the Create React App.

Primary LanguageJavaScriptMIT LicenseMIT

React Template Awesome

Created by Víctor Casas and started with Create React App.
Made with ❤

About

A custom template for the Create React App. Using all the power it contains, in addition to the incredible additional functions and technologies that we implement for you.

Features

  • ✨ Redux: Managing the status of your application.
  • ✨ PropTypes: Type check for React props.
  • ✨ React Router: Managing the navigation of your application.
  • ✨ Environments: Custom environments (development, staging and production).

For a better development experience, we added the following:

😍 Help components already integrated.

  • ✨ React.StrictMode: Highlights possible problems in the application.
  • ✨ Public/Private Routes: Management of public and private routes.
  • ✨ Public/Private Layout: Management of public and private Layout.

😍 Tools for code development

  • ✨ EditorConfig (*): Maintaining consistent coding styles.
  • ✨ ESLint (*): Find and fix problems in your JavaScript code.
  • ✨ Prettier: Always keep your code formatted.
  • ✨ Husky: Prevents Git's ills.
  • ✨ lint-staged: Run linters against Git files in confirmed state git add.

(*) We recommend that you have the extensions installed in your favorite code editor.

Quick Start

It is very easy to start using RTA, you just have to follow the following steps to have your own version on your local machine.

git clone https://github.com/vicasas/cra-template-awesome.git my-app
cd my-app
npm install
npm start

Available Scripts

With all the power of the Create React App scripts, plus the following we have created for you.

⚠ We recommend not using npm run eject.

npm run build:staging

Create a build for a staging or qa environment. It will take any settings that exist in the environment variables file env.staging or.env.

npm run build:development

Create a build for a development environment. It will take any settings that exist in the environment variables file env.development or.env.

What do I do to make a build in production? -The default npm run build is still used, which will take the configurations that exist in the environment variables file.env.production or .env.

npm run lint

Used to inspect JavaScript code for errors using ESLint, which are indicated by the console.

npm run lint:fix

Used to inspect and at the same time correct JavaScript code that contains errors using ESLint.

npm run pretty

Used to format the code following the Prettier rules defined by the development team.

Roadmap

What is next?

🔔 First things first, to launch our v1.0.0 we have set ourselves the goal of being an admissible package for Custom Template official Create React App, where developers can install the template using only the npx create-react-app my-app --template awesome command.

💥 Issue: Currently the CRA Custom Template does not work with the devDependencies of thepackage.json since this template has such dependencies we cannot take it to what we want. Can we find a solution?

[...]

🚀 Generate our CONTRIBUTORS.md to contribute to the repository. ¡Ready! ✔

🚀 Generate our CODE_OF_CONDUCT.md for the code of conduct. ¡Ready! ✔

🚀 Automatically generate CHANGELOG.md.

🚀 Genere linters para la validación de confirmaciones de Git.

🚀 Automatically generate semantic versions in each release.

...¡And of course!, We would like to do many more things 🙌❤.

Contributing

¿Do you like RTA? We invite you to collaborate with us.

Changelog

To see what has changed, visit our CHANGELOG.md.

License

React Template Awesome is MIT Licensed 😁.