Complete Intro to React v4

Complete Intro to React v4 Configuring ESLint with React


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

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

Add the ESLint plugins to catch common errors in React. Also install the ESLint accessibility plugin to catch things that will cause your application to be inaccessible to those with disabilities.

Get Unlimited Access Now

Transcript from the "Configuring ESLint with React" Lesson

>> Brian Holt: Let's go fix ESLint. Obviously, ESLint is pretty upset at this point because right here it says you never use Pet, right? Well, I do use Pet, it's down there, but ESLint can't see that.
>> Brian Holt: So there's a couple of things that I actually want you to install for ESLint here.

[00:00:23] So we're gonna open our eslint.json,
>> Brian Holt: We're going to install some additional linting features for React itself, right? So like one of the things that I really like that you can do now, is there's a thing called JSX Accessibility. That will actually lint to make sure that you're doing good accessibility practices.

[00:00:45] This is good for me because I don't know all the intricacies and nuances of Accessibility, like keeping your webpage accessible is one, your moral duty as a web developer. The web is for everyone, right? And two, it can be pretty difficult if you don't know exactly what you're doing.

[00:01:02] So that's why I like this ESLint package that just says, hey, you're not doing this, if you do this will make accessible for people, right? Like for example, doing onClick handler on an h1, is terrible accessibility practice. And it's gonna actually fails us for us, so let's go make that happen.

>> Brian Holt: And some other ones. So come to your,
>> Brian Holt: We'll just make this in a new tab I guess, talks/temp,
>> Brian Holt: fem, okay? So I'm in the root directory of my project here and I'm gonna say npm install -D, and we're going to install quite a few things here.

[00:01:49] babel -eslint, so we need ESLint to be able to process JSX files, so we needed to,
>> Brian Holt: Be able to use babel underneath the hood. eslint-plugin-import, this will help it with things like making sure that we're doing imports and exports okay. So some linting rules around that. eslint-plugin-jsx-a11y.

[00:02:19] Accessibility, right? There's a 11 characters between a and y in Accessibility, that's why it's a11y. And eslint-plugin-react. So I will leave that up for you for just a second.
>> Brian Holt: Okay, let's go ahead and install all of those.
>> Brian Holt: Okay, so now that we have all of those installed, we're gonna go back to our eslintrc.json.

>> Brian Holt: And we're gonna do some more extends here. Order with these extends actually is important, because it's going to apply them in order. So it's very essential that prettier comes last, that's really the one that you have to remember, that prettier has to come last. Because all of these are going to enable things, and the last thing that you want to happen is prettier to go and disable the things that you don't want it to check for.

[00:03:25] Here we're gonna do plugin-, sorry, plugin: import/errors, plug: react/recommended, and plugin: jsx-a11y/recommended.
>> Brian Holt: So what this syntax means is there's a plugin called the import plugin, and I want you to go make this so it errors, right? And I think you can also have warning here, and it will just warn you when it has problems.

[00:04:13] But if you're having import problems, we want it to fail. So that's what errors means. And then react/recommended, it has this like sub set of things that are recommends that you do. It actually has a lot more rules you can turn on. For example, it has one called ordering where it forces you to like order your React methods in a certain way, and I hate it.

[00:04:31] Because I don't wanna reorganize it for some arbitrary reason, so I always turn that one off. So that's why I stick with the recommended ones, same with jsx-ally, it has some even more strict rules, but we're just gonna stick with the recommended ones. Okay, the next one that we're gonna turn off just one of these rules.

[00:04:53] So rules:, so this actually let's you address individual rules inside of your React project. The only one that we're gonna turn off here is react/prop-types. I'm not gonna be showing you this workshop how to do prop-types, because at the end of this workshop I'm gonna show you how to do TypeScript.

[00:05:14] Which is even stricter than prop-types, so we're not gonna worry about that. Otherwise, this requires you to do prop-types which in general is useful if you're not gonna do TypeScript.
>> Brian Holt: Okay, we're gonna have to add some plugins here. Plugins, which is gonna be an array, and we're gonna have react, import, and jsx-a11y.

[00:05:47] Plugins versus extends, plugins are going to augment the abilities of ESLint to do additional things, right? So for example, the React one, enables React to see that React is actually being used despite the fact that's not being explicitly called. Or that Pet is being used as a component, right?

[00:06:05] So that's what React does, it augments the ability of ESLint.
>> Brian Holt: And I think that should be it.
>> Brian Holt: Okay, so now if you come back over here, notice that Pet is no longer an error. But we have an error on this onClick, because h1s are not meant to be interactive, right?

[00:06:32] They're not buttons. So it says, if you have an h1 that's interactive you're not allowing screen readers to be able to reach it. So that's why it's like, don't do this or you have to do additional things, right? So here I would have to have like an onKeyDown=this.handle.

