React + TypeScript + Webpack Starter Kit

React Logo

This is a project template as a baseline when using React with TypeScript and Webpack without needing to run Create React App or configure Babel.

⚡️ 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 done using the npm install command from the project root.

Once dependencies are installed, you can run the React application locally on port 8080:

npm start

To test components, you can run the tests:

npm test

Tada! You’re ready to create a new React application! 🎉

🙋🏽 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 more difficult to understand exactly what you need to change in order to tweak a React project or to know which pre-installed dependencies you will actually need in the long run.

🧱 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 starter kit 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

🪪 License

This React template is MIT licensed.

GitHub

View Github