Over the next 6 months (and probably more) I’m going to be writing about the process of creating a for-reals no-lie bona-fide React app that just might fill a real need. I’ll be documenting the steps I take here so you can follow along or laugh at me. Either way, I’ll be learning.
But before all that, we need to get our development environment set up. Feel free to follow this to a T, or use it as a springboard.
Note: I’m on a 27” iMac (running macOS Sierra as of this writing). Everything that follows in these posts will be from that point of view.
The Terminal: iTerm2
An indispensible tool for modern web development, and incredibly powerful if you take the time to learn it. Mac has a terminal built in, which is good. But iTerm2 is better.
- Download iTerm2. It’s free, but if you’re making money from it, so should they. You’ll want to unzip
iTerm.appand place that bad boy in your
- Launch iTerm2. It should look like a humble floating terminal window right now.
Preferencesfrom the menubar (shortcut:
- Go to
Default, and select the
Windowtab. Set the blur and opacity to your liking. Set “Style” to “Full-Width Top of Screen”. For columns and rows, I set 80 and 25 respectively.
- Next select the
Keystab, check “A hotkey opens a dedicated window with this profile”, and click the “Configure Hotkey Window” button. My hotkey is
⌘`: just close enough to
⌘⇥to make it familiar. Check “Pin hotkey window”, “Animate showing and hiding”, and for “On Dock icon click:” choose “Show this Hotkey Window.” Press “OK” and exit preferences.
- Hit your hotkey. Boom. Down slides your terminal like you’re Iron Man on a budget.
I don’t have time here for a terminal tutorial, but if you want to learn more try out these resources:
The Version Control System: Git
If you don’t know how to use even the basics of Git, remedy that immediately. The first step is installing it on your system. On a mac this is easy:
- Open your terminal and type
- On Mavericks (10.9) or above, you will be prompted to install it.
Once it’s installed, run through these videos for an introduction to Git.
The Editor: Sublime Text 3
- First, download Sublime Text 3, and fire it up.
Install Package Control. This will allow you to add themes, plugins, etc. Just paste the code on the install page into Sublime’s console (accessible via
View > Show Console).
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
- Once that finishes installing, hit
Tools > Command Palette...) to open the Command Palette. Type “install” to bring up the suggestion “Package Control: Install Package”. This is the feature you just installed. Hit enter. The Command Palette will disappear briefly, then reappear with a list of packages.
- Install a theme. Material Theme by equinusocio is popular and my personal favorite. Install it by finding it in the Command Palette and hitting enter.
A few more packages I like:
- Emmet: This could be its own post. You’ll wonder why you ever typed anything out ever again.
- GitGutter: Marks lines with your Git diff in the Sublime gutter.
- Color Highlighter: Shows a preview of your colors inline with your code. Helpful if you don’t have synesthesia.
- SideBarEnhancements: Tons of additional file management options right from your sidebar.
- And, of course, any syntax highlighting packages you might need (for our needs: Babel, Sass, JSX).
What if you’re cruising on the terminal want to open the current directory in sublime? Just run:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl
Now you can open any file or folder with a simple:
subl . // open `current directory subl your_file.txt // open specific file
You also might see a prompt to purchase a license occasionally while using Sublime. You’ll know when you ought to have a license. A good rule of thumb is if you’re presenting at a React conference, you should have one.