Skip to content

React ViteJs template configured with typescript, eslint, prettier, husky (pre-commit), storybook, jest, testing-library and more...

Notifications You must be signed in to change notification settings

Aleydon/React-Vite

Repository files navigation

🌎 Vite.js Template 🌎

License: MIT Build Status Dependencies Status


logo of React-Vite repository

This repository provides a robust and opinionated React template powered by Vite.js, designed to kickstart your web development projects with a focus on modern tooling, testing, and code quality. It comes pre-configured with essential development tools to ensure a smooth and efficient workflow.

📑 Table of Contents


📌 Requirements

To get started with this template, you need to have Node.js installed on your system.


▶️ Get Started

Follow these steps to set up and run the project locally:

  1. Clone this repository:

    git clone https://github.com/Aleydon/React-Vite.git
  2. Navigate into the project directory:

    cd React-Vite
  3. Install NPM packages:

    npm install # or yarn install
  4. Run the development server:

    npm run dev # or yarn dev

    This will start the development server, and you can view the application in your browser, typically at http://localhost:5173.


⚙️ Features & Technologies

This template is configured with a comprehensive set of tools to enhance your development experience:

  • Jest + Testing Library: For robust automated testing of your React components.
  • Storybook: For isolated component development and documentation, making it easy to showcase and test UI components.
  • ESLint + Prettier: To maintain consistent code style and catch potential errors early.
  • TypeScript: For static typing, improving code quality, readability, and maintainability.
  • Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
  • Husky: For Git hooks, automating tasks like linting commit messages, formatting code, and running tests before commits or pushes.

🛠️ Development & Usage

Running Tests

To execute the automated tests configured with Jest and Testing Library:

npm run test # or npm run test:watch

An example test file (src/App.spec.tsx) is included to demonstrate basic testing practices:

import { render, screen } from '@testing-library/react';

import App from './App';

describe('App Component', () => {
	it('should get the text hello world', () => {
		render(<App />);
		const hello = screen.getByText('Hello World');
		expect(hello).toBeDefined();
	});

	it('should get the text hello world in the component s heading', () => {
		render(<App />);
		const heading = screen.getByRole('heading', {
			name: 'Hello World'
		});
		expect(heading).toBeInTheDocument();
	});

	it('must get the link from the App component', () => {
		render(<App />);
		const link = screen.getByRole('link', { name: 'github.com/Aleydon' });
		expect(link).toBeDefined();
		expect(link).toHaveAttribute('target', '_blank');
		expect(link).toHaveAttribute('aria-label', 'github.com/Aleydon');
	});
});

Storybook Documentation

To run Storybook and explore the component documentation:

npm run storybook # or yarn storybook


storybook running

An example Storybook story (src/components/Text/text.stories.tsx) is provided to illustrate how to document your components:

import type { Meta, StoryObj } from '@storybook/react';

import Text, { type TextProps } from '.';

const text: Meta<typeof Text> = {
	component: Text,
	title: 'Components/Text'
};

export default text;

export const Small: StoryObj<TextProps> = {
	args: {
		size: 'small',
		children: 'Small Text'
	}
};

export const Medium: StoryObj<TextProps> = {
	args: {
		size: 'medium',
		children: 'Medium Text'
	}
};
export const Large: StoryObj<TextProps> = {
	args: {
		size: 'large',
		children: 'Large Text'
	}
};

🤝 Contributing

Contributions are welcome! If you have suggestions for improvements or new features, please feel free to open an issue or submit a pull request.


📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

About

React ViteJs template configured with typescript, eslint, prettier, husky (pre-commit), storybook, jest, testing-library and more...

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published