Starter template based on Vite with a small boilerplate page incl. routing & theming.
Includes:
- React 18
- React Router
- React Query (comming soon)
- Axios
- TailwindCSS
- Flowbite React
- Iconify
React Router enables client side routing. Client side routing allows your app to update the URL from a link click without making another request for another document from the server. There is a good intrudoction on YouTube.
Performant and powerful data synchronization for React
Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase).
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
There is also a Free React Hooks Course
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. A special section ist theming your website.
Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS.
Brings Flowbite to React with special React Components.
Over 100,000 open source vector icons as a React Component.
Shift + Alt + O
yarn create vite my-app --template react-swc-ts
cd my-app
yarn add react-router-dom localforage match-sorter sort-by
yarn add -D tailwindcss postcss autoprefixer
yarn run tailwindcss init -p
yarn add flowbite flowbite-react
yarn add --dev @iconify/react
yarn add usehooks-ts
yarn add vite-plugin-html-env -D
yarn add i18next
yarn add i18next-browser-languagedetector
yarn add i18next-http-backend
yarn add react-i18next@tailwind base;
@tailwind components;
@tailwind utilities;/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
theme: {
colors: {
gray: colors.coolGray,
blue: colors.lightBlue,
red: colors.rose,
pink: colors.fuchsia,
},
extend: {},
},
plugins: [require('flowbite/plugin')],
};Structured routes Create and deploy sitemap
Generate structured data Schema markup generator Markup helper Benefits
This One Line Of Code Catches React Bugs For You
Most Beginner React Developers Do This Wrong
React Hooks Simplified Free Course
- User Code Splitting => https://www.youtube.com/watch?v=JU6sl_yyZqs
- Add https://react-query-v3.tanstack.com/
- Complete ld+json
- Make the Pages more beauty