The code you saw in the last chapter probably looked a bit like HTML, but was JavaScript. This chapter explains exactly what's going on with this mix – called JSX – and which React Native building block corresponds to which HTML element.

What is JSX?

JSX is an extension of JavaScript that lets you write HTML-like syntax directly in your JavaScript code. Behind the scenes, JSX gets converted into regular JavaScript function calls – but you don't need to worry about that, Expo handles it automatically.

// You write:
function Welcome() {
  return <Text>Hello World!</Text>;
}

// This happens behind the scenes (simplified):
function Welcome() {
  return React.createElement(Text, null, "Hello World!");
}

The most important building blocks, compared to HTML

React Native ships with a fixed set of built-in components, each of which becomes a real native UI element on iOS/Android. The most important ones, side by side with HTML:

Extending App.js: our first real component

Instead of a loose example, let's build this directly into our real project: open the App.js from the last chapter and replace its entire content with this version:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to the product catalog</Text>
      <Text>Discover our products.</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 8 },
});

Save and check your phone – Fast Refresh shows the change instantly. Translated line by line: View corresponds to a <div> wrapping both pieces of text. Each text sits in its own Text element (comparable to two <p> tags). style={{styles.title}} corresponds to class="title" in HTML – more on that in the next chapter about styling.

Your own components: a preview

A "component" is simply a JavaScript function that returns JSX – exactly like our App function above. Large apps consist of many small components that use each other, similar to how a website can be assembled from reusable HTML building blocks. Two chapters from now, we'll move part of App.js out into our first own, reusable component: components/ProductCard.js.