Skip to content

An opinionated react boilerplate created for personal learning

Notifications You must be signed in to change notification settings

adjieguntoro-tokped/react-boilerplate

 
 

Repository files navigation

react-boilerplate

This is a react-boilerplate created for personal learning

It includes some dummy components to help you get started and understand the boilerplate structure.

What it includes

  • Apollo

    A platform for building a data graph

  • Jest

    Task runner for doing tests

  • React-testing-library

    Library to test react component

  • React-emotion

    Easy CSS in JS solution, no more worrying about DOM elements being loaded before CSS

  • Webpack-dev-server + react-hot-loader

    Development server with hot reload capabilities

  • Eslint rules and prettier rules

    Highly opinionated rules (from work experiences and my personal preferences)

  • React router (v5)

    The defacto routing solution for react app

  • Component based code splitting

    Load js for components only when they are needed, reduce main bundle size

  • Some webpack bundle optimizations

What's next

  • Use koa instead of express
  • Enable source map for dev
  • Setup import resolvers
  • Change Enzyme to react-testing-library
  • Remove redux, replace it with a GlobalContext with hooks!
  • Change webpack-serve to webpack-dev-server
  • Upgrade to react-emotion@10
  • SSR
  • Containerize using docker for easy installation

Commands

Commands Purpose
yarn install dependencies
yarn stats run webpack-bundle-analyzer
yarn build:client to build optimized bundle
yarn build:server to build optimized server bundle
yarn dev:server to start development server for the server renderer
yarn dev:client run webpack-dev-server with hot reload enabled for development
yarn test:client run unit test for client side codes only
yarn test:server run unit test for server side codes only
yarn test run unit test for both client and server side codes
yarn test:coverage run unit test for both client and server side codes with coverage report

Stack

  • React
  • Koa
  • Emotion
  • @loadable/component
  • React Router
  • Apollo

About

An opinionated react boilerplate created for personal learning

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 94.3%
  • HTML 5.7%