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.
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 = {}