DEV Community

RSM Academy BD
RSM Academy BD

Posted on

2

Install React Router Dom With Tailwind CSS

Image description

Promo:

IPromo Video

Install Tailwind CSS with Create React App

1. Create your project

  • Start by creating a new React project with Create React App v5.0+ if you don't have one already set up.

Open Terminal



npx create-react-app my-project
cd my-project


Enter fullscreen mode Exit fullscreen mode

2. Install Tailwind CSS

  • Install tailwindcss via npm, and then run the init command to generate your tailwind.config.js file.


npm install -D tailwindcss
npx tailwindcss init


Enter fullscreen mode Exit fullscreen mode

3. Configure your template paths

  • Add the paths to all of your template files in your tailwind.config.js file.


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};


Enter fullscreen mode Exit fullscreen mode

4. Add the Tailwind directives to your CSS

  • Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.


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


Enter fullscreen mode Exit fullscreen mode

5. Start your build process

  • Run your build process with npm run start.


npm run start


Enter fullscreen mode Exit fullscreen mode

6. Start using Tailwind in your project

  • Start using Tailwind’s utility classes to style your content.


export default function App() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}


Enter fullscreen mode Exit fullscreen mode

7. Add React Router

  • To add React Router in your application, run this in the terminal from the root directory of the application:


npm i -D react-router-dom@latest


Enter fullscreen mode Exit fullscreen mode

8. Folder Structure

-To create an application with multiple page routes, let's first start with the file structure.

-Within the src folder, we'll create a folder named pages with several files:

src\pages:

  • NavBAr.jsx
  • Home.jsx
  • Blogs.jsx
  • Contact.jsx
  • NoPage.jsx etc [Your components/page name] Each file will contain a very basic React component.

9. Basic Usage

  • Now we will use our BrowserRouter in our index.js file.


import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


Enter fullscreen mode Exit fullscreen mode

We wrap our content first with .



import { BrowserRouter } from "react-router-dom";
<BrowserRouter>
<App />
</BrowserRouter>


Enter fullscreen mode Exit fullscreen mode

10. Now we will use our Router in our app.js file.



import { Route, Routes } from "react-router-dom";
import GovtJob from "./pages/GovtJob";

import PrivetJob from "./pages/PrivetJob";

import TeacherJob from "./pages/TeacherJob";
import ItJob from "./pages/ItJob";
import Home from "./components/Home";
import NavBar from "./components/NavBar";
import Contact from "./components/Contact";
import Blogs from "./components/Blogs";
import About from "./components/About";

function App() {
  return (
    <div className="max-w-screen-lg mx-auto">
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/govtJob" element={<GovtJob />} />
        <Route path="/privetJob" element={<PrivetJob />} />
        <Route path="/teacherJob" element={<TeacherJob />} />
        <Route path="/itJob" element={<ItJob />} />
        {/* ============================================= */}
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="blogs" element={<Blogs />} />
      </Routes>
    </div>
  );
}

export default App;


Enter fullscreen mode Exit fullscreen mode

Example Explained

  • We define our . An application can have multiple . Our basic example only uses one.

  • s can be nested. The first has a path of / and renders the Layout component.

  • The nested s inherit and add to the parent route. So the blogs path is combined with the parent and becomes /blogs.

  • The Home component route does not have a path but has an index attribute. That specifies this route as the default route for the parent route, which is /.

  • Setting the path to * will act as a catch-all for any undefined URLs. This is great for a 404 error page.

Pages / Components

  • The NavBar component has and elements.

  • The renders the current route selected.

  • is used to set the URL and keep track of browsing history.

  • Anytime we link to an internal path, we will use instead of .

  • The "NavBar route" is a shared component that inserts common content on all pages, such as a navigation menu.



import React from "react";
import { Outlet, Link } from "react-router-dom";
const NavBar = () => {
  return (
    <div>
      <ul className="flex justify-center items-center gap-10 text-2xl pb-10">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>

        <li>
          <Link to="/contact">Contact</Link>
        </li>
        <li>
          <Link to="/blogs">Blogs</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
};

export default NavBar;


Enter fullscreen mode Exit fullscreen mode

Make other page/components

Nested Routher

  • Home Page


import React from "react";
import { Link } from "react-router-dom";
const Home = () => {
  return (
    <div>
      <h1 className="text-red-500 underline text-3xl text-center">
        Home Page{" "}
      </h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam et
        voluptate rerum eaque adipisci soluta placeat ad temporibus, laborum
        recusandae quas! Possimus eaque mollitia enim iste neque placeat omnis
        veritatis.
      </p>

      <ul className="flex justify-center items-center gap-10 text-2xl pb-10 text-green-500">
        <li>
          <Link to="/govtJob">Govt Job</Link>
        </li>
        <li>
          <Link to="/privetJob">Privet Job</Link>
        </li>
        <li>
          <Link to="/teacherjob">Teacher Job</Link>
        </li>
        <li>
          <Link to="/itJob">IT Job</Link>
        </li>
      </ul>


Enter fullscreen mode Exit fullscreen mode

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay