Create React Saga

create-react-saga is a CLI tool for quickly setup your next clutter-free webpack backed React application. It provides you the latest hooks based codebase, testing utilities and storybooks. So if you are thinking of below -

1. Create components ahead of development for early reviews.
2. Want to use Redux-Saga middleware for async calls.
3. Proper testing environment setup for React hooks.

Then you have come to the right place. You will get the most vanilla React experience ever. See the features section for detailed info.

📺 Demo

You can find the live demo of the running boilerplate over here

🚀 Features

• Written in React 18 with hooks and functional components. Easy to clean bootstrapped codebase with minimal number of dependencies.
• Latest and greatest Webpack 5. Configurations included for production and development environments.
• Environment variables support to keep your secrets hidden.
• JavaScript and TypeScript templates to choose from.
• Less boilerplate code for state manamgement through @reduxjs/toolkit 💪.
• Redux-Saga for async calls without polluting redux actions.
• Redux devtool integration with trace enabled. Download browser extension to track saga calls. For example for Google Chrome you can find it over here.
• Storybook.js to showcase your component ahead of feature development.
• React Testing Library configured for unit testing with example test cases.

💻 Technology Stack

• React 18
• @reduxjs/toolkit
• Redux-Saga
• Webpack 5
• Storybook.js
• Jest
• React Testing Library

📙 Documentation

npx create-react-saga --help will show you all available options.

Detailed version of the documentation can be found over here

🤔 How to use?

$ npx create-react-saga my-first-project
$ cd my-first-project
$ npm start

Open localhost:3000 in the Browser.

npm 5.2+ version is required for npx to work.

🌲 Project structure

create-react-saga will create below project structure -

my-first-project
├── .storybook
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
├── .babelrc
├── setupTests.js
├── jest.config.js
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── assets
└── src
    ├── __mocks__
    ├── components
    ├── utils
    ├── store
    ├── types
    ├── hooks
    ├── App.ts
    ├── index.html
    ├── index.tsx
    └── index.css

✔ Production build

$ npm run build

Bundle files can be found in dist folder under root directory

📚 Storybook

$ npm run storybook

Open localhost:6006 in the Browser.

Donate

Create React Saga is an open-source project that I created to help myslef with some ready to use starter code. Then I published this CLI tool to help others as well. It takes lot of effort and time to add new features, provide support and maintain at the same time. Please consider donating if you think Create React Saga is helpful to you ub any way. I would be happy if you can -

Show ❤️ by starring this repo.

📑 License

Create React Saga is open source software licensed as MIT. The logo is licensed under a Creative Commons Attribution 4.0 International license.