Creating a React app using the create-react-app command can seem like magic. If you’ve used React before, you might be vaguely aware of the presence of things like Webpack or Babel under the hood, but you aren’t required to know anything about them to successfully construct a highly functional application.

But what exactly is all that stuff doing under the hood? And is all of it necessary for every application? These are some of the questions I had after using create-react-app for awhile, so I set out to find some answers by building a React app from scratch.

I think the best way to begin is by laying out everything we absolutely need for development. Here is a short…


Image for post

I first used styled-components when I starting working on my first large application, and I really like how it works. It allows you to build reusable components that are easy to grow and adapt to new situations as you build different layouts.

I’m going to go over some ways you can use styled-components to make reusable components that abstract the CSS and HTML, creating your own custom component library.

The syntax for styled-components might look a little strange at first. You can create any kind of HTML element and its CSS style like this:

const Container = styled.div` …


Image for post

This past week I had to figure out how to stop a user before leaving a specific page for broadcasting a concert and, if they choose to close the tab or navigate to a different page, hit an API endpoint that ends the concert.

This was a difficult problem because there are multiple ways a user can leave a single page of a website and they aren’t related. Closing a tab, going to a different URL, or even refreshing the page are different from clicking the HOME or PROFILE buttons.

Furthermore, I wasn’t able to find any way to customize these alerts or hide the default browser messages and create my own. Ultimately, I found that, in React at least, trying to intercept a user before they leave a page is a frustrating undertaking. …


Image for post

From the moment I first started learning CSS, I was simultaneously excited and terrified of learning CSS animations. On the one hand, animations are maybe the most exciting and fun aspect of CSS. The simplest animation can breathe life into a user interface and completely transform it.

On the other hand, it’s very hard to make really visually interesting animations. As someone relatively new to web development, I wasn’t sure that diving deep into CSS animations was the best use of my time, but ultimately I had to try them out. …


Image for post

A while ago, I wrote about using the basic React hooks, useState and useEffect. Since then, I’ve been working completely with functional components in React and have been able to explore the other hooks React offers.

useContext

useContext is similar to useState except its meant for global values that need to be used by many components. If you’re familiar with Redux, it’s similar to the Redux store. As a matter of fact, context is provided to components by wrapping them in a Provider, just like Redux.

To establish context, import createContext from React and execute the function:

import React, { createContext } from…


Image for post

I completely underestimated the power of Array.prototype.reduce() when I was first learning JavaScript. I didn’t totally understand how it worked, and so I wrote it off as nothing more than a convenient way to find the sum of an array’s elements.

But now that I understand how reduce works, I see its potential for all kinds of different applications. …


Image for post

Before I worked on a large application with many other developers, I never put much thought into the git process. I learned the basic commands required to collaborate with one other person and push personal projects to Github.

I had never heard of git rebase until a coworker suggested our team start using it instead of git merge. We’re all in different time zones and pushing changes throughout the day to the dev branch. When I was ready to push my code, I would switch to the dev branch and pull the changes:

git checkout dev
git pull

And then go back to my branch and merge the current dev branch into my…


I recently created a board game app using ActionCable in my Ruby on Rails API and ActionCable Provider for React in my front end to establish WebSocket connections between each client and my API.

I ran into a lot of WebSocket trouble when trying to deploy this app to Heroku. I found a lot of different suggestions for how to fix the issue and just about tried them all.

I do not wish that brand of despair on anyone, so I distilled all of the fixes down to what actually solved the problem for me and wrote the following step-by-step guide for deploying an app utilizing ActionCable to Heroku. …


Image for post

Going in, I thought the hardest part of building the user interface for uploading a file would be the actual functionality of handling that file.

With any other input in React, you can handle its value by controlling it, storing the value in a component’s state to be easily used by other functions or components. But inputting text is much different — and much faster — than uploading a whole file. I thought I had a long road ahead of me.

It turns out; it’s not that different. The really tricky part of adding a file input to a React application is styling the thing. For some reason, most browsers don’t provide any way to style the Choose File button on a file input. You can style the file name text, but no matter what you do, the button still looks very World Wide Web. …


This week, I had to construct a date selector form in React that looks like this:

Image for post

As you can see, the user interface includes the surrounding month and date options in addition to the selected date. This means that I need to not only keep track of the current date, but I also need a way to conveniently figure out how many days are in the selected month and which months come before and after that selected month.

When I first looked at this design, I thought I was going to have to write a bunch of helper functions for this. But I didn’t have a lot of time, so I decided to see what JavaScript’s Date object could do for me in this situation. …

About

Mike Pottebaum

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store