So what we're going to do is we're going to go through this. make the case for this way of doing development. As I go through building working code. We will try to do a stop maybe like an hour and a half from now or something like that. Take a five minute break. So I've got my timer set for that. We will also be talking in chat. I will try to get both the Discord channel and the, let me make the Zoom chat a little bit bigger, so I won't make a mistake on it.
All right, excuse me for a second. Apologies, I wonder if my microphone picked up that sneeze. We will be taking a little bit of a break, we'll be following along on all these things. And if you get stuck, that's okay, because the link to the working code for each step will teleport you into a magical future where everything works correctly.
One last caveat before beginning, I am a developer advocate for our IDEs. So at JetBrains, for this, it would mean WebStorm, or any of the other IDEs that include the WebStorm plugin. I'm not going to really over promote WebStorm on this. It will be – I use the word IDE, because then it will apply to other smart editors that can look at structure instead of just the strings of text. But at the same time, as I do this tutorial, I get really excited about how the tooling can help us, the tooling of testing and the tooling of typing can make us have a better development experience and stay in the flow.
So, with that in mind, let's begin. This is the sequence we're going to do setup and cleanup and then jump right into testing. We'll do a little bit of debugging to show the benefit of sitting in an IDE, and then straight into a number of things about writing React components. This is up to date as of create React app last week, so I updated all the code for this. I didn't update the videos. There are a couple of places where the videos are out of date on using a jest selector for roles, but we're all smart. We can work around it. I don't know how far we will get through all of this today, but, again, I'm easily replaceable, so if we don't get to the end, you can just watch the video on your own time and see about these last couple of things. They're pretty interesting topics, and they really do show off how far you can go with test first.
All right, let's begin, so I'm going to go to project set up, and I'm going to get us a sample application, and we're going to show three kinds of running things in the code. We're going to show running the development set up, the build your final site set up, and the test set up. And along the way, we're going to start introducing a little bit of things about the IDE. So, with that in mind, if you want to follow along on this page, that's fine. I also have it in the background so I can cheat. I'm going to go over to my IDE, I'm going to start on the welcome to WebStorm screen. I'm going to create a new project.
Now, I could, if you're not using WebStorm, that's fine, you can type this. So, I'm going to create a new project, it's going to be a react project. I'm going to call it Create React App and it's going to prompt it's going to tell me some of the things that's going to be using by default. Let me make sure I have it. I gotta scroll up. We're good. There. We're good here. I'm using hug. I think node 16. Yeah. 16.10 Thank you, WebStorm for answering that question for me. It's going to be using NPX to get create React app. So let's see if you have intelligent idea ultimate, then you have access to the Node JS plugin. And if you've installed Node JS, you have access to all of this.
A little disclaimer about this, I'm going to explain as if some things for some of you might be new. But I also realize that some of you do know what NPX is. I won't dwell on it because it's all really well explained elsewhere. In the world of Node JS. But if you're creating a project, you can use the NPM command to install packages. But what if you want to install like a application, something that you're going to run, which will then create a package. There's this thing called NPX which says, Okay, go get the latest version of this put it in a temporary environment and run it. So you see a lot of these command line tools like learners and formatters and scaffolds like this. Create React app using NPM so that you're always getting the latest version. What is the latest version of Create React app? Which is the scaffolding tool that we want to use. It's four point oh point three. And finally, I want to make a Typescript project because typing is an important part of this.
Okay, with that in mind. a little bit off the end. I should have. I'm going to go back and make a new one. I did well I will go and delete that scratch pen. All right. Okay, and then I'll come back. My apologies I should have deleted that. So new project, react going to call it CRA, and I'm going to ask for TypeScript support, say create new project and WebStorm is putting on my external monitor. So let me resize this here. And then. So. So what WebStorm did was it created a new quote unquote project in that directory and ran some things that it knows how to run, such as create react out, which is creating all the software and then installing all the dependencies. So that's what you see right now is the output of create react app, as if I was doing it on the command line.
Ah, yes next JS, in fact, we're getting more interested in next JS, my colleague Ebenezer Dawn has a long blog post about MDX and next JS that we published recently. Alright, so this is going and getting I mean, let me talk about create react app. For those of you who don't know it, it is a scaffold to generate the best collection of supported software for a modern react app. What that means is add on packages, you might want to use and tooling that you might want to use like lenders and stuff like that. It's going to be over a thousand, maybe 1,500 packages that it installs. And this is just madness. It's so hard to keep all of this stuff in your head. And then as it changes like every single day, this will break that create react app is doing us all a really big favor by taking ownership of what software should you use. And what versions of what software should you use? And they will say we will support all of that. So this is a really important thing to be doing for create react app. And that's why I'm using it as the start point.
How luck we have co-workers here together. All right. And yes, June, you're correct. There are always 100 options to do the same thing for everything, especially in the front end world.
Comments