Environment & Setup

Instructor: All right guys. So before we get started I wanna go over our environment. I wanna go over some of the tools we'll be using, some of the text editor extensions, and stuff like that, just so you can see exactly what I'm working with and you can pick and choose what you want. Some things are mandatory, some aren't. So we'll go over everything. First of all, you're gonna need Node.js. This is a MERN stack course. We're working with the Express framework, so we need Node and you can get that from Nodejs.org. Although I'm sure most of you probably have it installed already. And you can use either the long term support or the current version. So next you'll need a text editor. I'll be using VS Code, which is what I would recommend. However, if you wanna use something like Sublime Text or Atom, that's fine too. I will be going over some of the extensions and settings that I'm using as well. And it's, of course it's cross-platform so it doesn't matter which OS you're on. So next is git, which is a version control system. You will need this at the end if you wanna deploy to Heroku as we'll be doing. But I would also recommend that you create a git repository and you make commits along the way as you progress through the course. I'll be doing this off camera. Next, you'll need Postman to make HTTP request to our server, to our back-end. Basically, we're gonna create an API first and we need a way to test it because we won't have our front-end yet, our React front-end. So Postman, we're gonna be using that to make get requests, post requests, get data from the database, all that stuff. So you wanna download that. Next is React Developer Tools, which is a Chrome extension. And this, I mean, I guess you don't really need this. Redux DevTools, I would say you need. React Dev Tools just helps you look at individual component state and props and stuff like that. We'll be using it a little bit. But the Redux DevTools you definitely need because this shows our entire application level state. It shows us all the actions that are fired off. And I couldn't imagine developing anything with Redux without using the dev tools. So those are pretty much the system wide tools that we'll be using. So now I'm gonna jump into VS Code and we're gonna take a look at some of the extensions and there's not too many. One is this Bracket Pair Colorizer which of course is not mandatory. I like it because it just kind of visually organizes my blocks. So curly braces, parentheses, brackets, it'll add a color and then if you nest inside of it another block, that'll be a different color. So it just kind of organizes things visually. Also for React in Redux, I'll be using, where is it? Quite a few extensions here. So this ES7, React, Redux, GraphQL, React Native snippets, which is kind of a mouthful but this gives us a bunch of shortcuts to do things like generate components, generate prop types. It allows us to write our code much faster. So I will be using this and I'll go over some of the shortcuts as we move along. So next, let's see, I think there's one more, Prettier. So Prettier is a code formatter and I have it set for instance to add semicolons if I forget one, to change double quotes to single quotes, and it will do this when I save. Now if you want this to happen, if you want to format on save, you have to edit this setting here. So what you would do is go to settings and search for format on save and you wanna make sure that this checkbox is checked. All right, and just to show you some of my Prettier extent or Prettier settings, let's see, I have the JSX single quote checked and I have the regular single quote checked. But of course if you wanna use double quotes, that's fine. If you don't wanna use semi-colons in your code you wanna uncheck this right here, this semi value. There's options for like trailing commas and stuff like that, but I keep it pretty, pretty vanilla. Now I'm gonna go into my edit or my settings.json file here which is my custom settings. And I just wanna show you this right here. Okay, now if you want to be able to use. Oh, let's move that. If you wanna be able to use Emmet within JSX, or within React, you have to add this to your settings file. So it's this emmet.includedlanguage or includedlanguages, and then javascript, javascriptreact. So this will allow you to be within JSX and do, for instance, h1, enter or tab, and it will create those tags for you. So I will be using that. So I would recommend adding that to your settings. And these are my other settings. A lot of it is for you guys. The font size is pushed up. Word wrap is on, so the code doesn't go off the page, stuff like that. Now, one other thing I wanna mention for Windows users if you want to use Git Bash. So if you download git and you're using Windows, there's a really nice tool called Git Bash, which is a terminal for Windows that's Unix based. So it's much better than using the standard Windows command line. Now if you want that within your VS Code terminal so in VS Code we can go to View, Terminal, or just make this a little bigger, or we can just toggle it with control tilde or command tilde like that. Okay? Now if you want this to be Git Bash you can add a setting in here. So if we go to, let's just search for Git Bash, VS Code, and it should give us the document page, right here. Integrated Terminal and VS Code. And if you scroll down, you'll see right here this terminal integrated shell windows, and you can set it to the path of bash.exe, which is your Git Bash program. So if you want, you can just copy this and you can put it in here. And then you'll no longer have the standard Windows command prompt as your integrated terminal. You'll have the Git Bash. So I would suggest that for Windows users, unless you're already using something like the Windows subsystem for Linux or something like that. All right, so just wanted to mention that. But those are the tools and the settings that I'll be working with throughout the course. So if you want to install some of those extensions or if you don't want to, that's fine too, but I just wanted to show you what I'm working with. All right, so in the next video we're gonna go ahead and set up our MongoDB Database and we're gonna get started on our back-end.