Cra Template Codely

Overview:

This article discusses the use of a Create React App (CRA) template called Codely, which aims to optimize the default CRA template by adding essential features for every React project. The article explains how to create a React app using this template, the features it includes, and how to improve and contribute to the template.

Features:

• TypeScript: Includes TypeScript for static typing in the React app.
• ESLint and Prettier: Comes pre-configured with Codely’s configuration for code linting and formatting.
• Jest with React Testing Library: Provides unit testing capabilities for the app.
• Cypress with Testing Library: Allows for end-to-end testing of the app.
• GitHub Action Workflows: Sets up workflows for running tests and linting on push.
• Makefile: Standardizes how the project is run.
• Sass: Enables the use of nested classes and other features to enhance CSS.
• Editorconfig: Facilitates sharing of IDE configurations.

Installation:

To create a React app using the Codely template, run the following npx command in the terminal:

npx create-react-app my-app --template codely

Alternatively, if you prefer using Yarn:

yarn create react-app my-app --template codely

This will create a “my-app” folder in the current directory. Inside the generated project, there will be a README.md file with instructions on how to build, test, and run the application.

Summary:

The Codely template is an optimized version of the default Create React App template, providing essential features for React projects. It includes TypeScript, ESLint and Prettier configurations, Jest and Cypress for testing, GitHub Action workflows, Makefile, Sass, and Editorconfig. The article also encourages users to contribute to the template and outlines the code quality standards followed during its development. Additionally, it mentions related templates available for TypeScript and other programming languages.