React Toolchain Demo

This repository is a showcase of a React toolchain that can be used to create a React SPA from scratch. Ejecting from Create React App ends up being more work than starting from scratch, so this project aims to provide a toolchain that is as easy to use as CRA, but with the flexibility to add and remove tools as needed.

Table of Contents

• Introduction
• Built With
• Features
• Getting Started
  • Prerequisites
  • Installing
• Running the project
• Building for production
• Testing
• Code quality
• Contributing
• Authors
• License
• Acknowledgments
• Exclusions

Introduction

In a modern React project, there are three main tools that are required to build a project:

1. A package manager - to install dependencies from npm
2. A bundler - to bundle the code into a single file for the browser
3. A compiler - to compile the code into a format that the browser can understand

Note: Technically speaking it is a transpiler in the case of TypeScript and TSX/JSX, but I'll use the term compiler for simplicity.

These are the basics of what is required to build a React project. However, there are many other tools that are required to build a project that is ready for production.

Built With

These tools allowed for a great developer experience, and a production-ready project.

• A package manager - Yarn
• A compiler - Babel
• A code bundler - Webpack
• A development server - webpack-dev-server
• A test runner Jest
• A linter and quality checker - ESLint
• A code formatter - Prettier
• A CSS preprocessor - PostCSS
• A CSS framework - TailwindCSS
• Type checking - TypeScript
• Environment variables - dotenv
• Pre-commit hooks - Husky + lint-staged
• Dependency updates - Renovate
• A CI/CD pipeline - GitHub Actions

Features

Some other features that are included in this project thanks to above tools are:

• Hot module reloading
• Code splitting & tree shaking
• Path aliases for imports (@/utils)
• Source maps and bundle analyzer
• Minification and optimization of assets (JS, CSS, images, fonts)
• Public folder that is copied to the build folder, unprocessed by webpack.
• Template parameters for index.html (<%= env.TEST_VARIABLE %>)
• Inlining of small assets (images, fonts) under 10kb
• Image conversion to webp (add ?as=webp to the end of the image path processed by webpack)

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js
• Yarn
• Git

Installing

Clone the repository and install the dependencies:

git clone
cd react-toolchain-demo
yarn install

Running the project

yarn dev

This will start the development server on port 3000.

Building for production

yarn build

Testing

To run the tests, run the following command:

yarn test

To learn more about testing, see the Testing section.

You can also run the tests in watch mode:

yarn test:watch

For a coverage report, run the following command:

yarn test:coverage

Code quality

Linting

To lint the code, run the following command to automatically fix most linting errors:

yarn lint

Formatting

To format the code with prettier:

yarn format

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

• Shane Parker - shnparker

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

• Create React App

Exclusions

The following features are not included in this demo project since they are not required for a basic React project:

• Progressive Web App (PWA) Support
• Offline Support with a Service Worker
• CSS Modules
• Sass / Less / Stylus
• CSS-in-JS
• Web Workers
• Server-side rendering
• i18n