React Native 101: Quick Start 1.0 Intro Mobile UI building blocks Components — reusable pieces of UI (like custom Lego bricks) JSX — the HTML-looking syntax inside React Native files Props — data passed into a component from its parent State — data a component owns and can change over time Lesson 1 - Overview Install Expo and create an app Hello World on your phone JSX and components Props TextInput and Alert useState basics Comments and file structure Cursor / VS Code tips Running on iOS, Android, and web Project Overview Hello World — Show text on screen and celebrate your first RN app Greet User — Type a name and greet them with Alert Tip Calculator — Bill + tip % → tip dollars and total Age Gate — Enter age; allow or deny based on 21+ Counter App — Increment / decrement with useState Try each project yourself, then check Answers. React Native 101: Quick Start 1.1 Install Expo & create an app Install Node.js (LTS). Then in Terminal: Scan the QR code with the Expo Go app (iOS App Store / Google Play), or press i / a for simulator/emulator if you have them. Open the project folder in Cursor or VS Code. Your main screen usually lives in App.js or app/index.tsx depending on the Expo template. React Native 101: Quick Start 1.2 Hello World on your phone Replace your App component body with something like: Project 1.1: Hello World Show a greeting on the screen. Run it in Expo Go. Congrats — that is a real mobile UI! React Native 101: Quick Start 1.3 JSX and components JSX looks like HTML but is JavaScript. In React Native you use View instead of div, and Text instead of bare text or p / span. A component is a function that returns JSX: Rules of thumb: Components start with a capital letter All text must be inside <Text> You return one parent element (or a Fragment) React Native 101: Quick Start 1.4 Props Props are inputs to a component — like function arguments: Parent decides the value; child displays it. Props flow down. React Native 101: Quick Start 1.5 TextInput and Alert Web coding uses prompt() and alert(). In React Native: TextInput — type on screen Alert.alert(...) — system dialog Project 1.2: Greet User Ask for a name with TextInput. On button press, Alert a greeting. Project 1.3: Tip Calculator Two TextInputs: bill amount and tip percent. Show tip dollars and total (you can use Text on screen or Alert). Project 1.4: Age Gate Ask for age. If 21 or older, say they can enter; otherwise deny. React Native 101: Quick Start 1.6 useState basics useState lets a component remember values that change when the user interacts: Project 1.5: Counter App Show a number. Buttons for +1, −1, and Reset to 0. React Native 101: Quick Start 1.7 Comments and file structure Comments in JS/JSX: Typical Expo app layout: App.js or app/ — entry screens components/ — reusable UI pieces (create this folder yourself) assets/ — images, fonts package.json — dependencies React Native 101: Quick Start 1.8 Cursor / VS Code tips Open the project folder, not a single file Use the built-in terminal for npx expo start Save often — Expo Fast Refresh usually updates the phone automatically Red screen / yellow box: read the error; it often names the file and line Ask Cursor: “Explain this Expo error” and paste the stack trace React Native 101: Quick Start 1.9 Running on iOS, Android, and web Physical device: Expo Go + same Wi‑Fi as your computer iOS Simulator: Mac + Xcode; press i in the Expo terminal Android Emulator: Android Studio; press a Web: press w — useful for quick layout checks, not identical to native Create the Lesson 1 projects and try them on a real device before moving on. Stuck? Email questions@upriseuniversity.com Prior Lesson Next Lesson