Skip to content

Latest commit

 

History

History
144 lines (95 loc) · 4.21 KB

README.md

File metadata and controls

144 lines (95 loc) · 4.21 KB

react-flying-saucer 🛸

The 👾 aren't in the bikeshed.

 

 

A simple framework built on top of create-react-app for scalable single-page apps with functional react.

Tries to get out of the way by using only next generation JavaScript features and React spacedust.

features:

  • 🔗 Compose feature modules as declarative React components

  • 🔩 Build functional pipelines with opinionated syntax from babel-preset-techno-babel.

  • 📬 Models provide a bite-size abstraction for redux and keep rendering fast with first-class selectors

  • 🧱 Write business logic and data sources as plain modules and let dependency injection handle the rest

  • 🔋 Batteries included!

    suspense scoped route trees dynamic models
    error boundaries enhanced routing components shorthand redux bindings
    contextual constants composable view side-effects automatic react import

 

 


Quick Start

  • $npx create-react-flying-saucer app
  • $cd app
  • $yarn start

 

 

Whats in the Box?

react-flying-saucer proposes two declarative react primitives to build your app with. It abstracts outside effects (navigation) and redux state to an "app" container provided by a Mothership. Using React semantics, the mothership declaratively lists the Features that modify and listen to this context - preserving redux state scoping and feature component lazy loading.

<Mothership>
    <FormsProvider>
        <Dashboard path="/dash">
            <GlobalStats />
            <TimerBar />
        </Dashboard>
        <Account
            path="/"
            loggedInView="Dashboard"
        />
    </FormsProvider>
</Mothership>

 

One-touch bootstrap or migrate

  • run the latest create-react-app and add react-flying-saucer
$ npx create-react-flying-saucer <project>
  • add react-flying-saucer to an existing app bootstrapped with create-react-app
$ cd <project>
$ npx migrate-react-flying-saucer

import aliases

One flying saucer, Two flying saucers

@

A link to the source root of your project.

@@

re-exports everything you need for creating and mounting a feature fleet.

import { $$ } from '@@'
import Sidebar from '@/features/sidebar'

dot files

react-flying-saucer respects any .babelrc and .eslintrc configuration files. Any additional configuration your project needs can be added directly to these files.

 

 


Examples

More Reading

Packages

Typescript when?!

As soon as @rematch/rematch fixes its core typings.