The second day is always a grind in my experience. Some of the excitement has passed, the work has truly set in. It’s never on day one that I realized the size of the project that I’ve just started.
It’s been probably about a month since I’ve worked on a React, so the biginnings are moving a little slower than I want. Once I get more of the structure built, though, I will feel more comfortable and confident.
Under the Hood
Most of the work today looked like this. Not near as exciting as seeing the fleshed out UI come together. However, I got the footer done, AND it’s operational too.
The primary routing of this app is now handled by React Router. I’ve configured React Router a couple of times, and it comes out a little different each time. This configuration might be my favorite so far.
Using a Layout Component
I was having a hard time keeping my footer at the bottom of the screen in every route. I didn’t want to have to render in the Footer on every component, and using an outlet and child routes of the root make for a funky and deeply nested router. So, this time I tried a layout component that wraps each of the components displayed in my routes! Here’s what it looks like:
// Layout.js
import React from 'react'
import Footer from './Footer'
const Layout = (props) => {
return (
<>
{props.children}
<Footer />
</>
)
}
export default Layout;
Simple. The props.children
call here lets me add more components inside Layout and everything will be rendered above the footer, even when I change routes.
Setting Up My Router
I have four primary routes: /
, /library
, /account
, and /about
, and to keep my index.js
file from getting too cluttered, I did the router configuration in a separate file:
// router.js
import { createBrowserRouter } from "react-router-dom";
import Layout from './Layout/Layout'
import Home from './Home/Home'
import Library from './Library/Library'
import Account from './Account/Account'
import About from './About/About'
const router = createBrowserRouter([
{
path: "/",
element: (
<Layout>
<Home />
</Layout>
),
},
{
path: "/library",
element: (
<Layout>
<Library />
</Layout>
)
},
{
path: "/account",
element: (
<Layout>
<Account />
</Layout>
)
},
{
path: "/about",
element: (
<Layout>
<About />
</Layout>
)
}
])
export default router;
Since I’m tucking the router away, I also thought this might be a good place to render in my Layout componenet, rather than having to do it in each functional component.
All that was left was to add the router provider in index.js
:
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client'
import { IconoirProvider } from 'iconoir-react';
import router from './router';
import { RouterProvider } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider
router={router}
fallbackElement={(
<div><p>Loading...</p></div>
)}
>
<IconoirProvider
iconProps={{
color: '#FFF8F4'
}}>
<App />
</IconoirProvider>
</RouterProvider>
</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();
See why I didn’t want to have the router in here too? Seems like it would be a lot yeah?
So, with these changes, and the addition of React boilerplate to my Home
, Library
, Account
, and About
pages, I now have a footer that changes my URL and navigates me through the application.
Tidbits
Something small I learned today that is going to have a big impact is the rfce
code snippet! I’ve had these snippets installed for months, but I haven't really taken the time to learn them. I'm kicking myself for that now!
rfce
means React Functional Component Export. It automatically generates the following boilerplate:
import React from 'react'
function Home () {
return (
<div></div>
)
}
export default Home
It’s great, and it saved me a ton of time today.
What's Next?
I think I’ll build the About page the next time I sit down, since it will be relatively easy to knock out, and it is pretty static. From there, I have some global components that I need to create!
If you like what you’re reading, give me a follow and share with a friend. Let me know what you’re working on down in the comments, or tell me how I can improve my process!
Top comments (0)