Understand how to pick the right state management solution for your project and know when to use Redux

Traffic lights
Traffic lights
Photo by Maria Cantu on Unsplash.

If you look around in the community, you will always come across the following question: How do I manage my state in React?

Devs who have previously worked with other frameworks like Angular or Vue.js ask themselves how to manage their state in React. Often, the question concerns an official solution for state management.

Another question devs have had since the introduction of the Context API and Hooks API in React 16.8 is how to decide between Redux or the Context API with useState/useReducer to manage its global state.

I would like to answer both questions in the following article…


In the following, I present to you my daily way of working, with which I, on the one hand, achieve my projects and on the other hand do not lose sight of my daily tasks.

PROBLEM

When you work as an employee in a company, it is usually the case that your tasks are clearly defined. Usually, there is a project management software from which it is clear what needs to be done next.

If you are a freelancer, solopreneur, or part-time, the situation is usually different.

When I started out on my own with my affiliate websites, I didn’t have…


Introduction or why I wrote a survival guide

As a lifelong Linux user I started a job in a company where I had to use a Windows laptop. My job is to create a React frontend. Not knowing Windows I wondered about the best way to do my development work.

2 Routes

During my research I discovered two ways for emulating a Linux/macOS like workflow in Windows.

The first way creates a minimal bash environment to emulate a Linux command line. You will run Windows alternatives of your development tools.

The second route uses the Windows Subsystem for Linux 2 (or short WSL 2) to create a Linux environment inside…


After completing our demo application in the third part, we will now build installable packages for the different platforms.

Representing Linux systems, we will build a Debian package. For Windows, we will build a Squirrel package and for Mac OS a ZIP package.

If you want to bring your app into the app stores of the respective platform, you can do so with electron-forge.

The documentation gives detailed information about the possibilities of how to build your packages and how to publish them at the same time.

Preparation

In the package.jsonwe add a proper description for our demo app and decide…


Now let’s rebuild the menus

In the second part, we gave our Electron app a look suitable for each operating system. Depending on the platform, we have used an extra stylesheet for every platform to ensure that the application fits in well.

In this part, we will now rebuild the menu of the gtk3-demo-application. To do this, we will first build the app menu of the application. We define this when starting the app. As a second step, we will create a context menu that is composed at runtime of the application.

Finally, we will do a few optimizations for Mac OS. The app menu…


Desktop and cross-platform styling

Electorn + React = Love
Electorn + React = Love

In the previous article (part 1), we wrote an Electron application based on the GTK demo app. We created the basic structure of the application and added the functionality that the application provides.

First, we only want to adjust the look of the application accordingly. For a start, we will find out on which operating system and with which window manager the application runs.

Equipped with this information, we will then load the appropriate style sheet to make the application look native.

The goal is not that the application looks 100% like an application written with the window toolkit of…


Creating a demo app for different operating systems

You want to write cross-platform apps with React? With Electron and a few NPM-packages, this is no problem. In this tutorial I will show you the foundations of developing cross-platform apps that look good on Windows, Mac, and Linux.

The combination of Electron and React makes it easy to write desktop apps for Windows, Mac, and Linux. The combination of Electron and React gives you a familiar development workflow that is much more comfortable than the workflow of native GUI frameworks.

A great example of a cross-platform app that was developed with React and Electron is Alva. …

Marco Laspe

Managing Director & Founder, Rockiger. Delivering an Apple MacBook alternative, for people who care about freedom. More: https://rockiger.com/en/blog-en/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store