Skip to content

Latest commit

 

History

History
66 lines (53 loc) · 2.45 KB

README.md

File metadata and controls

66 lines (53 loc) · 2.45 KB
Raw

React base code

An opinionated and scalable base tech stack for a modern React app.

Build Status

Tech Stack

  • react: The main UI library
  • rematch: The main state management framework powered by Redux
  • styled-components: The styling and theming library
  • react-router-dom: The routing library
  • react-loadable: The lazy loading library
  • react-spring: The spring-physics based animation library
  • axios: The XHR library
  • react-intl-universal: The internationalization library
  • jest & enzyme: The testing libraries

Code structure

  • /build: Build related details of Webpack and Jest
  • /config: Whitewashing and language related details and assets
  • /src/components: Shareable components that never connects to redux store
  • /src/pages: Individual route pages
  • /src/services: Wrapped services for the App, e.g: fetch, validation. Available as an API, so the actual implementation can change
  • /src/store: Rematch redux store
  • /src/models: Rematch shared models
  • /dist: Complied code ready to deployed

Get the code

Install packages

yarn install

Create env.js from env.example.js

This file env.js contains any environment-related contents. Update then as you see fit. Add more if required.

Start dev server

yarn start

Build dist

yarn run dist

Unit test

yarn test

Update unit test snapshots

yarn test -u

Intl

All the language translations are added to /config/locale/<locale code>/<fragments>.json. During both dev and prod build, an additional script is run to aggregate all the fragments to a single file at /config/locale/<locale code>.json. Meaning, you can create as many fragments as you like. Make sure to apply any modifications or additions are applied on all locale folders. Since aggregation is a separate script, you need to restart the dev server to apply the new changes.

TODO

TODO.md