/FrontendStarterKit

A personal and opinionated, production-ready, scalable and customizable web frontend starter kit based on React.

Primary LanguageTypeScriptMIT LicenseMIT

Personal React Frontend Starter Kit

A personal and opinionated, production-ready, scalable and customizable web frontend starter kit based on React.

Features

  1. Opinionated One-Stop Solution

React concentrates only on building views, therefore is not adequate for real-world projects on its own in many ways. This kit preselects well-rated and suitable React packages and is preconfigured so that you can start to write your code after learning the basics without spending days and nights on configuration.

  1. Production Ready

Besides excellent debug experiences, it packs tools and features to simplify production process like one-click to GitHub Pages. See more in the doc

  1. Scalable, Engineered

With TypeScript and react.di, writing loosely coupled, well-structured and scalable React application without losing agility is within reach. A simple opinionated style reference is available at the ends of docs to keep naming and coding style consistent throughout the application.

  1. Open, Customizable and Keep on the Trend

It's built from the ground up with webpack. No breaking boilerplate-specific commands or tools are introduced (like the ones in create-react-app), which means external packages can be easily integrated. It always follows the trend and utilizes the most productive resources from the community.

Run Demo

  1. npm install install the dependencies
  2. npm run start the application on http://localhost:3000
  3. Explore the demo app

Detail

Basics

Code Splitting

Routing

UI

Internationalization

DIP, IoC and DI

User Management with JWT

Interaction with API

Unit tests

Production

CLI Commands

Demo Explained

Packed Tools

Basics

  • React v16
  • MobX 5
    • Elegant state management
  • React-Router v4
    • Routing
  • TypeScript
    • Better development experience and must-have for large projects
  • react.di
    • Dependency Injection
  • Webpack v4
    • bundling and preprocessing (like compiling and optimization)

UI

Test

Internalization

  • Custom i18n implementation v2
    • Strongly typed, dynamic replacement, async loading

Production Utilities and Features

See more in here

  • Clean dist before building
  • One-click submit to GitHub Pages
  • One-click local express server deployment

Miscellaneous

License

MIT