Check out a free preview of the full Complete Intro to React, v6 course:
The "ESLint & React" Lesson is part of the full, Complete Intro to React, v6 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through how to configure ESLint so it will recognise that React is being used and not throw errors. How to configure ESLint so it also enforces accessibility rules in JSX is also covered in this segment.

Get Unlimited Access Now

Transcript from the "ESLint & React" Lesson

[00:00:00]
>> So, now we need to go and fix ESLint. Because again it's saying here, hey, pet is defined but you never using it, but we are, right, we're using it here. It's just that ESLint doesn't get that yet, yet they augment its capabilities to understand react code. So can you come in here and do an npm install-D eslint-plugin-import@2.22.1 eslint-plugin-jsx-a11y@.

[00:00:51] 6.4.1 and eslint-plugin-react@7.22.0. And again, you can just grab that off the course notes and copy and paste that. So we're getting three plugins here, import jsx accessibility. That's what a11y stands for is accessibility. There's a, there's 11 characters and y, accessibility and that's where that comes from. Which is gonna help us enforce all images must have alt, right?

[00:01:34] You shouldn't make divs clickable elements, right? It does a bunch of those just kind of automatic accessibility checks for you. And then plugin-react, this is actually the tool that's going to allow it to understand our react. So go ahead and run that. Things aren't gonna work right now, so just give me a sec.

[00:01:52] We're still in the kind of a transitional state here. We're going to have, to add a couple more things here. We're gonna do plugin. Import/errors, Plugin:react/ recommended, Plugin :jsx -a11y/recommended, and then prettier. Okay, a couple more things here. If there's individual rules that you wanna turn off in eslint, you can say rules.

[00:02:43] And we're gonna turn off a couple of them here. One of them that I just don't deal with is react/ prop.types. We're not gonna do anything with prop.types today. We're eventually gonna get into typescript, in the advanced or the intermediate section. So we're just gonna turn that off.

[00:02:59] And we're gonna do react/react-in-jsx-scope. Because we have the new version of babel, we don't need this to be on either. And the 0 just means turned off. I think you can also put false here, and that would be okay. Or, there's another one here, I think it's like none are off, might be off.

[00:03:21] But anyway 0, 0 works I just remember that, 0 is on, 1 is warn and 2 is error. So we want those two. Then we have to give it two plugins. So another top level thing here will be plugins, which will be an array and we're gonna give it react, import and jsx-a11y.

[00:04:00] Okay, this is going to improve the abilities of ESLint to understand react first of all. Import is another really good one that it'll check your imports to make sure that they exist, that they're exporting things. Just everything around a module system, very, very useful. And then again, this is the one that's going to check to make sure that you have alt tags and, things that are just fundamentals of accessibility.

[00:04:30] And then down here at the very bottom, we're going to need one more code settings. You have to tell it what version of React that you're using. Because it makes the difference between, version prior to 16 is very different than version 16. So a nice thing you can say is, "version":"detect", just say like, look at my package.JSON and figure it out yourself, is basically what that means.

[00:04:59] Okay, so that should be it for react and eslint together. If you go look at your, Pet.json and all that kind of stuff or sorry, your app.js. Now pet will no longer be erroring out at you, right? Because now it understands what pet is. Our last thing to fix here, is we have this React.createElement(App).

[00:05:26] We're not using that anymore, that's the old way of writing it. So we're gonna just put, app like that. On line 15 here, we're going to render out app. So that bears talking about as well, right? I'm sure many of you have seen like input, like that before, right?

[00:05:49] It's a self closing tag or a void tag as they're called in the spec, is a tag that both opens and closes itself. So you can do that with things like pet, right, or app is absolute better example. It's a tag that opens and closes itself, because you can have an app like this and you can put stuff in here.

[00:06:09] They would pass it into app as a child. But, I think even if I save this, it might even. No, doesn't matter, anyway. That's how you do a self closing tag. Now the thing I'm going to tell you right now, is if I wanted to put like an input in here like this.

[00:06:29] It's actually technically valid to do input tag without a closing tag, right. So a lot of people write their inputs like this. In React, you actually must do a self closing tag. If you don't put that slash there, it's going to expect a closing tag somewhere. So just know that void tags or self closing tags need the trailing slash.

[00:06:56] Okay, now that we've put App there, saved it. We should be able to still go back over and say npm run dev. And, if we go back to our Adopt Me page, everything is still working, but now it's working through the magic of JSX. It's exciting, I'm excited.