I just finished working on my first ever React application. I tried to set some practice schedule for myself for learning and accumulating knowledge by working on some practice apps. I finished the ‘React for beginners’ and ‘Learn Redux’ courses from WesBos (I definitely recommend them, they are awesome) so I could get a feel of how to work with React. As a must, I decided to force myself to write unit tests. These tests helped me feel more comfortable and that I am on the right track.
One of these practice apps was my portfolio website (http://www.gabrielaradu.me/) I have followed these steps. This website is hosted for free on Heroku with free Dynos, so at first it might be slower to load.
One of the harder problems I encountered was adding a navigation menu and learn about Higher order components in React while I was at it.
Here are the steps I followed:
1. I chose a template I liked.
I found a free template by Bootstrapious.com. I chose a HTML5 and Bootstrap template that wasn’t yet ready for React, which I then integrated into my new React application. For how to do this check out my other blog post here.
2. Decided on the layout depending on the screens.
I knew I wanted to keep the pages simple and balanced. I wanted the information to be “the main star” of my web app, and the navigation to be clear. On medium and larger screens, the menu will always show on the left. On small screens, this layout cannot be kept because of the space limitations, and so on mobile the navigation will slide in from the left to the right side. This toggle state will be fired by a “hamburger” menu button on click.
3. I reused code as much as possible
I broke down the code in multiple parts that in the end can be reused and bundled together as needed. The navigation, page and the hamburger icon will all be different standalone components. This is because I want to have the possibility to change the layout as I see fit. I might want to change this in the future. The biggest plus is that this decoupled project structure makes my tests easier to write.
4. The path to Higher Order Components
The desired user story is that every time a user clicks an item in the menu, I should have a different page on the right, but I don’t want to have redundant code every single time, so I should be able to just replace the page component and leave the rest as it is.
phase 0: At the beginning of the project each page had the navigation and the details page code. In my case, Home.js, Feedback.js, Blog.js, Work.js and Contact.js had copy-pasted code for the menu. This wasn’t great. I wanted to reuse code as much as I could and this was the opposite.
phase 1: I created a new component for navigation called SidebarMenu.js which then I wanted to inject into existing code. How would that work? Take for instance the App.js (main page): it will have SidebarMenu.js on the left and portfolio data on the right.
But this is how all the components will look like. We need to decouple code even more and use a wrapper where the content will dynamically change depending on what is chosen from the navigation. This is where Higher Order Components come into place. From the official documentation:
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
phase 2: So I have created a stateless component Page.js which will act as a builder used by other standalone components. In our case, we declare our navigation, mobile menu and the dynamic page that will be injected called InnerComponent for better clarity.
The App.js component will now look like this:
Page will take as the single argument the component Portfolio and the result is a brand new component with all the navigation and mobile menu there plus the actual page portfolio. Pretty neat!
5. My code is public on GitHub
If you want to check out code details for this project take a look on GitHub: https://github.com/gabrielaradu/myportfoliowebsite
Top comments (0)