React: Designer’s Guide to the Terminal

You can learn how to use the terminal in a fairly short amount of time. You don’t need a C.S. degree. You don’t need to know how to hack any mainframes. With the terminal, you can open, move, rename, copy and delete files. Same with directories (folders). The terminal is the Finder app on steroids. File management is just the start. The terminal is the interface for a slew of power tools. You can install and run programs.You can version files.You can read documentation offline.You can write scripts to automate tasks.You can edit programs.You can configure hidden OS settings.You can tunnel into servers.You can take full advantage of open source resources. If you’re using React, you can quickly spin up applications and install design systems.If you’re using git you can contribute to the execution of your design work. The terminal is a powerful tool.It’s a powerful tool for designers.It’s a powerful tool for anyone. Make it look nice The Terminal can also be a bit daunting.I recommend making it look nice first.Download a nice theme.Extract the zip file, and import it into your terminal. Open Terminal.CMD + , to open up settings.Import the .terminal file and set it to default.Restart the Terminal. If you aren’t happy with the default monospace font, there are plenty of good options to choose from: SF Mono (Pre-installed)InputInconsolataSpace MonoOffice Code ProPragmataPro (paid)Operator (paid)Cartograph (paid) Starter Commands The Terminal helps you move around and modify the file system.Here are 7 commands that are important as you get started: 1. List — ls ls shows the files and directories in your current directory. 2. Change Directory — cd cd is how you move around.cd .. will take you to the parent directory.cd Documents will take you into the Documents directory. For this to work, you need to be currently in a location that contains a Documents directory. 3. Move — mv mv is used to move files from one directory to another.mv file.txt new/file.txt moves a file from your current directory to the new directory.mv file.txt new.txt will rename file.txt to new.txt. 4. Create — touch touch is used to create files.touch hello.md creates a file named hello.md in your current directory. 5. Make Directory — mkdir mkdir creates a directory.mkdir images creates a directory named images in your current directory. 6. Remove — rm rm removes a file.rm -d removes a directory.rm -rf node_modules will recursively delete the node_modules directory and every file/directory inside of it. Most commands you run in your terminal are harmless. Be careful with this command. Deleted objects aren’t stored in Trash, and there’s no undo. 7. Open — open open will open a file in the using the default program for that file type.open index.html will launch your default browser with the html page in the location bar.open README.md will open up your default markdown editor. Important Locations If you’re on a Mac some locations have a shorthand. / is shorthand for your root directory.~ is shorthand for your user directory.. is shorthand for your current directory. You can change directory from any location into your user (cd ~) or root (cd /) directory by using these shorthand locations.Additionally, cd without a provided location will move you into your user directory. You can use a tool like bashmarks to save and visit commonly used directories. Typing long location names gets old. In addition to shorthand, you can autocomplete locations using tab. Custom Prompts and Commands By default your Terminal includes computer and user information in the prompt. Philips-MacBook:Documents philipdavis$ It’s common to remove this and replacing it with the current location…

Like to keep reading?

This article first appeared on react.design. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply