Repository files navigation

This project is a ready-to-use setup for React/Redux web applications we use atIndoqa. It is based on theReduxtodos example and inspired by a lot of good ideas from theeste 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.

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:
  • redux-observable for side-effects
  • react-router to support multiple pages and history management
  • Fela as our css-in-js library and theming
  • dev tools forlogging and debugging
• Ramda for immutable state transformation
• Reselect to access Redux state
• Flow for static typing of Javascript
• Jest as test framework
• indoqa-webpack build system
  • babel to support es6 syntax ans language features
  • eslint usingeslint-config-indoqa based on the well documentedairbnb rules
  • hot reloading of React components, Fela themes, epics and reducers
• three demo pages:
  • one with an example of fetching data from an external webservice (geonames timezone),
  • two showing a local todo list based on Dan Abramov excellentintroduction into Redux and
  • three demonstrating more advances usages of redux-observable (cancellation, debouncing).
• a simple and clean application layout separating application setup, features and common components and following theatomic design methodology by Brad Frost.

  src├── main│   ├── index.js                        // entry point to the Javascript application│   ├── app│   │   ├── App.react.js                // Theming, HTML header│   │   ├── fela.js                     // Fela renderer configuration│   │   ├── rootEpic.js                 // collect all epics and combine them into a root epic│   │   ├── rootReducer.js              // collect all reducers and combine them into a root reducer│   │   ├── routes.react.js             // link components to routes (URL paths)│   │   ├── selectors.js                // collect all selectors│   │   ├── store.js                    // Redux store setup with hot reloading support│   │   └── theme.js                    // application theme│   ├── 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│   │   │   ├── FeaturePage.react.js    // based on a template available via an URL│   │   │   └── SomeComponent.react.js  // feature-specific molecule or organism│   │   ├── store│   │   │   ├── feature1.actions.js     // action types│   │   │   ├── feature1.epics.js       // side effects using rxjs observables│   │   │   ├── feature1.reducer.js     // Redux reducers│   │   │   └── feature1.selectors.js   // Reselect selectors to access state│   │   └── types                       // Flow types│   ├── feature2│   └── ...└── test                                // Jest tests    └── feature1        ├── actions        ├── components        └── reducers

• Watch thevideo about flux and react, then switch to the evolvedredux and watch thevideos as well.
• Learn about the newes6 features and take a deep look atarrow functions,destructuring,defaults/spread andmodules.
• Flow Getting-Started and itsusage with React and Redux
• TheFela Workshop projects helps you to get familiar with Fela
• Installnodejs includingyarn.

git clone https://github.com/Indoqa/indoqa-react-redux.gitcd indoqa-react-reduxyarn install

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

• i18n
• react-router v4
• code-splitting by routes
• lighthouse check
• add tests (https://reactjs.org/docs/test-utils.html)
• add e2e tests (https://codeburst.io/composable-end-to-end-tests-for-react-apps-2ec82170af62)
• document debugging with Chrome and Firefox tools (maybe improve indoqa-webpack)

• usage withIndoqa Boot in Java frontend-backend applications