React + TypeScript + Webpack Project Template

A React project template configured for TypeScript development and bundled with Webpack.

React | TypeScript | Webpack

⚡️ Quick Start

Ensure Node.js is installed. Version 10.13.0 (LTS) or higher is required.

Recommended: Use a Node version manager like nvm.

Dependency installation is managed via npm. Once cloned, you can install dependencies from the project root:

npm install

Once dependencies are installed, you can run the React local development server on port 8080:

npm start

To test components, you can run all Jest suites:

npm test

And boom! You’re ready to create a new React application with TypeScript! 🎉

🙋🏽 Why?

While Create React App is a great way to jump start a simple project, it unfortunately abstracts away most of the configuration. This makes it difficult to understand React project configuration for quick customization or required packages for dependency management.

🧱 How?

This React template was created from scratch using the bare minimum package dependencies needed to run a React + TypeScript project that is bundled with Webpack and tested with Jest.

Review the commit history to see which files were created/edited for each step of the configuration process.

1. Initialize Project
2. Setup TypeScript
3. Setup React
4. Setup Jest
5. Setup Webpack

⚛️ What?

This project template only uses the dependencies and configurations needed to:

• Create a React Web Application
• Develop React Components using TypeScript (using .tsx files)
• Test React Components using Jest
• Bundle a React Web Application for Production
• Serve a React Web Application locally with automatic reloads on save

The final state is a React app equivalent to the starting point of Create React App.

🛠 Tooling

• React: An open source JavaScript library for building UIs
  • react: Core React library
  • @types/react: Type definitions for React
  • react-dom: Renders React to DOM
  • @types/react-dom: Type definitions for ReactDOM
• TypeScript: A strongly typed language built on top of JavaScript.
  • typescript: Core TypeScript programming language
  • ts-node: TypeScript execution engine for Node.js
  • @types/node: Type definitions for Node.js
• Jest: A JavaScript testing framework
  • jest: Core Jest library
  • @types/jest: TypeScript definitions for jest
  • ts-jest: A Jest transformer for TypeScript
  • jest-environment-jsdom: Simulates a DOM environment during jest tests (See: Jest DOM Manipulation Guide)
  • @testing-library/jest-dom: Jest matchers (e.g. toHaveClass, toBeChecked) to test the state of the DOM
  • @testing-library/react: React DOM testing utilities (e.g. .queryByText, .getByRole)
• webpack: An extensible static module bundler for JavaScript applications.
  • webpack: Core webpack bundler
  • webpack-cli: CLI tooling for webpack (required for npm scripts that call webpack)
  • webpack-dev-server: Development server with live reloading
  • Loaders
    • ts-loader: Loads TypeScript files when bundling
    • css-loader: Interprets and resolves @import and url() in CSS files when bundling
    • style-loader: Injects CSS into the DOM when bundling
  • Plugins
    • html-webpack-plugin: Generate HTML files when bundling
    • copy-webpack-plugin: Copies files to output directory when bundling
    • webpack-merge: Merges webpack configurations (used for copying common configurations for multiple environments)

📜 Development Scripts

Initial development scripts are available to local development and testing. You can find these in the scripts attribute in package.json.

🪪 License

This project template is MIT licensed.

GitHub

View Github