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.
- 📌 Requirements
▶️ Get Started- ⚙️ Features & Technologies
- 🛠️ Development & Usage
- 🤝 Contributing
- 📄 License
To get started with this template, you need to have Node.js installed on your system.
- Node.js: https://nodejs.org/en/
Follow these steps to set up and run the project locally:
-
Clone this repository:
git clone https://github.com/Aleydon/React-Vite.git
-
Navigate into the project directory:
cd React-Vite
-
Install NPM packages:
npm install # or yarn install
-
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
.
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.
- 🔗 Jest
- 🔗 Testing Library
- 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.
- 🔗 Husky
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');
});
});
To run Storybook and explore the component documentation:
npm run storybook # or yarn storybook
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'
}
};
Contributions are welcome! If you have suggestions for improvements or new features, please feel free to open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.