Your React App Is a Mess Before You Even Know It

This is how you separate infrastructure, content, style, layout, and state from each other.

Does your React app look like this? Photo by Rick Mason on Unsplash

React is a great library. It lets you create awesome user interfaces. But with great power comes great responsibility. Don’t just throw together your content, style, layout, state, and infrastructure! If you do, you won’t have much fun in the long-term.

This post shows you how to clearly separate these concerns from each other. Right from the start of your project. We will use the following libraries:

• Infrastructure-Components specify the app’s architecture and infrastructure
• Styled-Components customize the style and layout of the user interface
• React-Redux manages the application state

Get Started

There are manifold ways of creating a React app. Facebook’s script create-react-app is the most famous one. But, while it supports you when you develop your app, it leaves you unsupported when it comes to deploying it.

We use Infrastructure-Components. These React-Components let us define our infrastructure architecture as part of our React-app. We don’t need any other configuration like Webpack, Babel, or Serverless anymore.

In this post, we set up our project manually. If you like, you can download your customized boilerplate code from www.infrastructure-components.com.

You find the source code at this GitHub repository.

We start with the package.json. You can choose any name, version, description, and licencse.

Install the dependencies and devDependencies with the commandsudo npm install.

The build-script points to the scripts-command of infrastructure-scripts. This is a collection of scripts that do all the configuration for us. It works like create-react-app. But it allows us to use infrastructure-components in our…