Create an app with Electron and React

How to create an Electron Node.js desktop application using create-react-app 2021 UPDATE: I highly recommend using electron-react-boilerplate instead of the approach described in this post Table of Contents Install Node.js if you haven’t already Move to your development folder Create react app Add electron Install foreman to allow executing the app from command line Install the create-react-app dependencies Configure eslint Enough with the setup! Start up Thanks to When I first used Electron in 2015 it was not yet clear that it would be so pervasive in modern apps, and I was kind of shocked by the resulting app size....

How to Disable an ESLint Rule

In this tutorial, we will discuss how to disable specific ESLint rules in your code. Sometimes, your tooling may automatically set certain ESLint rules, such as the no-debugger and no-console rules. While these rules may be useful for production code, they can be restrictive during development when you need to access the browser debugger and the Console API. To disable these rules, you have several options: Disabling Rules for a Whole File To disable one or more specific ESLint rules for an entire file, you can add the following comment at the top of the file:...

Keep Your Code Clean with ESLint

Learn the basics of ESLint, the most popular JavaScript linter that can help you adhere to syntax conventions, identify potential problems in your code, and enforce a set of standards defined by you or your team. What is a Linter? A linter is a tool that identifies issues in your code. When you run a linter against your code, it can tell you if your code follows specific syntax conventions, contains potential sources of problems, and matches a set of defined standards....

Setting Up VS Code for React Development

In this blog post, we will discuss the simple steps to set up a nice VS Code development environment for React, including linting hints and automatic formatting on save. ESLint The first step is to install ESLint, a powerful tool that helps keep your code clean and maintainable. You can install ESLint using the ESLint extension available on the VS Code Extensions Store. Additionally, run the following Yarn commands in the terminal (if you don’t have Yarn installed, refer to my tutorial for a quick guide):...