React Universal Saga (currency-exchange)

Getting Started

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

Features

• @mjackson/universal-javascript-4761051b7ae9">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.json for more details

Server-side Data Fetching

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.

Unit Tests

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