react-webpack-startkit

A quick starter for react+webpack, which configs basic packages and fundamental settings with some basic usages. Hope this starter kit that briefly describe what the modules are, can make everything simpler and more clear for forgetful me.

Features

• React
• Redux
• Webpack
• Eslint (for maintaining coding quality)
• Jest (for testing)

Environment setup

$ git clone https://github.com/xu3u4/react-webpack-starterkit.git
$ cd react-webpack-starterkit
$ npm install

Modules

React, Redux

react One of millions Javascript library. 😉 😝 which features component reusability.

react-dom This package serves as the entry point of the DOM-related rendering paths. Usually uses with react together.

prop-types Runtime type checking for React props and similar objects. It was a default in previous react package, but should be installed manually after React v15.5.0.

react-hot-loader Making modification to be changed realtime when development.

react-redux Official React bindings for Redux.

redux Introduce the ideal from Flux, redux uses a single store to manage states.

redux-thunk Thunk middleware for Redux. Here is everything:

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

redux-devtools DevTools for Redux with hot reloading, action replay, and customizable UI

Babel

babel-core Babel compiler core

babel-eslint babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint.

babel-loader This package allows transpiling JavaScript files using Babel and webpack.

babel-preset-react Which includes:

• preset-flow
• syntax-jsx
• transform-react-jsx
• transform-react-display-name

ESLint

ESLint ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.

eslint-config-airbnb Of course some rules can be modified by ourselves, but we can reference airbnb's config as a more reliable standard.

eslint-plugin-import This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.

eslint-plugin-react React specific linting rules for ESLint

eslint-plugin-jsx-a11y Static AST(runtime-analysis tool) checker for accessibility rules on JSX elements.

Webpack

webpack A bundler for javascript and other needed files. :thumbsup: Code Splitting allows to load parts for the application on demand.

css-loader css loader module for webpack

style-loader style loader module for webpack. It's recommended to combine style-loader with the css-loader.

sass-loader Sass loader for webpack. Compiles Sass to CSS. The sass-loader requires node-sass and webpack as peerDependency.

eslint-loader eslint loader module for webpack. Can be preloaded lint the code before webpack bundled.

eslint-import-resolver-webpack webpack resolution plugin for eslint-plugin-import

html-webpack-plugin A webpack plugin that simplifies creation of HTML files to serve webpack bundles.

node-sass Node-sass is a library that provides binding for Node.js to LibSass, which allows you to natively compile .scss files to css.

Testing tool relateds

jest A very handy testing tool for React, which allows you to do snapshot testing of react dom tree and instant test feedback.

identity-obj-proxy An identity object using ES6 proxies. Useful for mocking webpack imports. For instance, you can tell Jest to mock this object as imported CSS modules; then all your className lookups on the imported styles object will be returned as-is.

react-test-renderer This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment when you test with jest.

redux-mock-store A mock store for your testing your redux async action creators and middleware.

enzyme A testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

enzyme-to-json Convert Enzyme wrappers to a format compatible with Jest snapshot testing.

jsdom It can mimic the web browser's behaviour to be useful for testing and scraping real-world web applications.

jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG(The Web Hypertext Application Technology Working Group) DOM and HTML Standards, for use with Node.js.

Server side

nodemon Monitor for any changes in your node.js application and automatically restart the server. A perfect tool for development. 👍

body-parser Node.js body parsing middleware for server side API use. Formatting incoming request bodies to a different type(ex. raw, json or text) before your handlers.

cors CORS is a node.js package for providing a Connect/Express middleware that can enable cross domain requests.

express A simple routing framework for Node.

Database

mongodb A NoSQL(Not only SQL) document database service.

mongoose A MongoDB ODM(An ODM maps between an Object Model and a Document Database) for Node.js works in an asynchronous environment.