|
1 | | -#Indoqa React/Redux Archetype |
2 | | - |
3 | | -This project is a ready-to-use setup for React/Redux web applications we use at[Indoqa](https://indoqa.com). It is based on the |
4 | | -Redux[todos example](https://github.com/reactjs/redux/tree/master/examples/todos) and inspired by a lot of good ideas from the[este](https://github.com/este/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. |
5 | | - |
6 | | -##Features |
7 | | - |
8 | | -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: |
9 | | - |
10 | | -*[indoqa-react-app](https://github.com/Indoqa/indoqa-react-app) for a basic redux and router setup: |
11 | | -*[redux-observable](https://github.com/redux-observable/redux-observable) for side-effects |
12 | | -*[react-router](https://github.com/reactjs/react-router) to support multiple pages and history management |
13 | | -*[Fela](http://fela.js.org/docs/Introduction.html) as our css-in-js library and theming |
14 | | -* dev tools for[logging](https://github.com/fcomb/redux-logger) and debugging |
15 | | -*[Ramda](http://ramdajs.com/docs/) for immutable state transformation |
16 | | -*[Reselect](https://github.com/reactjs/reselect) to access Redux state |
17 | | -*[Flow](https://flow.org/) for static typing of Javascript |
18 | | -*[Jest](https://facebook.github.io/jest/docs/en/getting-started.html) as test framework |
19 | | -*[indoqa-webpack](https://github.com/Indoqa/indoqa-webpack) build system |
20 | | -*[babel](https://babeljs.io/) to support es6 syntax ans language features |
21 | | -* eslint using[eslint-config-indoqa](https://github.com/Indoqa/eslint-config-indoqa) based on the well documented[airbnb](https://github.com/airbnb/javascript) rules |
22 | | -*[hot reloading](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) of React components, Fela themes, epics and reducers |
23 | | -* three demo pages: |
24 | | -*[one](https://github.com/Indoqa/indoqa-react-redux/tree/master/src/main/time) with an example of fetching data from an external webservice ([geonames timezone](http://www.geonames.org/export/web-services.html#timezone)), |
25 | | -*[two](https://github.com/Indoqa/indoqa-react-redux/tree/master/src/main/todos) showing a local todo list based on Dan Abramov excellent[introduction](https://egghead.io/lessons/javascript-redux-react-todo-list-example-adding-a-todo) into Redux and |
26 | | -*[three](https://github.com/Indoqa/indoqa-react-redux/tree/master/src/main/todos) demonstrating more advances usages of redux-observable (cancellation, debouncing). |
27 | | -* a simple and clean application layout separating application setup, features and common components and following the[atomic design](http://atomicdesign.bradfrost.com/) methodology by Brad Frost. |
28 | | -``` |
29 | | - src |
30 | | - ├── main |
31 | | - │ ├── index.js // entry point to the Javascript application |
32 | | - │ ├── app |
33 | | - │ │ ├── App.react.js // Theming, HTML header |
34 | | - │ │ ├── fela.js // Fela renderer configuration |
35 | | - │ │ ├── rootEpic.js // collect all epics and combine them into a root epic |
36 | | - │ │ ├── rootReducer.js // collect all reducers and combine them into a root reducer |
37 | | - │ │ ├── routes.react.js // link components to routes (URL paths) |
38 | | - │ │ ├── selectors.js // collect all selectors |
39 | | - │ │ ├── store.js // Redux store setup with hot reloading support |
40 | | - │ │ └── theme.js // application theme |
41 | | - │ ├── commons |
42 | | - │ │ ├── components |
43 | | - │ │ │ ├── atoms // basic building blocks (e.g. boxes, links, etc.) |
44 | | - │ │ │ ├── molecules // composition of atoms |
45 | | - │ │ │ ├── organisms // compositions of molecules and atoms |
46 | | - │ │ │ └── templates // compositions of organisms, molecules and atoms |
47 | | - │ │ ├── store // reusable epics, reducers and actions |
48 | | - │ │ └── types // Flow types available for all features |
49 | | - │ ├── feature1 |
50 | | - │ │ ├── components |
51 | | - │ │ │ ├── FeaturePage.react.js // based on a template available via an URL |
52 | | - │ │ │ └── SomeComponent.react.js // feature-specific molecule or organism |
53 | | - │ │ ├── store |
54 | | - │ │ │ ├── feature1.actions.js // action types |
55 | | - │ │ │ ├── feature1.epics.js // side effects using rxjs observables |
56 | | - │ │ │ ├── feature1.reducer.js // Redux reducers |
57 | | - │ │ │ └── feature1.selectors.js // Reselect selectors to access state |
58 | | - │ │ └── types // Flow types |
59 | | - │ ├── feature2 |
60 | | - │ └── ... |
61 | | - └── test // Jest tests |
62 | | - └── feature1 |
63 | | - ├── actions |
64 | | - ├── components |
65 | | - └── reducers |
66 | | - ``` |
67 | | -
|
68 | | -## Prerequisites |
69 | | -
|
70 | | - * Watch the [video](https://facebook.github.io/flux/) about flux and react, then switch to the evolved [redux](http://redux.js.org/index.html) and watch the [videos](https://egghead.io/series/getting-started-with-redux) as well. |
71 | | - * Learn about the new [es6 features](https://github.com/lukehoban/es6features#readme) and take a deep look at [arrow functions](http://exploringjs.com/es6/ch_arrow-functions.html), [destructuring](https://gist.github.com/mikaelbr/9900818), [defaults/spread](https://medium.com/ecmascript-2015/default-rest-spread-f3ab0d2e0a5e#.xn5wo78hb) and [modules](http://exploringjs.com/es6/ch_modules.html). |
72 | | - * [Flow Getting-Started](https://flow.org/en/docs/getting-started/) and its [usage](https://flow.org/en/docs/frameworks/) with React and Redux |
73 | | - * The [Fela Workshop](https://github.com/tajo/fela-workshop) projects helps you to get familiar with Fela |
74 | | - * Install [nodejs](https://nodejs.org/en/download/package-manager/) including [yarn](https://yarnpkg.com/lang/en/docs/install/). |
75 | | -
|
76 | | -## Installation |
77 | | -
|
78 | | -``` |
79 | | -git clonehttps://github.com/Indoqa/indoqa-react-redux.git |
80 | | -cd indoqa-react-redux |
81 | | -yarn install |
82 | | -``` |
83 | | -
|
84 | | -## Usage |
85 | | -
|
86 | | - * ```yarn start``` Run the app inside the dev node server including hot reloading |
87 | | - * ```yarn test``` Run the tests |
88 | | - * ```yarn package``` Create a minified distribution |
89 | | -
|
90 | | -## Todos |
91 | | -
|
92 | | - * upgrade rxjs to v6 |
93 | | - * upgrade to redux v4 (rxjs-observable is not compatible with it yet) |
94 | | - * code-splitting by routes (https://reactjs.org/docs/code-splitting.html), (https://tylermcginnis.com/react-router-code-splitting/), (https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md) |
95 | | - * add tests (https://reactjs.org/docs/test-utils.html) |
96 | | - * add e2e tests (https://codeburst.io/composable-end-to-end-tests-for-react-apps-2ec82170af62) |
97 | | - * document debugging with Chrome and Firefox tools (maybe improve indoqa-webpack) |
98 | | - * lighthouse check |
99 | | - * Typescript? |
| 1 | +This repository is depcreated. It has been integrated into[@indoqa/react-starter](https://github.com/Indoqa/indoqa-react/tree/master/packages/react-starter) |