Typescript React.js Starter Kit

Non-opinionated TypeScript starter for React

Features

• ⚛️ React 18
• ⛑ TypeScript
• 📏 ESLint — To find and fix problems in your code
• 💖 Prettier — Code Formatter for consistent style
• 🐶 Husky — For running scripts before committing
• 🚓 Commitlint — To make sure your commit messages follow the convention
• 🚫 lint-staged — Run ESLint and Prettier against staged Git files

Quick Start

The best way to start with this template

# pnpm
pnpm create next-app -e https://github.com/renatoxm/typescript-reactjs-starter

Development

To start the project locally, run:

pnpm dev

Open http://localhost:5173 with your browser to see the result.

Documentation

Requirements

• Node.js >= 12.22.0
• pnpm 7

Directory Structure

• .github — GitHub configuration including the CI workflow.
  
• .husky — Husky configuration and hooks.
  
• public — Static assets such as robots.txt, images, and favicon.
  
• src — Application source code, including pages, components, styles.

Scripts

• pnpm dev — Starts the application in development mode at http://localhost:5173.
• pnpm build — Creates an optimized production build of your application.
• pnpm start — Starts the application in production mode.
• pnpm type-check — Validate code using TypeScript compiler.
• pnpm lint — Runs ESLint for all files in the src directory.
• pnpm format — Runs Prettier for all files in the src directory.

Path Mapping

TypeScript are pre-configured with custom path mappings. To import components or files, use the @ prefix.

import { Button } from '@/components/Button';

// To import images or other files from the public folder
import avatar from '@/public/avatar.png';

License

This project is licensed under the MIT License - see the LICENSE.md file for more information.