Code Monkey home page Code Monkey logo

react-fcm-web-notifications's Introduction

This is yet another starter template using React & Redux. However, this project attempts to create a bare bones starter to start developing on a side project, a demo or a POC right away. I created this after being fed up of using different starter and spending a day clearing out unnecessary code out of them. It demonstrates simple react redux flow along with a few offline capabilities using the technologies listed below.

But first, the demo! A basic counter, the buttons update the redux store via dispatching an action. Note: Check the console for state changes. (thanks to redux-logger)

Technologies used:

Feature highlights:

This design pattern makes even more sense when using React along with Redux, where top-level smart components (a.k.a. containers in this codebase such as Home) subscribe to Redux state and dispatch Redux actions, while low level components (such as User) read data and invoke callbacks passed in as props.

Although it's "cool" to have universal (server-side, isomorphic) rendering these days, there are many situations (like this one) where that complexity is simply not useful or applicable.

Getting Started

Thanks to create-react-app, we will have a configuration-free dev experience.

To get started, please clone this git repository and then run npm install once under the project top-level directory.

git clone https://github.com/vsc-github/simplest-offline-react-redux-starter awesome-project
cd awesome-project
npm install

This will install the dependencies for the client side.

You’ll need to have Node installed on your machine. (Node >= 6 and npm >= 3 are recommended).

While You're Developing...

Whenever you want to run/test the program, cd to the project top-level directory. Use these commands:

npm start

Runs the app in the development mode, using the Webpack-provided "development server".
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

npm run eject

Note: eject is an advanced create-react-app tool. Read the how-to for details.

How Do I ... ?

This project was ported to use create-react-app for handling all assets. Many questions are answered in its how-to.

react-fcm-web-notifications's People

Contributors

vsc-github avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.