Kick-off — Tools, Git & Your First Expo App

The 60% coursework, week by week:

Today you practise it alone: your own repo, one branch, one merge.

Paste this in the VS Code terminal to install them all:

import { Text, View } from "react-native";

export default function Index() {
  return (…);
}

PS C:\Users\you\my-first-app> ▍

1. Explorer: your project’s files and folders
2. Editor: where you write code
3. Terminal: where you type commands. Open it with Terminal → New Terminal or Ctrl + `
4. Source Control: Git inside VS Code
5. Extensions: install the extensions from Task 2.3

Two words you’ll type all the time:

Check that everything is installed:

In the terminal, go to the folder where you keep your course work (for example cd Documents), then run:

The starter comes with demo screens. Reset it to a blank app:

9:41

12Hello, Mobile Dev 👋3Type your name…4Tapped 0 times5

1. View: the box that holds everything (like a div)
2. Image: a picture from a file or a URL (like img)
3. Text: all text must be inside Text (like p)
4. TextInput: a box the user can type in (like input)
5. Pressable: anything the user can tap (like button)

Open app/index.tsx, delete everything and paste:

import { useState } from 'react';
import { View, Text, Image, TextInput, Pressable, StyleSheet } from 'react-native';

export default function Index() {
  const [name, setName] = useState('');   // what the user typed
  const [count, setCount] = useState(0);   // how many taps

  return (
    <View style={styles.screen}>
      <Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} style={styles.logo} />
      <Text style={styles.title}>Hello, {name || 'Mobile Dev'} 👋</Text>
      <TextInput style={styles.input} placeholder="Type your name…" value={name} onChangeText={setName} />
      <Pressable style={styles.button} onPress={() => setCount(count + 1)}>
        <Text style={styles.buttonText}>Tapped {count} times</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16, padding: 24 },
  logo: { width: 64, height: 64 },
  title: { fontSize: 24, fontWeight: '700' },
  input: { width: '100%', borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 12 },
  button: { backgroundColor: '#111', paddingVertical: 12, paddingHorizontal: 20, borderRadius: 10 },
  buttonText: { color: '#fff', fontWeight: '600' },
});

Checkpoint

Save. The phone updates by itself (Fast Refresh). Type your name and tap the button:

9:41

Hello, Mariam 👋MariamTapped 3 times

Replace everything in README.md with:

# My First App

Lab 01 — Mobile Application Development (25CSCI38H)
Made by: Your Name · Student ID: 123456

Run it: npm install, then npx expo start

node_modules/
.expo/
dist/
*.log
.env

Go to github.com/signup:

1. Email: an address you can open right now. GitHub sends you a code
2. Password: long and new, not your university password
3. Username: your public name, as in github.com/username. Keep it professional (e.g. mariam-ahmed)
4. Country/Region: where you live
5. Continue: next, solve the short puzzle, then type the code from your email

1. Repository template: leave it as No template
2. Owner: you
3. Repository name: my-first-app. GitHub shows ✓ if the name is free
4. Description (optional): one line about the project
5. Public / Private: pick Public today so your TA can see it. Private = only people you invite
6. README / .gitignore / License: leave them all off. Your project already has them
7. Create repository

GitHub does not accept your password in the terminal. It wants a token: a long, secret password made just for Git.

1. Note: a name so you remember what it’s for, e.g. mobile-dev-laptop
2. Expiration: 90 days lasts the whole semester
3. repo: tick it. This lets the token push to your repositories
4. Generate token

1. GitHub shows the token only once
2. Copy it now and keep it somewhere safe. If you lose it, just make a new one

Sign in when asked. On Windows this window pops up:

1. Click the Token tab
2. Paste your token
3. Sign in. Windows remembers it for next time

On macOS or Linux the terminal asks instead. Paste the token as the password. Nothing shows while you paste; that’s normal:

Add a footer under the button in app/index.tsx:

      <Pressable style={styles.button} onPress={() => setCount(count + 1)}>
        <Text style={styles.buttonText}>Tapped {count} times</Text>
      </Pressable>

      <Text style={styles.footer}>Made by Your Name</Text>
    </View>
  );
}
// … and inside StyleSheet.create:
  footer: { color: '#666', fontSize: 12 },

Checkpoint

9:41

Hello, Mariam 👋MariamTapped 3 timesMade by Mariam

Open your repo on GitHub:

1. Compare & pull request: GitHub noticed your new branch. Click the green button

1. base: main: the branch that receives the changes
2. compare: feature/add-footer: the branch that gives the changes
3. Able to merge: no conflicts, safe to merge
4. Title: what this change does
5. Description: optional, a short explanation
6. Create pull request

1. Merge pull request: joins your branch into main
2. Confirm merge: click to confirm
3. Merged ✓. You can now Delete branch; its commits are safe inside main