Transform Your React Website into a Mobile-Friendly Masterpiece: A Step-by-Step Guide

As the world becomes increasingly reliant on mobile devices, it’s more important than ever to ensure that your website delivers a seamless and enjoyable experience to users regardless of the device they’re using. At Fuel Digital, we prioritize the creation of responsive websites that provide the best possible user experience for our clients’ customers.

In this article, we’ll guide you through the process of setting up a React app and implementing a range of techniques, including media queries, CSS web layout models, and responsive typography, to make your app fully responsive. Whether you’re a seasoned developer or just starting out, you’ll find useful tips and strategies for creating a website that looks and functions beautifully on any device.

Step 1: Create the App

Installing Create-React-App

Before we get started, it’s important to note that this tutorial assumes that npm and node are already installed on your system. If you’re unsure whether you have these tools, you can check by opening a terminal and running the following command:

node -v

This should display the current version of node you have installed. If you see an error message or the command is not recognized, you’ll need to install node before proceeding. You can find installation instructions on the node website or by using a package manager like Homebrew.

Once you’ve confirmed that node is installed, you’re ready to proceed with the tutorial. In the terminal, run the following command to install create-react-app library:

$ npm install -g create-react-app

Alternatively, if you’re big on using Yarn, you can use Yarn to install create-react-app globally instead!

$ yarn global add create-react-app

We’ll verify that our install of create-react-app is working with:

$ create-react-app --version

Creating Our First React App

Start by going into the folder you want your project to live in. we’re going to create an app called “react-responsive”:

$ npx create-react-app react-responsive
cd react-responsive
npm start

This will start up a development web server and give you a place to start working on your application. Running this will start up a development server at http://localhost:3000/ and give you a nice little starter template.

Now with the app running, let’s make it responsive!

Step 2: Make the app responsive

1. Media Queries

Media queries are an essential tool for creating responsive websites that look and function beautifully on any device. They allow you to apply different styles to your website based on the resolution of the device being used.

Before we start adding media queries to our code, it’s important to decide on the breakpoints we want to use. These are the points at which the styles of your website will change to better suit the device’s resolution. The breakpoints you choose will depend on the specific needs of your app, but for this tutorial we’ll use breakpoints based on common device resolutions: 480px, 768px, 1024px, and 1366px.

Once you’ve decided on your breakpoints, you can start adding media queries to your CSS file. To do this, you’ll need to use the @media rule followed by the desired breakpoint in pixels. For example:

@media (max-width: 480px) {
  /* styles for devices with a maximum width of 480px */
}

This media query will apply the specified styles to any device with a maximum width of 480px, such as smartphones. You can use a similar syntax to create media queries for the other breakpoints you’ve chosen.

With these media queries in place, you can start adjusting the styling of your website to better suit the needs of mobile, tablet, and desktop users.

For this tutorial, we will add the media queries to App.css as shown below:

Now that you’ve set up your media queries and added them to your CSS file, you can test how they’re working by resizing your browser window or using the browser’s developer tools. To do this, open your app in a web browser by visiting http://localhost:3000/. Then, right-click on the page and select Inspect (or use the appropriate keyboard shortcut for your browser).

This will open the developer console, which allows you to see the HTML, CSS, and JavaScript that make up your website. You can also use this console to test how your media queries are affecting the styling of your website. To do this, click on the Toggle Device Toolbar button (it looks like a phone and a tablet) in the top left corner of the console. This will open a panel that allows you to switch between different device resolutions and see how your website looks at each breakpoint.

Try adjusting the resolution and see how the text on your website changes as the media queries are triggered. This is a useful way to make sure that your media queries are working as intended and that your website is responsive to different devices.

2. CSS: Flexbox and Grid

In addition to media queries, there are other tools you can use to make your React app more responsive. Two of the most important are Flexbox and grid.

Flexbox is a layout system that makes it easier to align and distribute space among items in a container, even when their size is dynamic or unknown. It allows you to specify how items should grow or shrink to fit the available space and how they should be aligned within the container. This makes it a powerful tool for creating responsive layouts that adapt to different screen sizes and resolutions.

Grid is another layout system that divides your website into a series of equal-sized “boxes” or cells. You can specify how many cells a container should use and how they should be arranged on the page. This allows you to create complex, responsive layouts that are easy to modify and maintain.

By using tools like Flexbox and grid alongside media queries, you can create a fully responsive React app that looks and functions beautifully on any device.

Flexbox is generally used for smaller-scale layouts and is well-suited for aligning and distributing space among individual UI components, such as navigation links and form elements. Grid, on the other hand, is better suited for larger-scale layouts and can be used to create entire page layouts by dividing the page into a series of equal-sized “boxes” or cells.

While both Flexbox and grid can be used to create responsive layouts, they are intended for different types of layouts and can be used together to create even more complex and flexible layouts.

