Skip to content

๐Ÿš€ React starter kit for a modern single page (SPA) application (dependencies updated at 28 July 2017). Zero configuration. Ready to go. Just paste your code!

License

Notifications You must be signed in to change notification settings

vadimcoder/react-starter-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

90 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

See in action

Includes only the latest and greatest web technologies (dependencies updated at 28 July 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.

Features

  1. JS: using plain ES2015/16/17. Minimizing use of experimental Stage-X javascript features. Only stage-3/4 features are supported, because they're relatively stable
  2. Redux: using redux-actions methodology
  3. CSS: using CSS Modules methodology
  4. Linting: using airbnb config
  5. Using tests (by jest, example)
  6. Using git pre-push hook to force run tests and linting before push
  7. Webpack:
  • vendor code splitting (2 separate chunks: one for libraries and one for application. Let your browser cache libraries)
  • absolute imports for application code (e.g. import 'components/button' instead of import '../../../components/button')
  1. Using visual analyzing tools for inspecting the bundle to always control its content and size

Suitable for

  1. Education
  2. Small pet projects/prototypes
  3. Production

๐ŸŽ Whatโ€™s Inside?

If you don't need some library then just don't use it. Its source code will NOT be included in the final bundle

Name Library Type Original Description Example Config Notes
react View layer A javascript library for building user interfaces
react-router Routing Declarative routing for React
redux Data management Predictable state container for JavaScript apps
reselect Data management Selector library for Redux
react-redux Data management Official React bindings for Redux
redux-actions Data management Flux Standard Action utilities for Redux
redux-thunk Data management Thunk middleware for Redux
redux-saga Data management An alternative side effect model for Redux apps An alternative to redux-thunk. You need to import "regenerator-runtime/runtime"; for using generators/yield
redux-logger Utils Logger for Redux
jest Test framework Painless JavaScript Testing
webpack 3 Build/Bundler A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) webpack.config.js Loaders: babel-loader, eslint-loader)
webpack-bundle-analyzer Build/Bundler Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
babel Transpiler ES2015/2016/2017 support .babelrc Plugins: transform-object-rest-spread (spreads are currently at STAGE 3)
eslint Linter The pluggable linting utility for JavaScript and JSX .eslintrc.js
isomorphic-fetch Polyfill Isomorphic WHATWG Fetch API, for Node & Browserify whatwg-fetch from GitHub on client, node-fetch on server
yarn Package management Fast, reliable, and secure dependency management

๐Ÿ‘จ๐Ÿผโ€๐Ÿ’ป Usage

  1. install dependencies with:
    yarn

  2. run in development mode (watch changes in the files and refresh your browser automatically):
    yarn start (then go http://localhost:8080/ and you should see this)

  3. would like to publish the project as a website? Then make a distribution build by generating static files:
    yarn dist (then go to dist folder)

  4. would like to see analytics for the bundle?:
    yarn dist:analyze

  5. run tests:
    yarn test

  6. run linting:
    yarn lint

If you have any questions or comments please donโ€™t hesitate to leave a feedback in issues or contact me on Facebook. Thanks!

https://vinogradov.github.io/react-starter-kit:

Webpack bundle analyzer:

Examples

  1. examples/react - trivial hello world using React
  2. examples/redux/one-file - the simplest redux example, all in one file (for fast prototyping)
  3. examples/redux/separate-files - counter example with redux and redux-saga