Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Introduction to React Native  ›  Capstone Project

The JavaScript You Need

JavaScript Basics 14 minReact Native code relies on a small set of modern JavaScript features: const and let, arrow functions, destructuring, array methods like map and filter, modules, spread and async/await.

The JavaScript You Need

React Native code is modern JavaScript from top to bottom. You do not need to know the whole language, but a handful of features appear on every screen of Sprout. If any of them look strange, the rest of the course will too.

The rule

Know five moves: const, arrows, destructuring, map, and await.

Here they are in one small piece of Sprout:

const plants = [
  { id: 'p1', name: 'Fern', everyDays: 3 },
  { id: 'p2', name: 'Cactus', everyDays: 14 },
];

const label = ({ name, everyDays }) => `${name}: every ${everyDays} days`;

const labels = plants.map(label);

async function loadPlants() {
  const response = await fetch('https://example.com/plants.json');
  return response.json();
}
  • const and let. Use const for names that are never reassigned and let for those that are. Avoid var.
  • Arrow functions. (x) => x * 2 is a short function. Components and event handlers are often arrows.
  • Destructuring. ({ name, everyDays }) pulls fields out of an object. Props arrive this way: function PlantCard({ name }).
  • map and filter. Arrays of data become arrays of results. plants.filter(p => p.everyDays < 7) keeps thirsty plants.
  • async and await. Network calls return promises. await waits for the result without freezing the app.

Two more you will see constantly: modules (import and export) to split code into files, and the spread operator ... to copy an object with a change, as in { ...plant, name: 'Boston fern' }.

On the styling side, you need only a little CSS knowledge: names like padding, margin, color and Flexbox. React Native borrows those ideas but writes them in JavaScript objects, which a later section covers.

The shortcut

When you read a line of React Native code, name the move before worrying about the meaning. Once you spot "that is destructuring" or "that is a map", the line becomes easy.

Reading one line of SproutStep 1 of 4

  1. The line

    const thirsty = plants.filter(({ everyDays }) => everyDays < 7);

The usual trap is await outside an async function, or forgetting it, so you get a promise object where you expected data.

Drills

Answer fast — trust the rule.

quick drill

What does plants.map(p => p.name) return for Sprout's two plants?

quick drill

Which line pulls name straight out of a props object?

quick drill

A name will be reassigned later in the function. Which keyword fits best?

quick drill

What does { ...plant, everyDays: 5 } produce?

quick drill

Inside loadPlants, what happens if you drop await before fetch(...)?

Remember

  • Five moves: const, arrow functions, destructuring, map/filter, async/await.
  • Name the move first, then read the meaning.
  • Trap: a missing await hands you a promise instead of data.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainName the moves

Explain what this line does and name each JavaScript feature in it: const names = plants.filter(({ everyDays }) => everyDays <= 7).map(p => p.name);