Javascript Programming Tutorials, Guides & Best Practices

Feel free to explore the documentation for Vite, Tailwind CSS, and React to continue building on this foundation.

This tutorial should provide a solid foundation for creating a React app with Vite and Tailwind CSS, along with any additional packages needed for typical projects.

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

   function Home() {
       return <h1>Home Page</h1>;
   }

   function About() {
       return <h1>About Page</h1>;
   }

   function App() {
       return (
           <Router>
               <nav>
                   <Link to="/">Home</Link>
                   <Link to="/about">About</Link>
               </nav>
               <Routes>
                   <Route path="/" element={<Home />} />
                   <Route path="/about" element={<About />} />
               </Routes>
           </Router>
       );
   }

   const rootElement = document.getElementById('app');
   if (rootElement) {
       const root = ReactDOM.createRoot(rootElement);
       root.render(<App />);
   }

This setup defines two routes, "Home" and "About," and uses React Router to navigate between them.

This configuration will output the assets to the public/assets directory instead of public/build.

In your Blade templates, you can use the @vite directive to load your assets:

   yarn build

This will generate an optimized production build in the dist directory.