Every app requires navigation to function. In building a React app for Surf Break Costa Rica, I fumbled my way through learning how to simplistically incorporate React Router DOM and Tailwind CSS to build out a navigation bar component. Here are my learnings so you can do so with ease!
Step 1: Create a Component Skeleton
Add the baseline components you’ll be using in your application. For Surf Break Costa Rica, I started by creating Home, Navigation, and Login components. Once these components are created, populate them with boilerplate and render the component name as an h1 in the return JSX for now.
Tip: “rafce” is a shortcut built into VSCode. Simply type “rafce” inside of your component and press enter to get React functional component boilerplate.
Step 2: Incorporate React Router DOM
Install react-router-dom and in App.js, import BrowserRouter Switch and Route:
- npm i — save react-router-dom
- import { BrowserRouter as Router, Switch, Route } from “react-router-dom”;
I encourage you to read more about React Router here.
Continue to build out your navigation routes. For Surf Break Costa Rica, I have route paths for home, flightinfo, itinerary, photos, and releaseform, as you can see below.
Tip: Make sure you define your initial home screen with route path “ / ” as an exact path. Otherwise, all of your routes will direct to home, since every path starts with “ / ”. This is because React Router will go through all of your routes and return the first match it finds. Using “exact path” disables this partial matching and ensures it only returns the route path that is an exact match to the URL.
Step 3: Build a Reusable Navigation Component
Surf Break Costa Rica will ultimately have two user types, staff and client, but to keep things simple, I will only focus on the client navigation for this guided walkthrough.
“Reusable” is the operative word in this step. I’ll import this component at the top of my return statement in each of my client-facing components. To keep my code DRY (Don’t Repeat Yourself) I may ultimately refactor down the line to include a ternary or if/else statement in my parent component (App.js in this case) return statement rendering different nav bars depending on the user type (client or staff).
How to Style? Now that is the Question!
If you haven’t played around with Tailwind CSS, I’m about to blow your mind. Having dabbled in several different ways of styling at this point in my learning journey (including, Sass, Flexbox, CSS Grid, Styled Components, Reactstrap, and Ant Design), I find this framework to be an amazingly effective way to build responsive, stylish React components.
So What is Tailwind CSS?
The Tailwind CSS framework provides a set of utility classes that you can add to your JSX inline. These classes allow you to consistently style your projects with color choices, spacing, typography, shadows, etc.
I have to admit, I was confused and overwhelmed by the syntax at first, but I encourage you to take it apart piece-by-piece to understand exactly what each naming convention translates to. For example, you can easily incorporate responsive design into your application by adding a breakpoint prefix, like “sm” for screen sizes with a min-width of 640px or “lg” for screen sizes with a min-width of 1024px. For example, the code below says for small screen sizes, I want this text to be small and for large screen sizes, I want this text to be large.
<div class=”sm:text-sm lg:text-lg”>
Take advantage of the quick search bar on their website to delve into their docs as you go.
Getting Started with Tailwind CSS
To get started using Tailwind CSS in your React app, follow the steps outlined in their documentation here.
The framework comes with a set of predefined styles. If you want to customize according to a style guide, like I did for Surf Break Costa Rica, you can do so by modifying your module.exports in tailwind.config.js. As you can see below, I customized my color scheme and font.
Tip: Each time you update the tailwind.config.js, you will need to stop and restart using npm start.
Start Coding with Tailwind CSS
Now for the fun part; start coding with Tailwind CSS! Here is a snip of what I did for Surf Break Costa Rica. Feel free to swipe what you like for yours!
The Final Result
Drumroll, please… ta da! Here is the final result. A beautiful, responsive nav bar incorporating Surf Break Costa Rica’s brand elements.
Like what you see? Check out SBCR’s GitHub repo to reference my code in more detail.
