React application boilerplate

An awesome boilerplate react application to jumpstart your projects!
Explore the docs »

View Demo · Report Bug · Request Feature

This is a boilerplate react application that setup with full mordern like webpack, babel, eslint, prettier, git hooks and typescript. Below is the few things that I expected this repo to helping me out and hopefully for you guys.

Here's why :

• Your time should be focused on creating something amazing. A project template that saving my time and yours.
• I don't want to doing the same thing again and again each time I start a new project.
• Able to quickly setup a frontend project that giving me and my team the best EXPERIENCE when coding.

Of course, no one template will serve all projects since your needs may be different. So I'll be adding more in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue. Thanks to all the people have contributed to expanding this template!

(back to top)

The main dependencies and tools that being used in this repo

• React.js
• Webpack
• Babel
• Typescript
• Eslint
• Prettier
• Tailwindcss
• Husky

(back to top)

The final goal of this repo is to setup a react application from scratch that supported 2 mode which are development mode and production mode. The common idea for 2 modes is:

1. Using typescript.
2. Using webpack as a module bundler all neccessary files such as .ts, .tsx, .js, .jsx and assets files like css, image, json, ... Support hot reload, seperate configuration with each mode, clean up output folder after each build times, ...etc.
3. Linting and formating code with eslint and prettier.

The idea here is use babel to compile typescript code and newest Javascript syntax, features to ES5 which is supported by browsers. Babel will not do type checking which make its compile time much faster than normal tsc and that good for developers. Besides that, we only have to manage only one compiler which makes thing easier.

Becase babel cannot do type checking. So we still have to use tsc to compile our Typescript code into Javascript. So, I decide to only use it when it comes to production and before commiting our changes as well. The reason for doing it because I don't want bad code sneaky into my repo and I've to create a new commit to fix that which cause extra work.

1. Make sure you have nodejs installed in your local machine. If you don't have it yet, please install it. You could type node -v in your terminal to check whether nodejs is installed or not.
2. Clone the repo

1. Install neccessary dependencies

yarn install // OR
npm install

(back to top)

You can start the project under development mode by the command yarn dev. Please check out package.json file for more commands.

(back to top)

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Tu Le Thanh - Tu Le Thanh - [email protected]

Project Link: https://github.com/lethanhtupk/react-application-boilerplate

(back to top)