create-react-redux-saga-app v1.0.5
create-react-redux-saga-app
create-react-redux-saga-app
relies oncreate-react-app
which will need to be installed separately. Instructions can be found here.
Overview
A thin wrapper around create-react-app
This project is a thin wrapper around Facebook's create-react-app but adds the following common libraries needed for most medium to large-sized web apps:
Name | Description |
---|---|
redux | Redux is a predictable state container for JavaScript apps |
react-redux | Official React bindings for Redux. Performant and flexible |
redux-actions | Flux Standard Action utilities for Redux |
redux-debounced | Debounce middleware for Redux |
redux-saga | An intuitive Redux side effect manager. Easy to manage, easy to test, and executes efficiently |
axios | Promise based HTTP client for the browser and node.js |
sass | A pure JavaScript implementation of Sass. Sass makes CSS fun again |
bootstrap | Sleek, intuitive, and powerful front-end framework for faster and easier web development |
react-bootstrap | Bootstrap 5 components built with React |
react-router-dom | The react-router-dom package contains bindings for using React Router in web applications |
plop | Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity |
eslint | ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions |
prettier | Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary |
babel | Babel plugin to add the opportunity to use import and require with root based paths |
customize-cra | This project provides a set of utilities to customize create-react-app versions 2 and 3 configurations leveraging react-app-rewired core functionalities |
react-app-rewired | Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts |
Installation
Install create-react-redux-saga-app
globally
npm install -g create-react-redux-saga-app
Creating an App
To create a new app, run
create-react-redux-saga-app my-app-name
npm start
Runs the app in development mode. Open http://localhost:3000 to view it in the browser.
The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
npm run build
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed.
npm run generate redux
Runs the command to generate code redux and api base on plop-templates/redux
What you get?
create-react-redux-saga-app
not only installs the latest versions of the above-described packages, but also overwrites some of the default template files included with create-react-app
, specifically:
It will create a directory called my-app-name
inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
my-app
├── .vscode
├── node_modules
├── plop-templates
├── public
├── htaccess
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── assets
├── components
├── configs
├── constants
├── helpers
├── layouts
├── pages
├── redux
├── routers
├── services
├── styles
├── App.js
├── index.js
└── reportWebVitals.js
├── .env.example
├── .eslintrc.js
├── .gitignore
├── config-overrides.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── plopfile.mjs
└── README.md