Building Electron Apps with React + Redux

For a long time, I have been trying to find the time to dive into Electron. For those of you who don’t know Electron, it is a tool to build cross-platform desktop applications with the same tool and language set used in web applications. You might remember the Atom editor, which is written with Electron (in fact both were developed in the same period at GitHub).

I thought I would have to spend a day learning the Electron fundamentals and another day to build a small first screen, but I have never been more wrong. In fact, it took me, with no previous desktop experience, about two hours to get something up and running. This is huge to me because the mental burden thinking of building a desktop application was always very high. As I didn’t have to learn anything about desktop applications and could use my web experience like I normally do it seems very natural to me to build a simple desktop application for a problem, I may have.

So, let me show you what I made to get you a rough idea of the development experience. I chose to create a reference and a quiz for the Functional Programming Jargon list by @gnumanth. It took me half an hour to convert the list into a question-answer format (simply by copying the text, didn’t want to waste too much time here).

The first screen I built was the list view, it took me half an hour, most of the time I was searching for the reason why the window didn’t scroll. It seems like I have to set the top container to 100vh myself to enable scrolling.

The second screen used some redux with a little bit of shuffle logic, so it took me an hour to build the quiz. I built it exactly like I would have to build it for the web, so no mental overhead there.

I hope this gave you a little insight and might boost you to start your own Electron project. If you are familiar with React and Redux, I can only encourage you to check out the electron-react-boilerplate, they did a great job there.


Want to hear more from me? Feel free to subscribe to my newsletter; I send out news roughly once a month.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.