React Templates & Themes Logo React Templates & Themes
Cra Template Must Have Libraries screenshot

Cra Template Must Have Libraries

Author Avatar Theme by Elieladelrom
Updated: 5 Mar 2022
99 Stars

A starter CRA professional React v17 project with must-have ReactJS libraries including TypeScript, SCSS, Redux, Toolkit, Material-UI, Styled Components, React Router, Jest & Enzym, Folder structure, Generate templates, ESLint, Prettier, Recoil

Github Live Preview

Categories

Create react app Scss Styled components Templates & themes

Overview

The CRA-MHLA Professional Starter is a highly opinionated Create React App (CRA) template that comes with a selection of must-have libraries (MHL). It includes various tools, frameworks, and utilities to help developers quickly set up a React project and get started with development. With a focus on efficiency and best practices, this starter template aims to provide a solid foundation for both small projects and larger enterprise-level applications.

Features

  • React v17.0.2
  • Type Checker - TypeScript ^4.2.3
  • Preprocessors - Sass/SCSS
  • State management - Redux Toolkit, Recoil
  • CSS Framework - Material-UI
  • CSS-in-JS Modules - Styled Components
  • Router - React Router
  • Unit Testing - Jest & Enzyme + Sinon
  • E2E Testing - Jest & Puppeteer
  • Folder structure
  • Generate templates
  • Format & Lint - ESLint & Prettier
  • Useful utilities - Moment, Classnames, Serve, react-snap, React-Helmet, Analyzer Bundle, react-uuid
  • Custom Templates, format, and ESLint configurations

Installation

To use the CRA-MHLA Professional Starter template, follow these steps:

  1. Make sure you have npm installed (npm comes bundled with Node.js).
  2. Open a terminal and navigate to the directory where you want to create your project.
  3. Run the following command to create a new CRA project with the template:
npx create-react-app my-app --template cra-template-mhla
  1. Once the project is created, navigate into the project directory:
cd my-app
  1. You can now use the various scripts provided by the template. For example, to start the development server, run:
npm start
  1. Open your web browser and navigate to http://localhost:3000 to view your app.

Summary

The CRA-MHLA Professional Starter is a highly opinionated Create React App (CRA) template that aims to streamline the process of setting up a React project with a selection of must-have libraries. It provides a comprehensive set of tools, frameworks, and utilities that cover various aspects of React development, including state management, styling, routing, testing, and more. By using this template, developers can kickstart their projects with a solid foundation and save time in the initial setup phase.