How to Build Fully Responsive React Apps with Nothing but Inline Styles and JavaScript
A tutorial for devs sick of chaotic stylesheets and media queries.
![](https://miro.medium.com/v2/resize:fit:700/1*FU2X3qShthww3blupQ7WZw.png)
What you’ll build
App 👉 https://ryanjyost.github.io/react-responsive-tutorial
Repo 👉 https://github.com/ryanjyost/react-responsive-tutorial
Why I wrote this
I love using inline styles in React. Almost as much as I dread dealing with media queries and traditional stylesheets to make my projects responsive.
Do I even need media queries or Bootstrap?
I asked myself that question before starting to build my second personal site. For a handful of one-off situations, I’d used JavaScript to calculate a transform, color, etc. with great effect. Why couldn’t I take that strategy to the extreme and use JavaScript to handle all of my styling. (Ok, maybe not all…CSS is still the easiest way for hovered styling IMO and other common use cases.)
So I just went for it — I built that personal website/app using Gatsby.js and making it responsive with inline styles.
Some of my takeaways were…
- The developer experience was incredible compared to the old way.
- I built it super quickly, with way fewer hiccups and roadblocks along the way.
- JavaScript and inline styles in React 🙌 vs. CSS stylesheets and media queries 😖
- I felt like I was using a scalpel vs. the bone-saw of media queries and/or Bootstrap.
By the way…
While I found very few issues with this paradigm, I’m definitely a little bit unsure/concerned about scalability, support on older browsers, performance, etc. Not yet convinced it’s a perfect alternative, and expect to find shortcomings/issues the deeper I go. But I’m hopeful about using this paradigm going forward.
Getting started
Create a new React app with create-react-app.
sudo npx create-react-app react-responsive-tutorial
Not sure when this started, but with create-react-app I’ve had to use sudo
and chown
the project directory after creation. So if you get any “EACCESS” issues, don’t be surprised.
If you have editing/EACCESS issues, chown
the project directory (like the below snippet for a mac/linux)
sudo chown -R $USER <path to>/react-responsive-tutorial
Enter the project and start it up.
cd react-responsive-tutorial
npm start
Initial Building Blocks
Let’s take a mobile-first design approach and set up the basic structure of our app that’s optimized for small screen sizes.
Open up your App.js
and paste the following code into it.
Some things to note from the above snippet
- We created a
styles
object that will contain the main styling properties for our app. - In this tutorial, we’ll just pass the
styles
as props to keep things easy. A better way could be to write a higher order component (HOC) or keep track of styles in a Redux store. If you want me to write a tutorial or create an npm package for a more sophisticated version of handling React app styling with only JavaScript and inline styles, please leave a comment! - We have an array of
menuItems
that will be displayed in theFooterMenu
. Why keep them inApp.js
? Because we’ll use the same array in the sidebar at larger screen sizes! - I just recently started using functions (e.g.
(opacity = 1) => `rgba(255, 255, 255, ${opacity})`
) to manage my app’s main colors and their opacities, simply because I got super frustrated copying and pasting or memorizing them with inline styles. Sure I could take advantage of something like SCSS of Less, but it’s been a great help with the JavaScript + inline styles approach.
Let’s create components for the small screen layout
Create a new folder in the src
directory called components
and add the three main layout components in there.
Topbar.js
- Note how we’re using the globally available
styles.topBarHeight
for (you guessed it) the height of theTopbar
. Seems trivial here, but it’ll help to use the same property in theContent
.
FooterMenu.js
- Here we’re just rendering the
menuItems
to be evenly spaced and centered in the fixed footer. Note that it’s just icons for now — we’ll add words at a bigger screen width shortly.
Content.js
- We’re creating 20 dummy blog posts to act as the content.
- Because the
TopBar
andFooterMenu
have fixed positions, they overlap theContent
. So, taking advantage of our globally availablestyles
, we can set top and bottom padding of theContent
based on thetopBarHeight
andfooterMenuHeight
. And If you ever want to change those values, theContent
will update accordingly and not have any styling issues. - Refresh if you see errors, hot loading might not notice new files.
Here’s how it should look on a mobile sized screen
![](https://miro.medium.com/v2/resize:fit:378/1*sJg26zphaJgJKQhtZdoUXQ.png)
But when it gets bigger….
![](https://miro.medium.com/v2/resize:fit:700/1*J9wMeP9MKKYFDHs8Gn9elw.png)
Yeah, not ideal. So, when the screen is wide enough (at 500px, for example), let’s show the text of the menu items in the <FooterMenu/>
. But how do we know when the screen is 500px wide, without using media queries?
Like this tutorial?
Tracking the window size and using it
Here’s some updated code to paste into App.js
.
- All we’re doing here is keeping track of the browser
window
’s width and height in theApp
component’sstate
. - We don’t even need the height for this tutorial, but one can imagine use-cases for tracking it.
Again in App.js
, add a bool property to the styles
object indicating whether the window is wide enough to show text in the <FooterMenu/>
menu items.
Now update FooterMenu.js
to show the menu text when applicable (and add some margin to the icons, too).
Adding a sidebar for bigger screens
Our sidebar is going to have two versions
- A “collapsed” version that’s pretty thin and just has icons, which looks better on screen sizes too wide for a
FooterMenu
but not quite wide enough for a full blown sidebar with text. - An expanded version that includes menu text and is for larger screen sizes.
So, let’s update the styles
and tweak the render
function in App.js
to accommodate and control the new Sidebar
component. Here’s the final App.js
.
Here are the notable changes in App.js
above…
styles.showSidebar
— show theSidebar
when the window width is greater than 768px. We’ll also hide theFooterMenu
andTopBar
.styles.sidebarCollapsed
— we’ll display the narrower, collapsed version of the sidebar at window widths less than 1100px.styles.sideBarWidth
— change theSidebar
‘s width based on whether it’s collapsed or not.
Create a new component file called Sidebar.js
, and paste the below code into it. Note all of the styling ternaries for handling the different styles at different screen sizes.
One last thing…
The Sidebar
is overlapping the main Content
, so we have to make some final tweaks to Content.js
to offset the content by however wide the Sidebar
currently is, plus a little extra padding.
And that’s it!
Play around with your browser window and see how responsive the app is.