A boilerplate for React JS with Redux and Saga.

栏目: IT技术 · 发布时间: 6年前

内容简介:A ready-to-use boilerplate for React JS with Redux and Saga.This is a basic project structure with repeatative use cases. Added some essential feature for every projects. It is very useful to build mid to complex level project. This project structure is ba

React JS with Redux and Saga Project Structure

A ready-to-use boilerplate for React JS with Redux and Saga.

Project Overview

This is a basic project structure with repeatative use cases. Added some essential feature for every projects. It is very useful to build mid to complex level project. This project structure is based on NodeJs api boilerplate app: https://github.com/maitraysuthar/rest-api-nodejs-mongodb

I had tried to maintain the code structure easy as any beginner can also adopt the flow and start building a great app. Project is open for suggestions, Bug reports and pull requests.

Is this project deserves a small treat?

If you consider my project as helpful stuff, You can appreciate me or my hard work and time spent to create this helpful structure with buying a coffee for me.

A boilerplate for React JS with Redux and Saga.

Features

Feature Details
Structure Project is build with extenensible and flexible Moduler pattern
Authentication Basic Authentication (Register/Login)
Confirm Account Account confirmation with OTP verification
Route Protection Route protection with middleware and localstorage
Lazy Loading Added Lazy Loading of components to fasten the execution process of application
App State Management Application level state management with Redux
Async Call Managed async calls with Saga middleware
Forms Managed apllication forms & validations with Formik and Yup

Software Requirements

  • Node.js 8+

How to install

Using Git (recommended)

  1. Clone the project from github. Change "myproject" to your project name.
git clone https://github.com/maitraysuthar/react-redux-saga-boilerplate.git ./myproject

Using manual download ZIP

  1. Download repository
  2. Uncompress to your desired directory

Install npm dependencies after installing (Git or manual download)

cd myproject
npm install

Setting up environments

  1. You will find a file named .env.example on root directory of project.
  2. Create a new file by copying and pasting the file and then renaming it to just .env
    cp .env.example .env
  3. The file .env is already ignored, so you never commit your credentials.
  4. Change the values of the file to your environment. Helpful comments added to .env.example file to understand the constants.

How to run

npm start

New Module

All the modules of the project will be in /src/modules/ folder, If you need to add more modules to the project just create a new folder in the same folder.

Every folder contains following files:

index.jsx
actions.js
reducer.js
saga.js
[module].css

Root module:

Module's root module folder is /src/modules/app/ it contains main Routes file ( routes.js ) , Reducer file ( mainReducer.js ) and Saga file ( mainSaga.js ) . You will need to add your every component,reducer & saga to make your module work.

Found any bug? Need any feature?

Every project needs improvements, Feel free to report any bugs or improvements. Pull requests are always welcome.

License

This project is open-sourced software licensed under the MIT License. See the LICENSE file for more information.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。

个体与交互

个体与交互

Ken Howard、Barry Rogers / 贾永娜、张凯峰 / 机械工业出版社华章公司 / 2012-3-20 / 45.00元

对敏捷软件开发的关注重点,通常都集中在“机制”方面,即过程和工具。“敏捷宣言”认为,个体与交互的价值要高于过程和工具,但这一点很容易被遗忘。在敏捷开发中,如果你重新将注意力放在人的方面,将会收获巨大利益。 本书展示了如何解决敏捷团队在实际项目中遭遇的问题。同时,本书也是很有实用价值的敏捷用户指南,其中包含的故事、最佳实践方法、经验以及技巧均可应用到实际项目当中。通过逐步实践,你将学会如何让团......一起来看看 《个体与交互》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具