https://github.com/aichbauer/redub
a react redux boilerplate
https://github.com/aichbauer/redub
boilerplate nodejs react redux webpack
Last synced: 2 months ago
JSON representation
a react redux boilerplate
- Host: GitHub
- URL: https://github.com/aichbauer/redub
- Owner: aichbauer
- Created: 2017-01-01T18:21:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-23T20:09:55.000Z (about 9 years ago)
- Last Synced: 2025-03-04T20:40:52.942Z (over 1 year ago)
- Topics: boilerplate, nodejs, react, redux, webpack
- Language: JavaScript
- Homepage:
- Size: 29.3 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Redub
#### a react *REDU*x *B*oilerplate
# recommended usage
with `redub-cli`
```shell
# installation
$ npm i -g redub-cli
# create anew project
$ redub new testProject
# generate a new component
$ redub generate comp myNewComponent
```
Documentation for redub-cli [click here](https://github.com/rudolfsonjunior/redub-cli/readme.md)
## install & use
> cd into root directory
```shell
$ npm install
```
> run this for to copy index.html to dist and to bundle javascript and load to dist/js
```shell
$ npm run dev
```
> run this for serving the index.html and the bundle.js on localhost:3000
```shell
$ npm run start
```
## redux devtools
Simply install [redux devtools extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) for chrome and use all the features for debugging the application's state changes.
Devtools only work in development.
## Folder Structure
```
.
+-- src
| +-- config
| |
| +-- js
| | +-- actions
| | +-- components
| | +-- conainers
| | +-- reducers
| | +-- views
| | app.js
| |
| +-- scss
| |
| index.html
|
.babel.rc
.gitignore
package.json
readme.md
webpack.config.js
```
## src directory
Inside here is the code for the complete redux application.
It holdes the following files & folders:
* **config:** for now it only holdes the configuration for the API routes
* **js:** basically is the redux application
* **scss:** holdes the stylesheets for the application
* **index.html:** is the only html file you need
## config directory
Inside here all the configurations are set.
It holds the following files & folders:
* **apiRoutes.js:** this file configures the url-path to the api (`default`: for development)
## js directory
Inside here is all the javascript code for the redux application.
It holds the following files & folders:
* **actions:** the complete logic of the redux application
* **components:** the *dumb* just presentational components of the application (rarely have a state)
* **conainers:** the *intelligent* conainer components (often statefull components)
* **reducers:** the complete statemanagement for the redux application
* **views:** the different views that are displayed to the user. Can consist of multiple components and/or containers
* **app.js:** the entrypoint for the application
## index.html
This is the only html file you need for the redux application.
It holds a div with an id 'root' (here will the application render) and a script with the src 'js/bundle.js' which is the webpacked js code for the redux application.