project-type-i.md

Description

A project with Vite, Tailwind CSS, React JS, React Router and React Icons

---

Create a Vite Project with React and JavaScript

npm create vite@latest

Tailwind CSS

npm i tailwindcss @tailwindcss/vite

Inside App.css

@import "tailwindcss";

React Router

npm i react-router

Inside main.jsx

import { BrowserRouter } from "react-router";

<BrowserRouter>{/* <App /> */}</BrowserRouter>;

Inside RootLayout.jsx

import Header from "./Header";
import { Outlet } from "react-router";
import Footer from "./Footer";

<>
  <Header />
  <Outlet />
  <Footer />
</>;

Inside App.jsx

import { Routes, Route } from "react-router";
import Home from "./pages/Home";
import Pages from "./pages/Pages";
import RootLayout from "./components/layouts/RootLayout";
{/* ... import more pages here ... */}

<Routes>
  <Route path="/" element={<RootLayout />}>
    <Route index element-{<Home />} />
    <Route path="pages" element={<Pages />} />
    {/* ... route more pages here ... */}
  </Route>
</Routes>

React Icons

npm i react-icons

Inside AnyFile.jsx

import { FaBeer } from "react-icons/fa";

<FaBeer />;