Note: This is a portion of a project README and contains links to files within that project that are not applicable to this gist but are included anyway to show how this is used.
Babel is a JavaScript compiler that converts new syntax such as that provided by ES2015 (and beyond) into JavaScript that's compatible on browsers that don't support the latest standards. The Babel configuration for this application is located at .babelrc.
ESLint is a linter used to enforce code style consistency within the project. The ESLint configuration is located at .eslintrc and currently enforces the check during the Webpack build process. ESLint is also available for most major text editors to provide immediate feedback, though the immediate feedback is overwhelming for some.
Webpack is a module bundler that allows code separated into logical modules to be combined to work within a browser environment. This includes the JavaScript modules as well as CSS and images. The Webpack configuration is at webpack.config.js.
React is the foundational presentation layer for the web and native applications. Its functional and composable structure also shapes the way data flows through the application. The starting point for exploring the React application is src/index.js.
React Router is a client-side routing library that provides a way for changes to the URL to change the state of the application and vice versa. The route configuration is at src/routes.js.
fetch is a new web standard for handling network requests, with a goal similar to that of jQuery's ajax function but with a cleaner interface. To support browsers that don't yet include fetch we use GitHub's fetch polyfill, whatwg-fetch.
Redux is a "predictable state container for JavaScript apps". It supports a one-way flow of data through the application, making it easier to reason about and debug. The redux reducers are at src/reducers and the action creators are at src/actions.
redux-saga is a testable, composable way of handling side-effects within Redux applications. This post on StackOverflow provides a specific example of how redux-saga is different from other approaches to managing side-effects. The sagas for the application are at src/sagas.
react-router-redux keeps the application state and router state in sync. It also facilitates triggering changes to the route via redux.
CSS Modules provide a mechanism for isolating CSS among components while supporting composition of styles. Styles are colocated in the folders of the components to which they apply. For example, a component named Input.js may have a css file named Input.css in the same directory.