React TypeScript Starter Kit with Webpack

A minimal starter kit for building React applications with TypeScript and Webpack.

Features

• React 19 with TypeScript support
• Webpack for bundling and development
• Babel for transpilation (ES6+ to ES5)
• ESLint and Prettier for code linting and formatting
• Support for CSS, SCSS, and image files
• Framer Motion for animations
• Hot reloading with webpack --watch

Installation

1. Clone the repository:

   git clone <repository-url>
   cd start-react-app-ts

2. Install dependencies:

   npm install
   # or
   yarn install

Usage

Development

Run the development server with hot reloading:

npm run start:dev

This will watch for changes and rebuild automatically.

Production Build

Build the application for production:

npm run build

The built files will be in the dist/ directory.

Linting

Run ESLint to check code quality:

npm run lint

Project Structure

src/
├── App.tsx       # Main app component
├── index.tsx     # Entry point
└── index.css     # Styles
public/
└── index.html    # HTML template
webpack.config.js # Webpack configuration
tsconfig.json     # TypeScript configuration
package.json      # Dependencies and scripts

Scripts

• npm run start:dev: Start development mode with watching
• npm run build:dev: Build in development mode
• npm run build: Build for production
• npm run lint: Lint the code

Technologies

• React: UI library
• TypeScript: Typed JavaScript
• Webpack: Module bundler
• Babel: JavaScript transpiler
• ESLint: Linting
• Prettier: Code formatting
• Framer Motion: Animation library

Author

tontonCode

License

MIT