React Native variables and values

Name and store information so the program can use and change it later.

Chapter goal: Name and store information so the program can use and change it later.

Simple explanation

A variable is a labelled box. The label is the variable name, and the value inside is the information your program needs to remember.

In React Native, this chapter is about giving useful names to values and understanding when a value may change. Start with the idea above. Then connect each symbol to a value or action in the example.

Do not try to remember every symbol. First ask what data the program has, what it does with that data, and what result it creates. Technical words become easier when you connect them to those three questions.

Why this topic is important

Variables connect almost every instruction. Without them, a program cannot remember a name, score, price, setting, or result. In React Native, the syntax may look different from other languages, but the thinking skill transfers: name the data, choose the right operation, and make the next step obvious.

When to use it

Use variables for form input, game health, shopping totals, loading states, configuration, and calculated results.

Example code

const price = 5;
const quantity = 3;
const total = price * quantity;
console.log(`Total: ${total}`);

Line-by-line explanation

• const price = 5; — This stores or updates price. The value on the right is worked out first, then saved under that name.
• const quantity = 3; — This stores or updates quantity. The value on the right is worked out first, then saved under that name.
• const total = price * quantity; — This stores or updates total. The value on the right is worked out first, then saved under that name.
• console.log(\Total: ${total}`);` — This line supports one focused piece of application logic. Read it together with the block directly around it.

What the output means

Total: 15

The output is evidence that the program followed the instructions. If your result is different, read from the first line and write down how each value changes. That is debugging, not failure.

Mistake example

const x = 5;
const y = 3;
const z = x * y;
console.log(z); // unclear names

The calculation works, but names such as x, y, and z hide what the values mean. A beginner or teammate must guess the purpose of each variable.

Fixed version

const price = 5;
const quantity = 3;
const total = price * quantity;
console.log(`Total: ${total}`);

The corrected version uses price, quantity, and total, so the calculation explains itself.

Common mistakes

• Choosing names that do not explain the value.
• Changing a value that should stay constant.
• Reading a variable before it has a valid value.

Warning: Change one part at a time. If you change many lines together, it becomes harder to learn which change caused the result.

Real use cases

• Store a signed-in user name.
• Track a counter or game score.
• Keep the result of an API or database query.

Practice exercise

1. Change the price and quantity, then calculate the new total.
2. Rename each variable so its purpose is clear.
3. Create one value that must not change.

Tip: If the exercise feels too large, complete only steps 1 to 3. Small working code teaches more than a large unfinished project.

Mini quiz

1. Which side of = is calculated first?
2. What is the difference between a name and its value?
3. Which variable name is clearer: x or totalPrice?

How to read AI-generated code

Do not copy AI code first. Read it like a detective. Find the data, follow the changes, and locate the final output. Ask AI to explain a line only after you have made your own guess.

• What data goes in?
• What values are stored?
• What calculation or decision happens?
• What is printed, displayed, saved, or returned?
• What can go wrong?
• Can you rename one value and still explain the code?

React Native reading check

Find the component inputs (props), changing values (state), event handlers, and effects. An effect that fetches data must also handle loading, failure, and a component that leaves the screen.

Before you move on

• I can explain this topic in my own words.
• I can read the small example without AI.
• I can change the example and predict the new result.
• I can find and fix one simple mistake.
• I can name one real project that uses this idea.

Next topic

Next, learn operators and expressions. Before opening it, explain this chapter out loud in under one minute.