What is the data empathy process?

I love writing, mostly because I love talking, but after 25 years of machine-gun mouth, my family are pretty tired of listening to it. So I write, because other people don’t know how annoying I am yet.

Medium is a great platform for doing just that, with an intuitive post builder. Without it, I’d probably be fooling around with markdown, writing HTML & CSS for every new post, or simply releasing stuff as long walls of text. Who’s got time for that? Not this guy.

1. Discovery

So I decided to learn how to create my own post builder in React, just in case there’s a future where sheep rise up and take over Medium, and refuse to let any non-sheep write on the platform. Baaa’d news.

React

The process was relatively straightforward, and I’m going to detail it here. Read on if you want to find out more.

Pre-requisites
  • Intermediate knowledge of React & React 16 features.
  • The ability to download packages from npm.
  • A computer.
  • Too much time on your hands. Like me.
Setup

I used create-react-app to get started, which I installed with npm i -g create-react-app. Then I ran create-react-app post-builder to generate the project, and loaded it in the browser with npm run start.

After that, I deleted the following files:

  • src/App.css
  • src/App.test.js
  • src/logo.svg
  • src/serviceWorker.js

And the service worker stuff from index.js.

Then, I edited my App.js file until it looked like this:

I used styled-components for this project, which is a great library for writing css-in-js. If you’re retracing what I did here, you might want to use it too. Download it by running npm i styled-components. But you can also use regular css, or sass, or the blood of your enemies. It don’t matter.

The PostBuilder Component

The <PostBuilder /> component was to be the main component. It would have a single state field, items. This would be an array of objects, each representing a single item on the page, like a textarea, an image or a code block.