Modern JS & JSX Essentials

Previous Next

React Native code leans heavily on modern JavaScript (commonly called ES6+, after the 2015 ECMAScript update and later additions) and on JSX, a syntax extension that lets you describe UI in a markup-like way inside JavaScript. Almost every example you'll see from here on uses arrow functions, destructuring, the spread operator, and JSX — so this lesson is a focused refresher on exactly those pieces before we touch a single React Native component.

Arrow Functions

Arrow functions are a shorter syntax for writing functions, and they're the default style used throughout React and React Native code.

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

// arrow function equivalent
const add = (a, b) => a + b;

// arrow function with a block body
const greet = (name) => {
  const message = 'Hello, ' + name;
  return message;
};

When an arrow function's body is a single expression (no {}), it's returned automatically — that's why (a, b) => a + b needs no explicit return.

Destructuring

Destructuring pulls values out of objects or arrays into their own named variables, and it's used constantly in React Native for both props and hooks.

// object destructuring
const user = { name: 'Alice', age: 28 };
const { name, age } = user;
// name === 'Alice', age === 28

// array destructuring (this exact pattern powers React state, covered next lesson)
const [count, setCount] = useState(0);
// count is the current value, setCount is a function that updates it

Foreshadowing: That array destructuring line is exactly how the useState hook works — the next lesson but one covers it in full.

Spread and Rest Operators

The same ... syntax means two different things depending on where it's used: spreading values OUT of an object/array, or gathering remaining values INTO one.

// spread: copy all of an object's properties into a new object, then override one
const defaultStyle = { color: 'black', fontSize: 14 };
const bigRedStyle = { ...defaultStyle, color: 'red', fontSize: 28 };

// spread: forward every prop a component received down to a child
<TextInput {...props} />

// rest: gather the remaining array items after the first
const items = ['apple', 'banana', 'cherry'];
const [first, ...rest] = items;
// first === 'apple', rest === ['banana', 'cherry']

Template Literals

Backtick-delimited strings let you embed expressions directly with ${}, instead of concatenating with +.

const name = 'Alice';
const greeting = `Hello, ${name}!`;
// greeting === "Hello, Alice!"

const itemCount = 3;
const label = `You have ${itemCount} item${itemCount !== 1 ? 's' : ''} in your cart`;

Import and Export: Sharing Code Between Files

React Native projects are split across many files, and import/export is how those files share code. There are two flavors, and knowing which one a module uses matters when you import it.

Style	Exporting	Importing
Default export	`export default function App() {}`	`import App from './App';` — name can be anything on import
Named export	`export function add(a, b) {}`	`import { add } from './math';` — name must match exactly

// importing React Native's built-in components uses named exports
import { View, Text } from 'react-native';

// importing your own component usually uses a default export
import Greeting from './Greeting';

A file can mix both — one default export plus any number of named exports.

What JSX Actually Is

JSX looks like HTML sitting inside JavaScript, but it isn't HTML at all — it's syntax sugar that compiles down to plain JavaScript function calls. This is worth understanding once so JSX stops feeling like magic.

// what you write:
const element = <Text>Hello</Text>;

// roughly what it compiles to:
const element = React.createElement(Text, null, 'Hello');

That's the whole trick — every JSX tag becomes a call describing which component to render, what props to give it, and what's nested inside it. You never write React.createElement by hand; the build tooling (Babel) does that translation for you automatically.

JSX Rules That Differ From HTML

No className: React Native has no CSS classes at all, so className doesn't exist here. Use the style prop instead (covered in depth in the Styling lesson).
Every element must be closed: <View /> is required, not <View> left dangling — self-closing tags need the trailing slash.
JavaScript goes inside curly braces: any expression — a variable, a function call, a ternary — is embedded with {}.

function Profile({ name, avatarUrl }) {
  return (
    <View style={{ padding: 16 }}>
      <Image source={{ uri: avatarUrl }} />
      <Text>{name}</Text>
    </View>
  );
}

Conditional Rendering in JSX

JSX has no if statement built in, so conditional UI relies on two JavaScript expression patterns instead.

// && renders the right-hand JSX only when the condition is true
{hasUnreadMessages && <Text>You have new messages</Text>}

// ternary renders one of two branches
{isLoggedIn ? (
  <Text>Welcome back!</Text>
) : (
  <Text>Please log in</Text>
)}

Note: These are correct, real JSX patterns — but this website's own project doesn't run a React Native build, so treat every snippet in this track as copy-into-your-own-project reference code rather than something executing live on the page.

Next up: With the JavaScript and JSX groundwork in place, it's time to build real components — head to Components & Props.

Previous Next