GithubHelp home page GithubHelp logo

jeffbski / react-boilerplate-logic Goto Github PK

View Code? Open in Web Editor NEW

This project forked from react-boilerplate/react-boilerplate

16.0 4.0 6.0 3.78 MB

:fire: redux-logic fork of react-boilerplate - A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. (sagas swapped out for redux-logic)

License: MIT License

ApacheConf 0.80% JavaScript 92.96% HTML 6.23%

react-boilerplate-logic's Introduction

react-boilerplate-logic

A fork of react-boilerplate which uses redux-logic instead of sagas

Start your next react project in seconds using redux-logic
redux-logic fork of mxstbr/react-boilerplate - A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. (sagas swapped out for redux-logic)

Build Status

Adapted by Jeff Barczewski to use redux-logic. Original code by Max Stoiber and contributors.

Features

redux-logic
One place for all your business logic. Simple but powerful. Intercept (validate/transform/augment) actions and perform async processing (fetching, I/O) using your favorite style of JS code: callbacks, promises, async/await, observables. Advanced features like cancellation, latest filtering, and debouncing are simple declarations.
Quick scaffolding
Create components, containers, routes, selectors and redux-logic - and their tests - right from the CLI!
Instant feedback
Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!
Predictable state management
Unidirectional data flow allows for change logging and time travel debugging.
Next generation JavaScript
Use template strings, object destructuring, arrow functions, JSX syntax and more, today.
Next generation CSS
Write composable CSS that's co-located with your components for complete modularity. Unique generated class names keep the specificity low while eliminating style clashes. Ship only the styles that are on the page for the best performance.
Industry-standard routing
It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.
Industry-standard i18n internationalization support
Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.
Offline-first
The next frontier in performant web apps: availability without a network connection from the instant your users load the app.
SEO
We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)

But wait... there's more!

  • The best test setup: Automatically guarantee code quality and non-breaking changes. (Seen a react app with 99% test coverage before?)
  • Native web app: Your app's new home? The home screen of your users' phones.
  • The fastest fonts: Say goodbye to vacant text.
  • Stay fast: Profile your app's performance from the comfort of your command line!
  • Catch problems: AppVeyor and TravisCI setups included by default, so your tests get run automatically on Windows and Unix.

There’s also a fantastic video on how to structure your React.js apps with scalability in mind. It provides rationale for the majority of boilerplate's design decisions.

Keywords: React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, styled-components, redux-logic, FontFaceObserver

Quick start

  1. Clone this repo using git clone --depth=1 https://github.com/mxstbr/react-boilerplate.git
  2. Run npm run setup to install dependencies and clean the git repo.
    We auto-detect yarn for installing packages by default, if you wish to force npm usage do: USE_YARN=false npm run setup
    At this point you can run npm start to see the example app at http://localhost:3000.
  3. Run npm run clean to delete the example app.

Now you're ready to rumble!

Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you.

Documentation

Supporters

This fork is supported by CodeWinds Training

The original react-boilerplate project lists its supporters on the front page.

License

This project is licensed under the MIT license,

Copyright (c) 2017 Jeff Barczewski and Project Contributors
Copyright (c) 2016 Maximilian Stoiber

For more information see LICENSE.md.

react-boilerplate-logic's People

Contributors

7rulnik avatar amilajack avatar benjaminlgt-littlelives avatar chaintng avatar datapimp avatar dattaya avatar fezvrasta avatar gihrig avatar glennreyes avatar gonzochic avatar grabbou avatar greenkeeperio-bot avatar jbinto avatar jeffbski avatar jurekbarth avatar justingreenberg avatar jwinn avatar maxmantz avatar mihir0x69 avatar mxstbr avatar nekr avatar okonet avatar oliverturner avatar philihp avatar raksonibs avatar rog avatar samit4me avatar sedubois avatar somus avatar suhaotian avatar

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar

react-boilerplate-logic's Issues

Integrating Redux-Logic with Apollo Client 2.0 or Other Graphql Client

Issue Type

Question

Description

Hi @jeffbski ! So happy to have found a Redux middleware author who sees the world as I do :) I apologize for creating an issue here - if you would have prefered it in redux-logic I can repost. I am struggling to integrate Redux-logic with a GraphQL client (currently Apollo 2.0). This is not by any means a ding on Redux Logic documentation as it's very comprehensive imo (you can't possibly foresee all the different integration issues in advance), but I am wondering if you have any guidance for people trying to integrate a graphql client with Redux logic (i.e., dispatching graphql queries/mutations and subscribing to streams) from within the middleware async orchestration logic.

Thank you for creating Redux Logic. I have a feeling it's gonna be king of the hill ;)

Logic module as global

Hello,

How can we create a logic module as global in our application ? Like for authentication, etc.

Best regards

Help for understanding how to use redux-logic with latest react-boilerplate

react-boilerplate-logic

Following react-boilerplate#1912, next release of the boilerplate will include many changes to improve modularity of containers.

Routes are loaded within app/Containers/App/index.js directly and sagas and reducers are injected within the container component using HoC.

Issue Type

Description

Current https://github.com/jeffbski/react-boilerplate-logic version is for the old react-router and can't be used as a reliable example anymore.

New utils have been made in order to make modulatiry possible, see:

https://github.com/react-boilerplate/react-boilerplate/tree/dev/app/utils

This way it can group the logic and reducer injection within containers:

https://github.com/react-boilerplate/react-boilerplate/blob/dev/app/containers/HomePage/index.js#L129

I am a hudge fan of redux-logic and I think it is a shame it hasn't been implemented in the react-boilerplate yet.

It would be nice if we could update this repo with :

I have started to translate what I could: https://github.com/kopax/react-boilerplate-logic/tree/logic/app/utils

Versions

  • React-Boilerplate-Logic (see package.json): 3.4.0 dev branch

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.