create-react-saga v1.0.2
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 -
- Create components ahead of development for early reviews.
- Want to use Redux-Saga middleware for async calls.
- 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.
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago