Learn React - development environment
Branch with changes from the video: https://github.com/burlai/react-cheat...
VS Code Prettier: https://marketplace.visualstudio.com/...
VS Code ESLint: https://marketplace.visualstudio.com/...
ESLint official docs: https://eslint.org/
--------------------------------
Hello, my name is Konstantyn, I'm a Frontend Engineer working in a lovely city of Warsaw. My main technology stack is React. Please ask me questions in comments and subscribe for more tutorials like this!
✅ Follow Me:
LinkedIn: / kostiantyn-burlai
Github: https://github.com/burlai
☕ Buy Me A Coffee: https://www.buymeacoffee.com/konstantyn
--------------------------------
In today's video, we will quickly set up our development environment. We will install a couple of extensions in VS Code and the browser. Let's get started!
First of all, all these settings are recommended by the creators of React, so for me, they are a "must-have" for every React developer. Let's go to the official docs for that: [https://react.dev/learn/editor-setup](https://react.dev/learn/editor-setup)
Let's start with one of the most useful features when it comes to formatting code. This is a feature of VS Code, not an external plugin. Let's go to the VS Code settings and search for "Format on save" and make sure that the checkbox is ticked. Now you can mess up the formatting of your code as much as you want, but when you click save, the formatter will fix all of it.
Now let's move on to the extensions. Go to the extensions menu in VS Code and search for Prettier, then install it. Then do the same for ESLint.
*Prettier* is an extension for formatting your code according to some standards, such as whether a tab should contain two spaces or four. There could be quite a lot of configurations with it, but for now, we will add just the bare minimum to not complicate things. Prettier could have global settings that will apply to all projects and local ones. I prefer local Prettier configuration because it gives more control and flexibility. To configure Prettier locally, we need to add the `prettierrc.json` file. This is a simple JSON file detected by Prettier, and then those settings are applied to this particular project. We should also ensure that Prettier is set as the default formatter in VS Code settings.
When it comes to **ESLint**, this is a plugin with a set of rules that will detect and show you a lot of things that are not okay with the code. This could be some more serious bugs like improper usage of React Hooks or just a warning, like when you define a variable but didn't use it. We installed the ESLint plugin for VS Code, but there is one more thing to install: the recommended configuration for React. Let's go to: [https://www.npmjs.com/package/eslint-...](https://www.npmjs.com/package/eslint-...) and install the package.
ESLint also could have global settings and local ones for the project. And the same as with Prettier, we will stick to local project settings. Let's create an `eslintrc.json` file. All ESLint configurations will be placed here. You can have many settings enabled/disabled here, but for now, we will add the basic ones.
That's it for VS Code extensions, but there is one more useful thing for your React development process. This is the React extension for the browser. In Google Chrome, just open the extensions library and search for React and install it. After that, when you open developer tools on any React application, you can explore React components with their state, props, and structure. It is really helpful in debugging your app.
#react #reactjs #reactjstutorial