React: Responsive Website

https://github.com/JoeG21/medium-ex/blob/master/react-responsive/src/App.js

When making an application, you want to consider another devices when designing your project. Whenever it be mobile, tablet, and all in between, it’s important to keep in mind that they all have different window sizes. I’m going to go over to 2 ways you to make your application responsive on any device.

CSS Media Queries

Media queries is a simple solution for this problem, it’s noting complex and easy to implement. It has many selectors but the main one you’re going to use the majority of the time is “orientation”. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media (orientation: portrait) {
}
@media (orientation: landscape) {
}

Orientation can take on 1 of 2 selectors, “portrait” and “landscape”.

1. Portrait is when the height of the window is greater than the width.
2. Landscape is when the width is greater than the height.

function App() {
  return (
    <div className="App">
      <p> hello world </p>
    </div>
  );
}

This is going to be our boiler plate code to test out our media queries. Now let’s add our queries in our CSS file.

@media (orientation: portrait) {
  .App {
    color: red;
  }
}
@media (orientation: landscape) {
  .App {
    color: blue;
  }
}

As you can see, when our application renders in a window where the height is greater than the width our color change and vice versa.

From here, Media can take on a 2nd parameters. “Or” and “And”, it’s like adding conditions in our CSS.

@media (orientation: portrait), (max-height: 400px) {
  .App {
    color: Red;
  }
}
@media (orientation: landscape) and (max-width: 200px) {
  .App {
    color: blue;
  }
}

Now let’s see this in action.

Whenever we’re in landscape mode or if the width of the device is greater than 200px is going to be blue. When in portrait mode, and if the window height is greater than 400px it’s going to whatever our default color is that we declared in our .App which is white.

UseState & UseEffect

UseEffect is the 2nd way of getting around this problem. If you don’t know useEffect or useState you can check out my blogs on them!

UseState: https://devjoe.medium.com/implementing-react-hooks-usestate-53e565669439

UseEffect: https://devjoe.medium.com/implementing-react-hooks-useeffect-e27b7a81c74e

First, we need to set state to the window width that the application is being render on.

const [windowWidth, setWindowWidth] = useState(window.innerWidth)

Then we need to add an event listener, “resize”, to listen to the window when it changes. And if it changed we want to call a function, “handleResize” to change the current state of the window.

const handleResize = () => {
  setWindowWidth(window.innerWidth)
}

useEffect (() => {
  window.addEventListener('resize', handleResize)

}, [])

But we need to remove the event listener because it’s going to add on top of itself causing our application to slow down. This is also knew as “clean up”, whenever our component get unmounted it’s going to call that return we just declared.

useEffect (() => {
  window.addEventListener('resize', handleResize)
  return () => {
    window.removeEventListener('resize', handleResize)
  }
}, [])

Now let’s make a simple ternary operator in our JSX.

return (
  <div className="App">
    {windowWidth < 500 ? portrait : landscape}
  </div>
);

So whenever our window width is less than 500px is going to return “portrait” if not it’s going to return “landscape”. Now let’s add some logic to those variables.

const portrait = (
  <div className='portrait'>
    <p>hello portrait </p>
  </div>
)
const landscape = (
  <div className='landscape'>
    <p> hello landscape </p>
  </div>
)

Thank you for reading! You can always checkout my GitHub for the code!

https://github.com/JoeG21/medium-ex/blob/master/react-responsive/src/App.js