内容简介：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.
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)
- 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
- Download repository
- Uncompress to your desired directory
Install npm dependencies after installing (Git or manual download)
cd myproject npm install
Setting up environments
- You will find a file named
.env.exampleon root directory of project. - Create a new file by copying and pasting the file and then renaming it to just
.envcp .env.example .env
- The file
.envis already ignored, so you never commit your credentials. - Change the values of the file to your environment. Helpful comments added to
.env.examplefile 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.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
微信小程序(开发入门及案例详解)
李骏、边思 / 机械工业出版社 / 2017-3-1 / 59.0
本书可分为3部分，第一部分作为基础章节，介绍了第一个小程序的搭建流程，让大家能快速上手；同时对小程序框架原理进行了详细介绍，为后面学习组件、API打下基础。 第二部分对小程序组件、API进行介绍，对组件、API的使用、注意事项进行详细讲解，并给出示例代码。 最后一部分精选5个由浅入深的案例，对小程序研发进行实战讲解，涵盖了实际项目中可能涉及的技术方案和使用方法，具备很强的实战意义。 ......一起来看看 《微信小程序(开发入门及案例详解)》 这本书的介绍吧!
