React Native 101: JavaScript for React Native

2.0 Introduction

React Native is mostly JavaScript. This lesson covers the modern JS patterns you will use constantly: variables, conditionals, arrays with .map(), objects, functions, and async fetch.

Lesson 2 - Overview

  1. let, const, and templates
  2. Operators and conditionals
  3. Arrays and .map()
  4. Objects and destructuring
  5. Functions and arrow functions
  6. async / await and fetch
Project Overview
  1. Lottery Numbers — Generate 6 random numbers and show them
  2. Multiplication Quiz — Random problems; check answers
  3. Number Memorizer — Show a number briefly, then quiz recall
  4. Grocery List data — Array of items; map to Text rows
  5. Friend Facts — Array of objects; display name + fun fact
  6. Joke Fetcher — fetch a joke from a public API

JavaScript for React Native

2.1 let, const, and templates

  • const — value you will not reassign (preferred default)
  • let — value that may change
  • Avoid var in new code

Project 2.1: Lottery Numbers

On button press, create 6 random integers (1–49), store in an array, and display them with Text (join or map).

JavaScript for React Native

2.2 Operators and conditionals

Project 2.2: Multiplication Quiz

Generate two random factors. User types answer. Tell them correct or incorrect. Track streak or score with useState.

JavaScript for React Native

2.3 Arrays and .map()

Arrays hold ordered lists. In RN you almost always render lists with .map() (or FlatList in Lesson 4).

Always give mapped elements a stable key when possible.

Project 2.3: Number Memorizer

Show a random multi-digit number for 2 seconds, hide it, ask the user to type it back. Compare strings/numbers.

Project 2.4: Grocery List data

Hard-code an array of grocery strings. Map each to a Text line on screen.

JavaScript for React Native

2.4 Objects and destructuring

Project 2.5: Friend Facts

Map an array of friend objects to Text showing name and fun fact.

JavaScript for React Native

2.5 Functions and arrow functions

Event handlers in RN are usually arrow functions passed to onPress / onChangeText.

JavaScript for React Native

2.6 async / await and fetch

Network calls are asynchronous. Use async/await with fetch:

Project 2.6: Joke Fetcher

Button that fetches a joke and displays setup + punchline. Handle loading and errors.

Create the following programs before moving on. Check answers when stuck.

Prior Lesson Next Lesson