In this video, Emmanuel Henri introduces the three tools he uses on all his projects to follow best practices. He then moves on to explore ESLint along with providing a few resources for linting.
- [Instructor] There are some standards and best practices to follow when working with a framework like React. You need to follow syntax best practices and you can get this through a linter such as ESLint. You also need to do type checking to prevent passing the wrong type of data to your application, and we'll implement this by using a tool built by the Facebook team called Flow. So in this video, we'll start by looking at ESLint, which is already implemented when you first create a React application using the Create React App CLI tool.
And when we copy the dependencies in setup, we basically implemented ESLint automatically. So let's take a look at it. So the first sign that ESLint is properly setup, if you open the integrated terminal, you'll see that we already get some warnings because data is defined but never used, and this is all ESLint screaming at you with warnings do not use this. And really cool thing about React is that it gives you the actual rule that is referenced towards this particular error here.
So for example, links must not point to this sign here. Use a more descriptive href or use a button instead. And this is related to the jsx rules, ally, and href-no-hash. So this gives you a little bit more details of that particular rule and then what's the right syntax, and what settings you can put in there to prevent that rule from screaming at you. So, if for example, we go back to the warning here. So if people agree that this rule has absolutely no impact on our React application and shouldn't show at all, then you could go back to that rule and do something like this where you can prevent it from showing.
So this is what ESLint does. So, for example, one that we should fix right away. Right now we are actually loading data from Firebase and no longer loading data from our JSON file, and it's actually telling us about that. So let's go ahead and remove the import data. Like so. And that's why it was screaming actually. So let's save this. And if we look back into our terminal. So, View, Integrated Terminal, then that rule is no longer there.
So FYI that rule will disappear in a future video because we're actually implementing a React Router and therefore this won't be needed anymore. Okay, so right now the rules are the standard React rules but, for example, I use the Airbnb more stringent rules. So if you want to use something that is a little bit more around best practices in the industry and what a lot of people are following, then you can setup something like Airbnb.
And the way you do that is by creating a specific file in your folder Legacy, for example. Let's go and click here. So create a new file and it would be a .eslintrc. Like so. And then in this file, you will need to define the rules that you want and actually, it shouldn't be in the components, it should be outside. So let's put it completely outside here, like so. Perfect. Let's make sure it's in the right folder.
And here, you would set up your settings by, for example, doing an extends and call it airbnb and then do, mention the plugins that it needs to properly check your code for those specific rules. So, right now if we just save our file like so, it's not going to work because we haven't set up or installed the plugins that we need to make it work.
So how to do Types and Objects and Arrays and things like that, and what are the common themes around linting that you're going to get from Airbnb. And to get the package to do ESLint with Airbnb, you would click on package here and get the esinc-config-airbnb. So click on here and then scroll down and follow the setup here. So you would need to do this setup to properly set up the dependencies that we need in order to do this ESLint here.
So if you want more stringent rules like the Airbnb, feel free to set it up by using the setup here. And I already did the file for you so if you want to do the Airbnb, you can use this file here in the folder here.
- Creating a new React project
- Installing and working with React Developer Tools
- Dissecting a project into components
- Setting up the state with static data
- Adding and finalizing CSS in components
- Setting up and leveraging Firebase
- Standard code best practices
- Installing and setting up Flow for type checking