This template provides a basic setup for working with React (Vite). Here we use tailwind for styles, Axios and tanstack/react-query for data fetching and we use rocketseat/eslint-config for eslint (with prettier plugin) to promote better code standardization.

Additionally, we provide some aliases to make it easier to import folders.

• @vite
• @tailwind
• @Axios
• @React Query
• @Storybook
• @eslint
• @prettier
• @rocketseat-eslint-config

git clone https://github.com/Bkuste2/react-tailwind-template.git cd react-tailwind-template yarn install yarn dev

These aliases are pre-configured in the project to help you with development

• @
• @pages
• @components
• @services
• @contexts
• @helpers
• @types

If you want to create any alias, just follow the example below:

• vite.config.ts

export default defineConfig({ /* rest of your defineConfig function */ resolve: { alias: { '@': resolve(__dirname, './src'), // example 'your_alias': resolve(__dirname, 'folder_path'), }, }, })

• tsconfig.json

{ "compilerOptions": { "paths": { "@/*": ["./src/*"], // example "your_alias/*": ["folder_path/*"] } } }

Create a simple functional component initial setup

export interface FilenameProps {} export const Filename: React.FC<FilenameProps> = () => { return ( <div className=""> <h1>Filename</h1> </div> ) }

Create all useState structure

const [$1, set${2:$1}] = useState<$3>($4)

Snippet to initial setup StorybookFile

import { Meta, StoryObj } from '@storybook/react' export default { title: 'Component/ComponentName', component: ComponentName, } as Meta export const Default: StoryObj = {}

Snippet create an storybook variant

export const ${1:Default}: StoryObj = {}