React Native syntax and data types

Rules, names, strings, numbers, booleans, and the type habits that keep code predictable.

Chapter goal: Rules, names, strings, numbers, booleans, and the type habits that keep code predictable.

Simple explanation

Syntax is the grammar of code. A data type is a label that tells the program whether a value is text, a number, a true-or-false answer, or something more complex.

In React Native, this chapter is about writing valid statements and choosing the right kind of data. 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

Types tell the program what operations are allowed and help you catch mistakes early. 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 types whenever you store user input, scores, prices, settings, or any value that must behave consistently.

Example code

const title = "Starter Pack";
const lessons = 12;
const published = true;
const rating = 4.8;

Line-by-line explanation

• const title = "Starter Pack"; — This stores or updates title. The value on the right is worked out first, then saved under that name.
• const lessons = 12; — This stores or updates lessons. The value on the right is worked out first, then saved under that name.
• const published = true; — This stores or updates published. The value on the right is worked out first, then saved under that name.
• const rating = 4.8; — This stores or updates rating. The value on the right is worked out first, then saved under that name.

What the output means

No visible output: the example creates four typed values but does not print them.

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 age = "20";
const nextYear = age + 1; // "201", not 21

The code mixes text and numeric work. A value that looks like a number can still be text, so the program must store or convert it correctly.

Fixed version

const age = 20;
const nextYear = age + 1;
console.log(nextYear);

The corrected version stores age as a number, so adding one performs arithmetic.

Common mistakes

• Mixing text and numbers without converting.
• Using vague names like data or value everywhere.
• Forgetting that a number and a numeric string are different.

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 profile information.
• Calculate totals.
• Validate settings before running a feature.

Practice exercise

1. Create one text, number, decimal, and boolean value.
2. Convert numeric text before calculating with it.
3. Explain why "5" and 5 behave differently.

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. Is "42" text or a number?
2. Which type stores true or false?
3. Why can a type conversion fail?

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 variables and values. Before opening it, explain this chapter out loud in under one minute.