[00:06:53] There's a couple of things that you have to do to get it to actually work that way. But nonetheless, don't put interact developments on h1 if you can avoid it. They should be on buttons, right? That's what buttons are for.
>> Brian Holt: So the way we're gonna get around this is we're just going to delete it, because this is not what we wanted to do anyway.

>> Brian Holt: Then if you go here, look at Pet, notice that React was an error before, it's not an error now. But notice that we're not explicitly calling React anywhere in here, right? This looks like it's an unused variable, doesn't it? But keep in mind, what are those JSX being transpiled to, right?

[00:07:45] They're being transpiled to reacts.createElementCalls, so React still has to be in scope. So anywhere, anytime that you're using JSX, you have to import React. Now the good news is, if we do this, guess what? It's gonna say, hey, React has to be in scope if you're using JSX.

[00:08:04] So ESLint kinda helps us remember that we're supposed to do that.
>> Brian Holt: This is why I like ESLint. It helps you catch dumb errors like this really quickly. You're not gonna get too far in the rules like wait, why is that happening? No, it's really quick like hey, this is broken, fix it right now, while everything is still in your brain.

[00:08:28] So just to give you more alternatives here, I think I mentioned this a little bit. But in previous versions of this class I taught standard and Airbnb. Airbnb's React rules are way more strict. Now I think this can be helpful sometimes especially if you're having someone like a bunch of C# developers or Java developers work with you on a project.

[00:08:51] Giving them the Airbnb rules keeps them in very JavaScript looking code, right? Otherwise, they're gonna write JavaScript code that looks like Java, which we have all seen and never wanna see again. Nothing wrong with Java, you just don't write it the same way, right? So that's a time that I would consider using the Airbnb rules again.

[00:09:08] For me, I spend all day writing JavaScript and TypeScript. So I don't really wanna be burdened by an ESLint telling me very, very strictly what to do. So that's why I've kind of gone back to other side and saying, just let me write my code and help me catch common errors.

[00:09:23] That's kind of my new ethos with these kind of things. But Airbnb's really good if you wanna be very strict about how you want your code to look. It makes it look like the same person wrote all of your code. Almost to a frustrating point. Well, actually no, definitely to a frustrating point.

>> Brian Holt: So feel free to check those out. Yeah, we have another branch here or another commit here. So if you have fallen behind, feel free to come up and grab this commit. Yeah, question?
>> off screen male: Why would it be frustrating to have your code look like it was all written by the same person?

>> Brian Holt: The net result isn't actually frustrating. What's frustrating is that you write code that is good, and works well, and does all these things just as well as you want it to. But the linter's not happy with it. So you have to go change your code that was already good into something that conforms to the linter.

[00:10:19] I find that frustrating. In general, I want people to have as much freedom as possible because then you're not focused on pleasing the linter, you're focused on solving problems. And that's kind of my general, like I worked as an infrastructure engineer at LinkedIn, and now I do infrastructure at Microsoft, right?

[00:10:36] In general, I want to have tools that help you do your job, not like make you conform to some dumb standard, it's kind of my thought process these days. It changes obviously as you can see by each version of this workshop I give, but yeah, it's kind of my thought.

[00:10:53] Other questions?
>> Brian Holt: Cool, so like I said there's another commit at this point. So feel free to go ahead and go grab that if you need it.
>> Brian Holt: Great, so we're now gonna move on to doing state and life cycle methods with React. From here on out we are going to be just using JSX.

[00:11:19] You're welcome to continue doing it with the createElementCall if you feel so inclined, but I would invite you to at least give JSX a shot. Like I said, even the most skeptical people that I knew about it eventually ended up on JSX as well. Just all the examples are written in it, all the documentation is written in it.

[00:11:37] Every company that I know of personally is using JSX. So I would invite you to just keep going with it, and I think by the end of the course you'll feel a bit different about it. Okay, so at this point I would like you all to go to-

>> off screen male: I do have one quick question.
>> Brian Holt: Sure.
>> off screen male: I'm getting all sorts of linting errors, and I think it's because it's going into my node modules. Is there a way to-
>> Brian Holt: It should not do that.
>> Brian Holt: Let's see if I say, you know what? I think you're right.

[00:12:12] If you say npm run lint, it probably is gonna-
>> off screen male: Yeah, that's what I'm having to do cuz I'm using the sublime and I didn't have time to setup the.
>> Brian Holt: Yeah, cuz it's gonna go into all of your module. Yeah, so good point. So come in here to your package.json, and change lint to src/ and that way it'll just be checking source.

>> Brian Holt: Yeah, I had this problem before.
>> Brian Holt: So now if you run it,
>> Brian Holt: You'll just be checking those files.
>> off screen male: Yeah, it worked.
>> Brian Holt: Cool, thank you, I forgot about that.