Universal React App Starter featuring Redux Saga. Heavily modified version of React Redux Universal Hot Example combined with Redux Saga real-world example.
$ git clone https://github.com/nattatorn-dev/currency-exchange
$ cd currency-exchange && sudo yarn install
$ sudo yarn run dev (run in development mode)
Live Demo: currency-exchange-rate.herokuapp.com
- Universal rendering, with Client and Server Side Data Fetching
- React - latest version
^15.2.0 - Redux's futuristic Flux implementation
- Redux Saga to handle all of your Side Effects logic in a central place
- React Router
- Express
- Babel for ES6 and ES7 magic
- Webpack for bundling
- Webpack Dev Middleware
- Webpack Hot Middleware
- Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov's talk.
- ESLint to maintain a consistent code style
- redux-form to manage form state in Redux
- PostCSS, style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and less, b.com/nfl/react-helmet) to manage title and meta tag information on both server and client
- webpack-isomorphic-tools to allow require() work for statics both on client and server
- Jest to allow writing unit tests for the project.
- Refer to
package.jsonfor more details
The redux-saga provides a mechanism for server-side data fetching from the actual backend API servers/services, when it reaches client-side (React) there is no need to do additional network call. You have to define the Sagas that a container need (refers to containers/UserPage.js > UserPage.preload for example) for server-side to fetch. PS: You have the flexibility to implement additional logic (e.g. handle authentication) when fetching data at server-side rendering stage, as it differs from client-side.
The project uses Jest to run your unit tests and the Test Utilities from Facebook api.
An example is available at components > User.
To run the tests in the project, just simply run yarn run test.
Any contribution is welcome.
Cheers, nattatorn-dev @maybenexttime