Miss any of our Open RFC calls?Watch the recordings here! »

@indoqa/react-starter

1.4.0 • Public • Published

Indoqa React/Redux Typescript

This project is a ready-to-use setup for Typescript based React/Redux web applications we use at Indoqa. It is based on the Redux todos example and inspired by a lot of good ideas from the este dev stack. The main focus is to create a consistent environment for client side web applications that are consuming business logic using REST services over HTTP.

The codebase was initially developed with ES6/Flowtype and at the end of 2018 migrated to Typescript because of the more mature tooling support.

Changelog

Learn about the latest improvements

Features

We invent nothing new, this archetype is just a composition of useful libraries, frameworks, tools and plugins. In addition to vanilla React and Redux, we set up the following:

  • indoqa-react-app for a basic redux and router setup:
  • Typescript for static typing
  • Immer.js for immutable state transformation
  • Reselect to access Redux state
  • Jest as test framework
  • indoqa-webpack build system
    • hot reloading of React components, Fela themes, epics, actions and reducers
  • several demos, including Formik and i18next.
  • a simple and clean application layout separating application setup, features and common components and following the atomic design methodology by Brad Frost.
    src
    ├── main
    │   ├── index.ts                        // entry point to the Javascript application
    │   ├── app
    │   │   ├── App.tsx                     // Theming, HTML header
    │   │   ├── breakpoints.ts              // Defintions of breakpoints
    │   │   ├── createStore.tsx             // Redux store setup with hot reloading support
    │   │   ├── fela.ts                     // Fela renderer configuration
    │   │   ├── i18n.ts                     // Setup of i18next
    │   │   ├── rootEpic.ts                 // collect all epics and combine them into a root epic
    │   │   ├── rootReducer.ts              // collect all reducers and combine them into a root reducer
    │   │   ├── routes.tsx                  // link components to routes (URL paths)
    │   │   ├── selectors.ts                // collect all selectors
    │   │   ├── store.ts                    // Redux store setup with hot reloading support
    │   │   ├── theme.ts                    // application theme
    │   │   └── types.ts                    // root Typescript types
    │   ├── commons
    │   │   ├── components
    │   │   │   ├── atoms                   // basic building blocks (e.g. boxes, links, etc.)
    │   │   │   ├── molecules               // composition of atoms
    │   │   │   ├── organisms               // compositions of molecules and atoms
    │   │   │   └── templates               // compositions of organisms, molecules and atoms
    │   │   ├── store                       // reusable epics, reducers and actions
    │   │   └── types                       // Flow types available for all features
    │   ├── [feature1]
    │   │   ├── components
    │   │   │   ├── [Feature1]Page.tsx      // based on a template available via an URL
    │   │   │   └── SomeComponent.tsx       // feature-specific molecule or organism
    │   │   ├── store
    │   │   │   ├── [feature1].actions.ts   // actions and action types
    │   │   │   ├── [feature1].epics.ts     // side effects using rxjs observables
    │   │   │   ├── [feature1].reducer.ts   // Redux reducers
    │   │   │   ├── [feature1].selectors.ts // Reselect selectors to access state
    │   │   │   ├── [feature1].services.ts  // Services used in side-effects (epics)
    │   │   │   └── [feature1].types.ts     // Typescript types
    │   ├── [feature2]
    │   └── ...
    │── typings                             // Global type information for typescript
    └── test                                // Jest tests
        └── [feature1]
            ├── actions
            ├── components
            └── reducers
    

Prerequisites

Usage

  • yarn start Run the app inside the dev node server including hot reloading
  • yarn test Run the tests
  • yarn package Create a minified distribution

Install

npm i @indoqa/react-starter

DownloadsWeekly Downloads

98

Version

1.4.0

License

Apache-2.0

Unpacked Size

96.3 kB

Total Files

69

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar