React Native basic project

Connect variables, decisions, loops, functions, and collections in one small working program.

Chapter goal: Connect variables, decisions, loops, functions, and collections in one small working program.

Simple explanation

A small project is a practice workshop. It connects several basic skills in one useful program without adding too many features.

In React Native, this chapter is about combining the beginner concepts without making the project too large. 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

A project reveals whether you can connect ideas instead of recognizing them one at a time. 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

Build a calculator, score tracker, to-do list, inventory, command, form, or simple mobile screen.

Example code

const scores = [72, 95, 40];

function grade(score) {
  if (score >= 80) return "strong";
  if (score >= 50) return "passing";
  return "needs work";
}

scores.forEach((score) => console.log(`${score}: ${grade(score)}`));

Line-by-line explanation

• const scores = [72, 95, 40]; — This stores or updates scores. The value on the right is worked out first, then saved under that name.
• function grade(score) { — This defines a reusable function. Its name describes the job that other code can call.
• if (score >= 80) return "strong"; — This checks a true-or-false condition. The controlled block runs only when that condition is true.
• if (score >= 50) return "passing"; — This checks a true-or-false condition. The controlled block runs only when that condition is true.
• return "needs work"; — This sends a result back to the code that called the function. Returning is different from printing.
• scores.forEach((score) => console.log(\${score}: ${grade(score)}`));— This stores or updatesscores.forEach((score)`. The value on the right is worked out first, then saved under that name.

What the output means

72: needs work
95: strong
40: needs work

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 scores = null; // too many features are placed in one large block

function grade(score) {
  if (score >= 80) return "strong";
  if (score >= 50) return "passing";
  return "needs work";
}

scores.forEach((score) => console.log(`${score}: ${grade(score)}`));

This version intentionally shows how too many features are placed in one large block. The changed assignment stores a missing value, or a required line is removed, so later code cannot complete its job safely.

Fixed version

const scores = [72, 95, 40];

function grade(score) {
  if (score >= 80) return "strong";
  if (score >= 50) return "passing";
  return "needs work";
}

scores.forEach((score) => console.log(`${score}: ${grade(score)}`));

The corrected version restores the real value or required operation. It fixes the chapter-specific problem: too many features are placed in one large block.

Common mistakes

• Starting with too many features.
• Writing everything in one function.
• Adding storage or login before the basic flow works.

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

• Create a portfolio starter project.
• Practice explaining a complete data flow.
• Turn a tutorial into your own version.

Practice exercise

1. Add one small feature to your project without breaking the existing flow.
2. Remove one feature and confirm the rest still works.
3. Explain your project's data flow from input to final output in three sentences.

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. Find the bug: what would happen if the loop ran before the data was ready?
2. Which single feature could you remove and still have a working program?
3. Choose the correct fix: should validation be added before or after the first working version exists?

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 debugging step by step. Before opening it, explain this chapter out loud in under one minute.