What is data empathy?
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.
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.
The process was relatively straightforward, and I’m going to detail it here. Read on if you want to find out more.
- Intermediate knowledge of React & React 16 features.
- The ability to download packages from npm.
- A computer.
- Too much time on your hands. Like me.
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:
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.