What Will I Be Working on As a Junior Developer: Adding a New Webpage to an Existing React App?
By: Megan Ellis and Jenaba Sow
Starting out
As a new developer, you may be feeling lost: learning about company culture, team structure, best practices, and programming styles. Remember, it is important to take tasks in small bites to increase your number of “easy wins”. This will boost your confidence and trust in yourself, opening the door for more complex tasks and learning through curiosity. Software developers are constantly learning, and you should remain vigilant to avoid stagnancy. Keep in mind, don’t get too worried about “failing”. Focus on consistently learning and growing. Your team will work with you, when needed, through pair programming and/or constructive feedback. Now you may be asking yourself . . . What tasks will I be working on?
Gaining a solid foundation in one area of programming is a typical practice. Front end work which impacts user experience tends to be an easier place to start. Let’s imagine you’ve been tasked with creating a new webpage for your teams existing React app. Subtask and tools you’ll encounter could include CSS (cascading style sheets), simple components and configurations, a CMS (Content Management System), UX (user experience) behaviors, and accessibility compliance.
Creating a new webpage in ReactJS
This is a great task to gain exposure to new methods and tools, while adding meaningful impact on the project and the users. Adding a new page to an existing project is usually a result of performance data, user feedback, and or product road mapping. Your team has come to the decision that your app flow is missing a step or would be an improved user experience after adding this page. This task will allow you the opportunities to analyze the way web pages have traditionally been structured within your team’s codebase. In this analysis you will learn by example but should be thinking of ways to refactor and minimize unnecessary or repetitive content. Make your code as readable as possible so the next developers will understand where to add their component in the future.
Let’s walk through an example
The page we will create together today is for the Device Care Customer app. This page is a checkup question in a series of questions to help customers triage their smart phone’s battery. For our walkthrough let’s refer to it as “Phone Charger Page”.
Tech Design
So your team’s UX Designer has designed the page your team is trusting you to create. Your first task is to identity the components necessary to create the page. A great way of doing this is using a drawing tool to place rectangles around each individual component. This will really help you visualize the component hierarchy, which ones need to be created, and which ones can be imported from previously existing files. We used Google drawings on the following design.
Analyze Existing Code
Now it’s time to dive into the code base! Once you locate the folder path where your new file will exist, look at the surrounding files. Do any of them resemble the page you are trying to create? Do you recognize any components you could import instead of creating from scratch? Can you make any of these components simpler? These are just a few questions you’ll want to ask yourself when planning a new page in an existing space.
Start Coding!
- Create your new file, and name it as makes the most sense for your code base: we’ll name our’s PhoneChargerPage.tsx.
- Add basic imports: import React, { FunctionComponent, useState } from ‘react’; and import { useHistory } from ‘react-router-dom’;
- Create and Import Existing Components: Start by creating your function component, const PhoneChargerPage: FunctionComponent = () => { };. This will house all your other components.
Use your component diagram with your analysis of the existing code to identify which components you’ll need to create, and which one’s you can import, configure, and simplify.
A Button component is one that can be reused across your team’s application. In the above code snippet ButtonAtom is imported as an HTMLButtonElement on a separate page. NextButtonStyled then uses the generic button with attached analytics to create a new Next button. It is styled, and then exported; we’ll use this to our advantage on our PhoneChargerPage . You’ll need to import and configure the component to your needs. See below.
Add Content
It is industry standard to use a CMS. They externally house all the displayed content on a webpage. In our case we are using Contentful. The text displayed on PhoneChargerPage within the components need to be defined by a unique pageId. The pageId, which is a string, is defined in a separate content provider. To access that content, you’ll need to import and use the Context function that is hopefully already made and configured for you.
import { RichText, useCheckupContentContext } from ‘@example/web/contentful’;
const { usePageContent } = useCheckupContentContext();
const { questionTitleCopy, instructionsCopy, questionImage, answerOptions, nextButtonCopy, } = usePageContent(pageId);
Add Style
Making changes to the style of pages and components is considered an easy win as the changes can be made quickly and you will have the opportunity to learn about best practices and team style. In the above example from our PhoneChargerPage, a key module you will use often is The Flexible Box Module, usually called flex-box for short. It relies on two axes (main and cross) to determine layout. Display: flex acts as an initializer allowing you to use flex-box properties, flex-direction: column states that the component will run top to bottom. Padding, margins, width, cursor style, and borders are also style changes you will often work with. It is significant to learn how to use these and how their properties can alter your application. Teams usually follow a design of the application and matching that is important to your partners and organization.
UX Behaviors
Screen media breaks are considered to be UX behaviors. As you can see, the Header’s (this is QuestionHeader on our PhoneChargerPage) font size and line height change from the initial setting when the screen size the user has the application running on is “mobile” min-width. If the application is open on a laptop with a screen size that is 600px wide and the user shrinks the screen, as soon as it hits the set “mobile” min-width the font size and line height will change.
Accessibility
When building a new page, you should always prioritize user experience. We don’t want to degrade the app by adding something potentially clunky or unhelpful. This is why making sure your components are accessible is super important. Accessibility heavily impacts user experience; a good start is making sure users can use a screen reader and tab order on your page.
For our PhoneChargerPage example, let’s add an alt tag to our image within ImageContainer component. This will help our visually impaired users identify the image of a phone charger on our page, as a “phone charger”. It can be fun to test this feature by downloading a screen reader. You’ll know your accessibility alt tag works if your computer dictates the alt tag out loud.
<ImageContainer> <img src={questionImage.fields.file.url} alt=”phone charger” /> </ImageContainer>
Feedback
After you’ve cleaned up your code, tested it locally, it’s time to share it out for feedback! Be open to different perspectives on how you can improve your code. We’ve learned that when considering feedback always aim to simplify your code even further. This makes it easier for your current team and future developers to understand and add on to your feature. This is especially important when creating new pages, as new components may be added to it in the future. It’s also important to weigh the value your team, company, client, and users will gain or lose from the additional time it will take to make changes.
Conclusion
Once you’ve maintained a solid foundation as a new developer, you can increase the length and difficulty of tasks to ultimately broaden your areas of learning and enhance your developer skills. Creating a new page on your own allows you to get a taste of different aspects that go into web pages and applications. This is a great task to implement React best practices, discover new learnings, and dive into your team’s code. For all tasks you’ll be working on as a new dev we advise you to use your resources, leave the codebase or user experience better than you found it, and have some fun along the way!
