Getting Started

Let’s go to the package.json, and to use the latest version available for each library we are using, we need to use a VS Code extension called Version Lens. We installed this in a previous chapter, but feel free to install it now if you have not done so.

So how to check the latest version of each library we are using? Open the package.json and click the V icon that you see in the upper-right corner, as shown in Figure 16-2.

Updating a Package Library Safely

We are going to do a safe upgrade of React and of the libraries we are using. To upgrade, just click the up arrow sign, as shown in Figure 16-3.

Upgrade all the minor versions and patches in your app using Version Lens, or if you want to be sure, compare your versions first with the ones we have at the time of this writing. You can check out the package.json in my GitHub:

https://github.com/webmasterdevlin/practical-enterprise-react/blob/master/chapter-13/package.json

If you encounter a problem or an error after running the npm start:fullstack, check your version of NPM. At this time of writing, we are using NPM version 6 because there’s a compatibility problem with version 7.

Speaking of versions, one of the more noticeable changes in React 17 is that you don’t need to explicitly type import React from 'react' when creating a component. Try to delete one of the components and see if it’s still working. At the moment, though, I would not recommend deleting it yet because some React developers might not be familiar with this change. I’m just mentioning it so you won’t get confused if you see components with the explicitly written import React statement.

Besides, the snippets we used in VS Code or WebStorm still automatically include the import React statement. Nevertheless, we need to upgrade to React 17 in preparation for the upcoming features in React.

Once you have checked that your app is still working, we can now start to make our app mobile-friendly.

Updating the HomePage

Let’s start with the Home Page component and make it responsive. We will need style components from Material-UI Core and also the Page template we created, as shown in Listing 16-2.

Listing 16-2 Making the Home Page Mobile-Friendly

import React from 'react';

import { Box, Container, Typography, useMediaQuery } from '@material-ui/core';

import Page from 'app/components/page';

const Home = () => {

  const mobileDevice = useMediaQuery('(max-width:650px)');

  return (

    <Page title="Home">

      <Container>

        <Box

          height={mobileDevice ? '50vh' : '100vh'}

          display={'flex'}

          flexDirection={'column'}

          justifyContent={'center'}

          alignItems={'center'}

        >

          <Typography variant={mobileDevice ? 'h4' : 'h1'}>

            Welcome to Online Shop

          </Typography>

        </Box>

      </Container>

    </Page>

  );

};

export default Home;

What’s new here?

useMediaQuery: A CSS media query Hook for React. It will detect if the browser is small, like a mobile app or a tablet browser. We are setting the max-width to 650 pixels, and if it is below that, we are setting it to mobileDevice.

We have the Page template and the Container and Box from Material-UI in the return elements.

height: We are setting the height to the following: if it’s a mobile device, then set the height to 50 vh (view height) or 50 percent of the browser’s size; otherwise, the height is 100 vh.

typography: If a mobile device is detected, the size is h4; otherwise, set it to h1.

We are also using a shopping bag emoji here. And to get that kind of emojis and just straight away copy-paste it to your code, go to this website emojipedia.org. Search for “shopping bag” and copy and paste this emoji to your code.

Refresh your browser and drag the window to make it smaller. You can also check it from a Simulator if you’re using Mac or Android Studio on Windows.

Updating the About Page

Next, let’s update the About Page component. We would be doing pretty much the same thing here, as shown in Listing 16-3.

Listing 16-3 Making the About Page Mobile-Friendly

import React from 'react';

import { Box, Container, Typography, useMediaQuery } from '@material-ui/core';

import Page from 'app/components/page';

const AboutPage = () => {

  const mobileDevice = useMediaQuery('(max-width:650px)');

  return (

    <Page title="About">

      <Container>

        <Box

          height={mobileDevice ? '50vh' : '100vh'}

          display={'flex'}

          flexDirection={'column'}

          justifyContent={'center'}

          alignItems={'center'}

        >

          <Typography variant={mobileDevice ? 'h4' : 'h1'}>

            About us

          </Typography>

        </Box>

      </Container>

    </Page>

  );

};

export default AboutPage;

It is just practically the same as the Home Page, except for the emojis, as shown in Figure 16-6.

Updating the Not Found Page

To test it, just go to a localhost page that does not exist, for example, “localhost:3000/not-found,” as shown in Figure 16-7.

Making the Navbar Mobile-Friendly

We will need to make the dashboard sidebar navigation mobile-friendly. In Figure 16-8, you’ll note that the sidebar navigation is taking up more than 50 percent of the screen size.

But we are not done yet. If you look at the app in your Simulator or a mobile device, there’s only a slight change. The dashboard navigation is still not responsive, as shown in Figure 16-9, which shows the current state of the sidebar in a mobile device.

There are several ways we could do to make the navigation bar responsive. First, remove the entire sidebar navigation on a mobile device and create a drop-down menu list or a burger menu in the upper-right corner, as shown in Figure 16-10.

Another way is to shrink the dashboard sidebar navigation. We will do the second option.

Making the Dashboard Sidebar Navigation Mobile-Friendly

Now we have two drawer containers, one for a mobile screen and another for a web browser.

We wrap the return elements in an if-else statement. If it’s not a mobileDevice, show the avatar. Otherwise, don’t show it.

Making the Dashboard Layout Mobile-Friendly

After doing that, we also need to use the media query Hooks in the index.tsx of the dashboard layout. We also need to import clsx.

Now recheck your mobile screen. It should be mobile-friendly now, as shown in Figure 16-11.

Summary

To summarize, we updated our React application to the latest current version (as of this writing) in the first quarter of 2021. We then made our application mobile-friendly with the help of media query Hooks.

In the next chapter, we will tackle the various popular styling methods for React components.