To demonstrate the power of Flexbox and Grid, we will create 3 boxes in our app.

In App.js file, add the code below:

<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<div className='responsive'>
<div className='box'></div>
<div className='box'></div>
<div className='box'></div>
</div>

Then in App.css, add the following code:

.responsive {
width: 30vw;
height: 30vh;
}
.box {
margin: 5px;
width: 30%;
height: 30%;
background-color: red;
color: red;
border: 1px black solid;
}

Now the app should have 3 boxes:

Boxes in the app

To add Flexbox or Grid to the component, we simply add display property to the class:

.responsive {
  display: flex;
  /* display: grid; */
}

Flexbox

Flexbox has the default row direction. All the boxes should be aligned horizontally. You can use the flex-direction property to change the direction.

Here are most of the most common properties used for Flexbox:

justify-content: This property specifies how items should be aligned along the horizontal axis (that is, along the row). Possible values include flex-start (items are aligned to the left of the container), center (items are centered within the container), flex-end (items are aligned to the right of the container), space-between (items are evenly distributed with equal space between them), and space-around (items are evenly distributed with equal space around them).

align-items: This property specifies how items should be aligned along the vertical axis (that is, along the column). Possible values include flex-start (items are aligned to the top of the container), center (items are centered within the container), flex-end (items are aligned to the bottom of the container), stretch (items are stretched to fill the entire height of the container), and baseline (items are aligned along their baseline).

flex-wrap: This property specifies whether items should wrap onto multiple lines if there isn't enough space on a single line. Possible values include nowrap (items do not wrap) and wrap (items wrap onto multiple lines if necessary).

Here is the complete guide about Flexbox properties.

Grid

Similarly, once you set the display property of an element to grid, you can use various grid properties to adjust the positions and sizes of the child elements within the container.

Properties to use:

grid-template-columns: This property specifies the number and size of the columns in a grid. You can use values like repeat(3, 1fr) to create three equal-sized columns, or more complex values like 150px 1fr 2fr to create columns with different sizes.

grid-template-rows: This property works in the same way as grid-template-columns, but specifies the number and size of the rows in a grid.

grid-template-areas: This property allows you to specify the areas that each child element should occupy within the grid. You can use a series of strings to define the areas, with each string representing a row in the grid.

gap: This property allows you to set both the row-gap and column-gap properties at the same time. It specifies the size of the gap between rows and columns in a grid. You can use it to add space between the grid cells and create more visually appealing layouts.

Here is the complete guide on Grid properties.

Example styling:

.responsive {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
/* or */

.responsive {
display: grid;
grid-template-columns: 1fr 50px 1fr ;
gap: 15px 10px;
}

Play with different combinations. You can accomplish most stylings needs with these tools.

3. Typography

If you want to create a responsive website, it’s important to have a responsive font as well. By default, most developers use pixels as the unit for setting font sizes, but this can be limiting on a responsive website. If you know the exact resolution of the website, pixels may work fine, but in most cases, you’ll want a more flexible approach.

One way to make the font size responsive is to use media queries and define different font sizes for different breakpoints. This gives you a lot of control over how the font size changes based on the device resolution, but it can be cumbersome to set up and doesn’t allow for much flexibility.

An alternative approach is to use relative font size units like rem or vw. rem units are based on the font size of the root element (usually the html element) and vw units are based on the width of the viewport. This means that the font size will automatically adjust based on the size of the viewport or the root element's font size.

Using rem or vw units can be a more flexible and responsive way to set the font size of your text. You can use them in combination with media queries to fine-tune the font size for different screen sizes and resolutions.

body p {
font-size: 3vw;
}

In summary, while media queries can be useful for adjusting the font size based on breakpoints, using relative font size units like rem or vw can be a more flexible and responsive solution.

Step 3: Check the responsiveness on real devices

After developing a responsive React website, it is essential to test it on actual devices to ensure it performs as expected. Developer tools can simulate certain device environments, but they are not a substitute for real device testing.

One tool that can facilitate this process is a responsive design checker like BrowserStack. It is a cloud-based platform that enables testing on a range of real devices and browsers. Simply sign up, upload your app, and select the devices and browsers to test on.

Real device testing is crucial for the proper functioning of a responsive React website. BrowserStack is a valuable tool for this purpose, offering a range of devices and browsers for testing.

Conclusion

In conclusion, building a responsive website with React can be a bit like solving a Rubik’s cube — it takes a bit of patience, persistence, and some clever techniques to get everything just right.

But with the right tools, like media queries, Flexbox, grid, and responsive font size units, you can create layouts that are flexible and adaptable to different screen sizes and resolutions.

And just like with a Rubik’s cube, the more you practice and experiment, the better you’ll get at it. Before you know it, you’ll be churning out responsive React websites like a pro.

So don’t be afraid to get your hands dirty, try out different approaches, and have a little bit of fun while you’re at it. Happy coding!