React + TypeScript + Webpack Project Template

React + TypeScript + Webpack

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

📜 Development Scripts

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

Command Description
npm install Install all dependent application packages
npm start Start a local development web server at http://localhost:8080 using webpack-dev-server
npm test Run the full test suite using Jest
npm run build Bundle application for Production using webpack
npm run test:watch Watch files for changes and rerun tests related to changed files
npm run test:coverage Generate and display a test coverage report

🪪 License

This project template is MIT licensed.

GitHub

View Github