React Native JavaScript Essentials

React Native apps run on JavaScript. Every button, list, and screen you build uses JavaScript syntax. A small set of modern features covers most of the code you write each day. Learn these features once and every later topic becomes easier to read.

The Toolkit at a Glance

JavaScript Feature     → Where You Use It in React Native
─────────────────────────────────────────────────────────
const / let            → Store screen data and settings
Arrow functions        → Handle button taps
Array methods          → Turn data into list items
Destructuring          → Pull values out of props
Spread operator        → Copy and update state
async / await          → Load data from the internet
import / export         → Share components between files

Variables with const and let

A variable is a labeled box that holds a value. Use const for a value that never gets reassigned. Use let for a value that changes over time. Avoid var, an older keyword that behaves in surprising ways.

const appName = 'Daily Notes';
let taps = 0;
taps = taps + 1;

Most variables in a React Native app use const. A const object can still change its inner contents, but the label itself always points to the same object.

Functions and Arrow Functions

A function packs a set of steps under one name. Call the name whenever you need those steps. Arrow functions give a shorter way to write the same idea, and React Native code uses them everywhere.

function add(a, b) {
  return a + b;
}

const addShort = (a, b) => a + b;

const sayHello = () => {
  console.log('Hello from the app');
};

A button tap handler is a typical arrow function: onPress={() => setCount(count + 1)}. The arrow carries the instruction until the user taps.

Arrays and Common Methods

An array stores an ordered list of values. Three methods appear in almost every app: map, filter, and find.

map: Transform Every Item

map walks through each item and builds a new array from the results. React Native uses it to turn data into visible components.

const prices = [10, 20, 30];
const withTax = prices.map((p) => p * 1.1);

[10, 20, 30]
   │   │   │
   ▼   ▼   ▼     (multiply each by 1.1)
[11, 22, 33]

filter: Keep Matching Items

filter keeps only the items that pass a test. A task app uses it to show unfinished tasks.

const tasks = [
  { id: 1, title: 'Buy milk', done: true },
  { id: 2, title: 'Write code', done: false },
];
const pending = tasks.filter((t) => !t.done);

find: Locate One Item

find returns the first item that matches. Use it to look up a product by its id.

Objects

An object groups related facts under named keys. Picture a contact card with a name, phone number, and city on it. Props, state, and style rules all take the object form in React Native.

const user = {
  name: 'Asha',
  city: 'Pune',
  age: 24,
};
console.log(user.name);

Destructuring

Destructuring pulls values out of an object or array in a single line. It removes repeated typing and keeps component code tidy.

const { name, city } = user;
const [count, setCount] = useState(0);

The second line appears in nearly every screen you will write. It unpacks a pair of values from the useState hook.

Spread Operator

Three dots copy the contents of an array or object into a new one. React Native state must never change in place, so spread helps you build an updated copy.

const updatedUser = { ...user, city: 'Delhi' };
const moreTasks = [...tasks, { id: 3, title: 'Walk', done: false }];

Old user  : { name: Asha, city: Pune  }
                │
        spread + change city
                ▼
New user  : { name: Asha, city: Delhi }

Template Strings

Backticks let you mix text and values without messy plus signs. Wrap a value inside ${} and JavaScript inserts it.

const message = `Hello ${user.name}, welcome to ${user.city}`;

Async and Await

Some jobs take time, such as loading data from a server. JavaScript lets the app keep running while it waits. Mark a function with async and place await before the slow step. The function pauses at that line and resumes when the result arrives.

const loadUser = async () => {
  try {
    const response = await fetch('https://example.com/user');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Something went wrong');
  }
};

Think of ordering food at a restaurant. You place the order and chat with friends while the kitchen cooks. The meal arrives when it is ready, and you never stand frozen at the counter.

Import and Export

Large apps split code across many files. Use export to share a piece and import to bring it into another file.

// Greeting.js
export default function Greeting() {
  return null;
}

// App.js
import Greeting from './Greeting';

Greeting.js ──export──► App.js
Button.js   ──export──► App.js

Summary

Seven JavaScript features power most React Native code: const and let, arrow functions, array methods, object destructuring, the spread operator, async and await, and import and export. Practice each in a small test file until the syntax feels natural.