Building Modern React Applications with Vite, TypeScript, and Redux

S M Habibul Mursaleen Chowdhury — Tue, 09 Jan 2024 15:33:15 +0000

Introduction

Welcome to the future of React development! Today, we're thrilled to introduce our latest creation: @chowdhury/vite-react-redux-ts-starter. This starter template is designed to streamline your React projects, combining the power of Vite, TypeScript, and Redux for a seamless development experience.

Key Features

Fast and Efficient Build

Powered by Vite, a cutting-edge build tool, our template ensures lightning-fast development with quick reload times and efficient bundling.

Type-Safe React

Enjoy the benefits of TypeScript, a statically typed superset of JavaScript, to enhance code quality and catch errors early in the development process.

State Management with Redux Toolkit

Harness the power of Redux Toolkit for efficient state management, providing a structured and organized way to handle application data.

Modern UI Components

Integrate Shadcn/ui, a library of modern UI components built on RadixUI and TailwindCSS. This ensures a sleek and responsive user interface for your applications.

Code Consistency and Quality

We've integrated ESLint and Prettier with airbnb linting to maintain code consistency. Ensure your codebase is clean and well-formatted for optimal collaboration.

Comprehensive Testing

Utilize Jest and Testing Library for writing and running tests, along with Playwright for end-to-end testing, ensuring the reliability of your application.

Pre-Commit Code Quality Checks

Husky and lint-staged automate pre-commit code quality checks, preventing issues before they make their way into your version control system.

Getting Started

Follow these simple steps to kickstart your project:

Install Node.js: Ensure you have Node.js and npm installed on your system. Download and install them from nodejs.org.
Create a New Project: Use the following commands to create and set up a new project:
```
npx @chowdhury/vite-react-redux-ts-starter my-app
cd my-app
npm install
```
Run the Development Server:
```
npm run dev
```
Your app will be available at http://localhost:5173.

Available Scripts

npm run dev: Start the development server.
npm run build: Build the application for production.
npm run start:dev: Start the application in development mode.
npm run lint: Lint the code using ESLint.
npm run test: Run tests using Jest.
npm run format: Format the code using Prettier.
npm run preview: Preview the production build locally.
npm run precommit: Run linting and formatting checks before committing.

Configuration

tsconfig.json: TypeScript configuration.
.eslintrc.js and .prettierrc.js: ESLint and Prettier configurations.
tailwind.config.js: Tailwind CSS configuration.
browserslist: Browserslist configuration.

Folder Structure

Explore a well-organized folder structure for efficient development:

src: Main source code directory.
- app: Core application files.
- assets: Assets like images.
- components, features, hooks, page, routes, styles, test, types, utils: Organized folders for various aspects of your project.

Expanding ESLint Configuration

For production applications, enhance ESLint configuration:

parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: ['./tsconfig.json', './tsconfig.node.json'],
  tsconfigRootDir: __dirname,
},

License

This starter template is open-source and available under the MIT License. Contributions from the community are welcome!

Credits

Created and maintained by S M Habibul Mursaleen Chowdhury.

Conclusion

With @chowdhury/vite-react-redux-ts-starter, you have the foundation for building modern React applications. Embrace the future of web development and accelerate your project with this powerful template. If you encounter any issues or have suggestions, feel free to contribute on GitHub. Happy coding!

DEV Community: S M Habibul Mursaleen Chowdhury