This is boilerplate codes to quick-start a React app with Redux
Install latest Node.js LTS
# Debian
sudo apt update
sudo apt install nodejs
nodejs -v
# Windows
choco install nodejs-lts
Clone the repo and install dependencies
# git clone will create a directory named myAppName
# if the directory is already created, then use .(dot) instead of myAppName
git clone https://github.com/junekimdev/boilerplate-react-redux-app.git <myAppName>
cd myAppName
yarn
Make sure to remove .git
directory to start afresh
# remove .git directory beforehand
git init
git add .
git commit -m "Initial commit"
git branch -M master
git remote add origin <myGitRepo>
git push -u origin master
Add a file .env
that includes environmental variables
example
#NODE_ENV=production
#PUBLIC_URL=https://app.domain.com
API_URL=http://api.domain.com
- Markup language (Web Standard): HTML5
- Stylesheet language (Web Standard): CSS3
- Script language: ECMAScript 2015 (a.k.a Javascript ES6)
- Javascript Package Manager: Yarn
- Script preprocessor: Typescript
- Website client-side rendering framework: ReactJS
- Website server-side rendering framework: NextJS
- Package management: webpack (included in NextJS)
- Transpiler: SWC (included in NextJS)
- State management: Redux
- Redux middleware: Redux-saga
- HTTP client: axios
- JavaScript Testing Framework: Jest
- Browser style normalization script: Normalize
- Stylesheet preprocessor: SASS/SCSS
- Stylesheet postprocessor: Postcss (included in NextJS)
- Postcss plugin: Autoprefixer (included in NextJS)
- Version control: Git
- Source code repository: GitHub
- Linter: ESLint
- Formatter: Prettier
- Template engine for code generation: EJS
Root ├── components ├── _theme.scss └── eachComponent ├── index.ts ├── eachComponent.module.scss ├── eachComponentInteractor.tsx ├── eachComponentPresenter.tsx ├── eachComponentViewName.tsx └── eachComponentType.tsx ├── controllers ├── index.ts ├── store.ts ├── apiURLs.ts ├── actions ├── index.ts └── eachAction.ts ├── reducers ├── index.ts └── eachReducer.ts ├── sagas ├── index.ts └── eachSaga.ts └── types ├── index.ts └── eachTypes.ts ├── pages ├── _app.tsx ├── _document.tsx ├── index.ts └── global.scss ├── public ├── favicon.ico (similar files) ├── robot.txt └── assets └── images └── eachImage.png ├── templates └── eachCodeGenerationTemplate.ejs
- With a View file
node codegen-comp.js --name=myComponent
- Without a View file
node codegen-comp.js --name=myComponent --V
-
Create new file,
myNewAction.ts
, one for each action, reducer, saga by usingcodegen-action.js
action names should be in arguments as unnamed args (e.g. action1, action2, action3, moreActions)
node codegen-action.js --name=myNewAction action1 action2 action3 moreActions
-
Add
myNewAction
intoindex.ts
under actions directoryexport { default as myNewAction } from './myNewAction';
-
Add
myNewActionReducer
intoindex.ts
under reducers directoryimport myNewAction from './myNewActionReducer'; const rootReducer = combineReducers({ existingAction, myNewAction });
-
Add
myNewActionSaga
intoindex.ts
under sagas directoryimport myNewActionSaga from './myNewActionSaga'; const sagas: any[] = [requestSaga, existingActionSaga, myNewActionSaga];
-
Create new actions in
myNewAction.ts
by usingcodegen-action.js
Appending actions require the same filename which exists already in each folder
node codegen-action.js --name=myNewAction action1 action2 action3 moreActions
- June Kim - Initial work - Github
This project is licensed under the MIT License - see the LICENSE file for details