Developer-Tools

Command Line

// Navigation
pwd                     # print working directory
ls                      # list files and folders
cd projects             # move into folder
cd ..                   # move up one folder
cd ../..                # move up two folders
cd ../../..             # move up three folders

// Create
mkdir new-folder        # create new folder
touch file.txt          # create file in current directory
touch folder/file.txt   # create file in another directory
touch folder/sub/file.txt # create file in nested directory

// Windows Drives (Git Bash / WSL)
cd /c/                  # go to C drive
cd /d/                  # go to D drive

// Delete
rm file.txt             # delete file
rm -r folder            # delete folder and everything inside

Key Notes

• Filesystem = tree structure (folders inside folders)
• Root = top of the system
• Use tab to autocomplete file names
• Use ↑ ↓ to reuse previous commands

Useful links: MDN Command Line | W3Schools CLI

Command Options

Paths are based on your current location (pwd), not the file’s location.

When moving or accessing files:
source = where the file is
destination = where it is going

Both paths are relative to where YOU are, unless using an absolute path (/).

Example:
mv europe/file.txt asia/

// list
ls -a        # show hidden files
ls -l        # detailed list
ls -t        # sort by modified time
ls -alt      # combine options
ls folder/        # list contents of a specific folder
ls ../folder/     # list contents of a folder one level up
ls /c/Projects    # list contents of a path directly

cp file.txt folder/              # copy into folder
cp file.txt newname.txt          # copy + rename
cp file.txt folder/newname.txt   # copy + move + rename

mv file.txt newname.txt
rm file.txt
rm -r folder/

cp z* satire/   # wildcard example
cp *.txt media/* 
mv * school/

ls -a      # all files (including hidden)
ls -l      # long format (details)
ls -al     # both combined

Note: media/* uses the / and wildcard * to target all files inside the media folder.

Note: * selects all files in the current directory.

Note: Options can be combined (ls -al = -a + -l).

Key Notes

• Options modify command behaviour (use -)
• You can combine options (ls -alt)
• * matches multiple files
• rm deletes permanently (no undo)

Useful links: MDN Command Line | W3Schools Bash Reference

Redirection

Mental model:

command → output → destination
    

• | → command → command
• > / >> → command → file

Key Rules

• Redirection works on command output , not files directly
• | = command → command
• >> = command → file
• Always ask: Where is the output going?

cat & echo

Quick rule: echo = new text | cat = existing content

echo "Hello" > file.txt
echo "World" >> file.txt

cat file.txt
cat file1.txt >> file2.txt
    

• echo takes text as arguments and outputs to stdout
• cat reads file content and outputs it

Piping Examples

cat greatest.txt | sort
grep "Earl" greatest.txt | sort
ls | grep ".txt"
    

Useful Commands

grep (search text)

grep "text" file.txt
grep "text" *
grep -R "text" .
grep -i "text" file.txt

* = all files in current directory
. = current directory (use with -R)

# Notes
Output spacing can vary between commands.

When using grep on formatted output:
- avoid exact spacing matches
- match patterns more loosely (e.g. numbers or keywords)

    

• -r / -R = searches recursively (goes into folders and files inside .)
• -i = ignores case i.e (Player = player = PLAYER)

sort (order text)

sort file.txt
cat file.txt | sort
    

uniq (remove duplicates)

sort file.txt | uniq
    

• Only removes adjacent duplicates

wc (count)

wc file.txt
wc -l file.txt
ls | wc -l

# output: lines words bytes filename
# 0 0 0 = empty file

Counts lines, words, and bytes
-l = lines
-w = words
-c = bytes

Tip:
wc -l is the simplest way to find empty files
0 = empty file

Example:
wc -l */*.txt | grep 0

• Counts lines, words, and characters
• -l = lines
• -w = words
• -c = characters

sed (modify text)

sed 's/old/new/' file.txt
sed 's/old/new/g' file.txt
sed -i 's/old/new/g' file.txt
    

• s = substitute replaces only the first match on each line
• /g = replaces all matches on each line
• -i = edit file in place
• ' ' = wraps the command (not part of sed logic)

Warning: -i overwrites the original file.

Common Mistakes

grep "Earl" file | output.txt   ❌
grep "Earl" file >> output.txt  ✔️

cat "text" >> file             ❌
echo "text" >> file            ✔️
    

Environment

Environment: user settings and preferences

Key Commands

env
export VARIABLE="value"
echo $VARIABLE

• env → list all environment variables
• export → create/set a variable for current session
• $ → access variable value
• | → pipe output to another command
• > → redirect output to a file

Common Variables

• $USER → current user
• $HOME → home directory
• $PATH → command search paths
• $PS1 → controls how the command prompt looks

Editing Environment

nano ~/.bash_profile

• .bash_profile → stores environment settings (loaded when terminal starts)
• nano → command line text editor

Quick Examples

echo $HOME
env | grep PATH
export NAME="John"
echo $NAME

Note: Changes may require a new terminal session.

Windows Note

On Windows, I can use Git Bash to practise Bash commands like ls , pwd , cp , mv , and rm . Command Prompt and PowerShell use different commands.

React Developer Tools

A Chrome extension for inspecting and debugging React apps directly in DevTools — view the component tree, read/edit props and state live, and trace how data flows through an app.

Install & Detect

• Install from the Chrome Web Store — search "React Developer Tools"
• Requires a running React app (e.g. npm run dev) open in Chrome to activate

Using It

1. Open Chrome DevTools (F12 or right-click → Inspect)
2. Two new tabs appear alongside Elements/Console/etc: Components and Profiler — only visible on React sites
3. First time in: click the gear/settings icon inside the Components tab and clear the default filter that hides host (DOM) nodes — otherwise you'll only ever see the top-level app component
4. Click any component in the tree on the left — its props/state appear on the right
5. Hovering a component highlights the matching element in the rendered page, same as the regular Elements panel
6. Use the search box to jump straight to a component by name

Editing Live & the Console

• Props and state can be edited directly from the Components tab's right-hand panel — useful for testing how a component reacts to different values without changing code
• State only appears once a component actually has state initialised — a component with no state/hooks shows nothing there
• Select a component in the tree, then switch to the Console tab and type $r — this references whichever component is currently selected, letting you inspect it (or call its methods) straight from the console