React base code

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

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

• clone: the repository via git clone [email protected]:iamvijaydev/react-base-code.git (You will have to change the remote)
• zip: v1.3.2.zip
• tar.gz: v1.3.2.tar.gz

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