« Previous Tutorial Next Tutorial »

Hi guys, welcome to the first ever installment of Five Minute React. We’re going to spend roughly five minutes today talking about the first thing you’re going to need to get up and running: a good text editor. I like Sublime Text a lot, so that’s what we’re going to get set up with. I’ve made the ultimate sacrifice by removing it from my Mac in preparation for a clean install, which means I’ll have to set everything back up the way I like it. The good news is: you’ll be stepping through that with me.

There’s a very good chance you’ve already installed Sublime. If that’s the case, you can click the little card that should be appearing below in order to jump right to the next video, which will deal with configuring it for our React project.

Anyway, Sublime Text is a commercial editor. It has an indefinite evaluation period, which means you don’t have to pay for it, but if you can afford it, you really should. It’s important to support quality software like this. If you don’t like Sublime or don’t want to use it, you could check out Github’s Atom editor, which is also excellent. A newcomer that’s surprisingly good is Microsoft’s Visual Studio Code, which is available on all platforms, not just Windows. Both of those editors, quite frankly, borrowed a lot of what makes them great from Sublime Text. You can also use Vi, Vim, or Emacs here but if those are your editors of choice, well, you probably don’t need me to tell you how to use them, because you’re already a power user.

So, let’s go get Sublime Text. We do this by going to sublimetext.com and clicking “Download”, which takes you to the download page, where I’m going to select OSX, since that’s what I’m using. We let the file download, then click to open it. This will mount the DMG, and all we need to do is click and drag to install. I’ll let you worry about buying it on your own, but it’s easy. You get an install key in the mail that you can paste into Sublime’s registration box, not to mention complete instructions. Starting with the next video, I’ll be working with a registered copy.

Great, you can see the application was added to the dock. So click that, and it should open up a brand new Sublime window. A quick note for windows users: your install process is almost identical. Download the installer, run it, and sublime will be added to your start menu. From there, everything that follows in this tutorial and the next one is identical.

So, now we have a working copy of Sublime Text. If you’ve never used it before, it’s an immensely powerful editor but one that can be a little overwhelming to newcomers. The good news is that most of its defaults are pretty terrific. If you’re looking to learn a lot more about Sublime, I strongly suggest Wes Bos’s awesome book and video course, Sublime Text Power User. Don’t worry, though, in our next video we’re going to cover some basic setup and usage tips before we move on to further setup for our React app.

As you can see, Sublime starts off in a default text editor mode. We won’t get any syntax highlighting here, but you can use the menu in the lower right to choose from a wide variety of file types – and of course, the editor will auto-detect based on file extension whenever you open a file. Here, let’s set it to HTML and then type out a few sample lines.

<p>This is a test</p>
<div id="testing" class="border-black">this is a div tag</div>
<span class="testme">so much testing</span>

And so forth. Sublime text has some autocompletion abilities, which can be augmented through packages, but more about that next time. There’s also a variety of color schemes to choose from, and more can be downloaded. I happen to like the default Monokai scheme, so that’s what I’ll be working with.

While we’re installing, let’s also add Sublime to our path so we can execute it from the command line. This is a handy feature to have and doesn’t take much to do. We’ll start with OSX and then do Windows. If you use the latter, you can safely skip to Editing The Windows Path below. If you’re on the former, we have to edit our shell configuration file. In the default install, that file is in your home directory, so type

cd  ~

and then type

nano .bash_profile

Or at least, that’s what I’d be doing if I was using the default shell, but I’m not—I’m using zsh—so my shell configuration file is called .zshrc and that’s what I’m opening. If you’ve installed some other shell, I’m afraid you’ll have to figure out on your own where your shell configuration file is. Google’s your friend!

Scroll to the bottom and add the following line:

alias subl="open -a /Applications/Sublime\ Text.app"

Hit ctrl-X (not cmd-X) and say yes when it asks if you want to save the file. Then either restart your terminal or type:

source ~/.bash_profile

or in my case

source ~/.zshrc

That’s all there is to it. Let’s test! Kill your open Sublime Text instance, and then in your terminal type:

subl

and hit enter. Voila … we have Sublime Text! Excellent. We’ll be using that very soon. But for now, it looks like we’re about at our five minutes. I’ll see you in the next video: configuring Sublime for React development.

Editing the Windows Path

Windows users, let’s get Sublime added to our path, huh? Open your start menu and type “environment” and you’ll see the option to edit environment panels come up. When you click it, it’ll actually launch the System Properties tab, which still requires you to click the environment variables button, so do that. Then choose “path” and click edit.

From here we’re going to add a new entry. Click “new” and type the following:

C:/program files/sublime text 3/

Then just save it, and you should be good to go. Make sure to close any existing command prompts, because they won’t get the new path entry. Then close Sublime Text if it’s currently running, open a new command prompt, and test by typing

subl

And hitting enter. You should see Sublime Text open back up. Awesome! That’s all we’ve got for today. See you in the next video: configuring Sublime for React development. Thanks very much for watching, and don’t forget to like and subscribe!

Next Tutorial »