Skip to content

Latest commit

 

History

History
188 lines (116 loc) · 5.4 KB

README.md

File metadata and controls

188 lines (116 loc) · 5.4 KB

Complete React Starter Template

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

Docs

Vite

React

React Router

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.

React i18n

React Query

Performant and powerful data synchronization for React

Axios

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).

usehooks-ts

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

TailwindCSS

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.

Flowbite

Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS.

Flowbite React

Brings Flowbite to React with special React Components.

Iconify

Over 100,000 open source vector icons as a React Component.

vite-plugin-html-env

Tips

VS Code extensions

Tailwind CSS IntelliSense

React

Organize imports

Shift + Alt + O

Manual installation

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

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.cjs

/** @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')],
};

Helpers

Layout & Design

CSS Layout Generator

CSS Gradient

CSS Background Patterns

Responsively App

SEO

Allgemein

Structured routes Create and deploy sitemap

HTML Meta tags

It's a simple guide to HTML

Structured data

Generate structured data Schema markup generator Markup helper Benefits

Learn

This One Line Of Code Catches React Bugs For You

Most Beginner React Developers Do This Wrong

React Hooks Simplified Free Course

Channels to follow

Web Dev Simplified (React)

Kevin Powell (CSS)

[TODO]