[go: up one dir, main page]
Scribd
Upload
15 views3 pages

Building The Frontend (React + Tailwind)

React js tutorial Building the front end framework using tailwind

Uploaded by

Spammiv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views3 pages

Building The Frontend (React + Tailwind)

React js tutorial Building the front end framework using tailwind

Uploaded by

Spammiv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

02.

Building the Frontend (React + Tailwind)


Page 2: Building the Frontend (React + Tailwind)
🧱 Basic React App Structure
client/
├── src/
│ ├── components/
│ │ └── Navbar.jsx
│ ├── pages/
│ │ └── Home.jsx
│ ├── App.js
│ ├── index.js

🧭 Routing with react-router-dom


Install:

SHELL

npm install react-router-dom

App.js :
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Navbar from './components/Navbar';

function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
);
}

export default App;

🎨 Styling with Tailwind


index.css already includes Tailwind base/utilities.

components/Navbar.jsx :

const Navbar = () => {


return (
<nav className="bg-blue-600 text-white p-4">
<h1 className="text-xl font-bold">MyApp</h1>
</nav>
);
};

export default Navbar;

pages/Home.jsx :
const Home = () => {
return (
<div className="p-6">
<h2 className="text-2xl font-semibold">Welcome to the Home Page</h2>
<p className="mt-2">This is a basic full-stack React app!</p>
</div>
);
};

export default Home;

⚡ Quick Dev Tips


Run React dev server: npm start
Component className structure: bg-color , text-size , p-4 , rounded
Extract reusable UI to /components

Say "Go to the next page in a new canvas" to build the backend (API + MongoDB).

You might also like