You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+26-2Lines changed: 26 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,17 @@ A minimal boilerplate to reactive programming using `react.js`, `redux`, `redux-
7
7
- npm install
8
8
- npm install gulp -g
9
9
10
-
## Packages used
10
+
## Overview
11
+
12
+
File structure is "Feature/Domain-style" - separate folders per feature.
13
+
14
+
This setup is fairly straight forward for those who are aware of [RxJs](https://rxjs-dev.firebaseapp.com) and [React - Redux](https://redux.js.org/basics/usagewithreact). Also for those who dont know [RxJs](https://rxjs-dev.firebaseapp.com) but familiar with [React - Redux](https://redux.js.org/basics/usagewithreact), going through Rxjs and [redux-observable](https://redux-observable.js.org) documentations (for brief understanding) should make you comfortable. But for those who are not aware of either of those, then I think its better if you can grasp some knowledge of [React - Redux](https://redux.js.org/basics/usagewithreact) and [RxJs](https://rxjs-dev.firebaseapp.com) first.
15
+
16
+
### Given EXAMPLE
17
+
18
+
This boilerplate is bundled with a simple example of - "button click and display change" and not "Hello World!" example, as would be fairly simple for this kind of setup. There was a need of putting an examples which uses the underlying concepts of reactive programming using [**React - Redux**](https://redux.js.org/basics/usagewithreact) and [**redux-observable**](https://redux-observable.js.org) THE - "Action, Epic, Selecor, Reducer".
19
+
20
+
## Packages overview
11
21
12
22
- React.js
13
23
- Redux (react-redux)
@@ -18,9 +28,23 @@ A minimal boilerplate to reactive programming using `react.js`, `redux`, `redux-
18
28
-**Webpack**: For rest of the tasks ;)
19
29
- Jest (testing)
20
30
31
+
21
32
## Style
22
33
23
-
Considering this boilerplate to be used for single page appliation, `./app/src/styles/index.min.css` file deligates all the styles (in form of `[name].less` in each features) added in the project, in minified form. This file is generated (and updated) each time application is started.
34
+
We are using [Less](http://lesscss.org) preprocessor by default, as it is most widely used and pretty simple. We're using [Gulp](https://gulpjs.com) to convert all the `*.less` files into `*.css` as Gulp is better when it comes to handling static assets, also because it is very easy to understand and use.
35
+
Considering this boilerplate to be used for single page appliation, `./app/src/styles/index.min.css` file deligates all the styles (in form of `[name].less` in each features) useed in the project. This file is generated (and updated) each time application is started.
24
36
25
37
> To be noted: `gulp watch` is active in development when the application is started using `npm start`. So any changes to any [*].less file will be watched when the server is on.
2. Change file type of `./app/src/index.less` to `./app/src/index.scss`
43
+
3. Open `./gulpfile.js` and make the necessary changes according to the [documentation](https://www.npmjs.com/package/gulp-sass)
44
+
4. And don't forget to check the `"scripts"` part of the `.\package.json` file.
45
+
46
+
## Test
47
+
48
+
We're using [Jest](https://jestjs.io/docs/en/tutorial-async) by facebook, as it's popular among React.js community, also because it is easy, well documented and does the job!
0 commit comments