This is a template to quickly create a browser project with Vite + React + TypeScript.
This template is based on the official Vite template for react-ts, the motivation is to avoid creating common configurations for the project.
Right now, the template includes:
- Vite: The next generation front-end tooling.
- React: A JavaScript library for building user interfaces.
- TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
- ESLint: The linting utility for JavaScript and JSX.
- Prettier: An opinionated code formatter.
- i18Next: Internationalization-framework written in and for JavaScript.
- React i18Next: Hooks and components for i18Next built for ReactJs.
clone and do node install and npm run dev to start the development server.
No special configuration to vite performed. See Vite documentation for more information.
No special configuration to react performed. See React documentation for more information.
No special configuration to tsconfig.json performed. See TypeScript documentation for more information.
See .eslintrc.yml to take a look to the current configuration, also see the ESLint documentation for customize according to your style.
Prettier takes precedence over ESLint, so if you want to change the rules of Prettier, see the .prettierrc.yml file.
Run npm run lint to check the code style.
The eslint verified extension for VSCode is recommended.
See .prettierrc.yml to take a look to the current configuration, also see the Prettier documentation for customize according to your style.
Run npm run format to format the code.
The prettier verified extension for VSCode is recommended.
Warning eslint-config-prettier is used to avoid conflicts between eslint and prettier. With this approach ESLint won't report style issues that are taken care of by Prettier.
The folder src/translations contains the translations files, the default language is Spanish, all the configuration to i18Next and React i18Next is in the file src/translations/i18next.tsx.
Each file in src/translations except src/translations/i18next.tsx represents a component text, see src/translations/AppText.tsx to see the translations for the App component located in src/components/App.tsx.
- Add React Router
Contributions are welcome, feel free to open an issue or a pull request.