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.

Frank Zickert | Quantum Machine Learning
codeburst
Published in
7 min readSep 17, 2019

--

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:

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…

--

--

You're interested in quantum computing and machine learning. But you don't know how to get started? Let me help