32

React native + Redux + Saga boilerplate for beginners.

 5 years ago
source link: https://github.com/geekygaurav/react-native-redux-saga-garvax
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

:sparkles: React + Redux + Saga Boilerplate :sparkles:

e26Vbeb.png!web

Hey folks! I have brought to you the coolest trio in the trend of mobile application technologies. Yes, you guessed it right. We can already smell the popularity of React getting higher these days and also Redux which proved to be a strong supporting framework for React. But what's the interesting thing about GARVAX?. I have used the Sagas middleware.

Now I am not the first one to do this, actually many have started to use Saga. But I made this boilerplate especially for those who are noobs to the react-native world and want to kickstart developing an application to learn. The configurations are also understandable if you have a basic knowledge of react-native and javascript. You're good to go. :grin:

Click here to download the Android version of Garvax

Installation

  1. Fork/clone this repo.
  2. Open your terminal and go the project directory cd garvax
  3. Run yarn install, yarn install
  4. Run react-native run-android or react-native run-ios

About

RN version used in this project is 0.59. This project is developed from scratch using react-native cli. I haven't used many third party libraries in this project because I wanted boilerplate to be lite and simple without making complicated code so that others can easily get familiar and also can modify/implement their own changes by forking this repo. :sunglasses:

Assets

Basically you can put all your assets here. Even if you want to include .ttf fonts or anything, you can put up here.

**PROTIP!! Make sure you maintain a proper folder structure as well as nomenclature and don't mess up with your assets. :wink:

Business

This is a business layer where you can save all the necessary business logic and functionalities in one place so that you can use it from anywhere inside the project.

Component

Tada! This is a significant important folder. You can store re-usable components over here and use it across the project. Remember that react strongly supports the idea of components re-usability.

Note Mostly components are regarded as child components that deals with props and not state variable

Container

Here comes the actual folder which contains all the screens. In other words, we can call it as parent components.

Fixtures

Well, this is not so important folder but at the same time very handy to use. Suppose you are doing development and you don't have actual APIs to develop. In that case, you can form your own JSON files and keep it here and use it exactly you would have used for API response. Once you get the real API just replace it in your component. This will not hinder your development. Cool isn't it? :+1:

Images

Image component layer where you will already make your images ## JS ready and import in your component. This will prevent you from writing same syntax again and again. :relieved:

Metrics

This one also a very useful folder, where you want to globalize your application style, fonts, etc. It will keep consistency to your project all over regarding the UI.

Navigation

Well, we can say it as a library for our application. We can import all the screens and keep them here.

NOTE In this project we have used Stack navigator. Anyhow you can modify this file to create your own navigator and customize. You can visit React navigation for more information.

Redux

This is our redux folder and we keep all the reducer in one place. If you want to know more about how redux works you can go to Redux official site to know more.

Note If you are creating any reducer, don't forget to import it in the index.js file.

Saga

Our middleware lives right here and operates. If you want to explore more about how saga works, please go here , you will have an idea. Parallelly you can tally with our boilerplate saga configuration so that you have a clear picture.

Service

This is our API endpoints saving file and we can export it any place and perform fetch functions.

About PRs and contributing

This repo is always open for upgradation. If you have any idea,suggestions or feedback, please feel free to contact me. We can make this project better together. :pray:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK