DEV Community

Cover image for Best cra-template to start a react project
Ghazi Khan
Ghazi Khan

Posted on • Originally published at codewithghazi.com

4

Best cra-template to start a react project

Hi All,

I'm glad to share this information with you all that I have created a template for create-react-app CLI.

Which anyone can use and start a project with a pre-configured react starter package that has 126 stars on Github and liked by many developers.

npx create-react-app <app-name> --template cwg-react

You just have to run this command replacing with your app name and it will create a new react project with the latest version of react and the cwg-react-starter package template.

The idea behind converting this package to a cra template is that many people are liking this template and to start a new project either they have to clone the repository or download the zip from GitHub which has an older version of react. Instead of cloning or downloading zip now, it will be more efficient to use it as a template and that too without worrying about react updates.

Detailed Blog about the structure

GitHub logo gkhan205 / cwg-react-starter

Pre-configured and Ready to use React Starter App. To save time in settings things up for new project. Almost everything needed is already configured. Just clone and start developing without wasting time in doing same stuffs for every project. (#codewithghazi)

GitHub license GitHub stars GitHub issues

CWG React Starter

Pre-configured and Ready to use React Starter App. To save time in settings things up for new project. Almost everything needed is already configured. Just clone and start developing without wasting time in doing same stuffs for every project. You can use it with Create React App as Template

npx create-react-app <app-name> --template cwg-react

Read detailed explanation here

Overview

Things included in this starter app

  • Folder Structure
  • Axios Interceptor
  • Redux with Redux-Thunk
  • Router with Private Route
  • Confugured for SCSS/SASS
  • Eslint & Prettier
  • Pre-commit Hook
  • Absolute Imports

Please follow this import style for better code readability

Folder Structure

Big and extensive React application should have well planned and organized project structure. Best way is to use a mix of strategies to achieve better results as I am going to describe next.

Top level project architecture (which is under src/ folder) should be organized by type. No files should…

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs