Chapter 2: Components and JSX

Hello again, fellow developers! I hope you’re as excited as I am to dive deeper into React Native. In our first chapter, we got our development environment set up and created a simple "Hello, React Native!" app. Today, we’re going to explore the building blocks of any React Native application: components and JSX.

2.1 What Are Components?

In React Native, everything you build is made up of components. Think of components as the Lego blocks of your app. Each component represents a part of your user interface (UI). There are two types of components: Functional Components and Class Components.

Functional Components: These are JavaScript functions that return JSX. They are simple and easy to read.

Class Components: These are ES6 classes that extend React.Component and must include a render method that returns JSX. Class components are more feature-rich but can be more complex to write and understand.

Let's start with an example of a functional component.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const WelcomeMessage = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

export default WelcomeMessage;

In this example, WelcomeMessage is a functional component that returns a View containing Text element.

2.2 What is JSX?

JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that looks similar to HTML. With JSX, you can write UI elements in a syntax that’s familiar to web developers. JSX is transformed into JavaScript code that React Native can understand.

Here’s a simple example of JSX:

const greeting = <Text>Hello, World!</Text>;

Under the hood, this JSX code is transformed into a React.createElement call:

const greeting = React.createElement(Text, null, 'Hello, World!');

2.3 Creating Components with JSX

Let’s combine what we’ve learned so far and create a simple app that uses multiple components. We’ll build a small app that displays a welcome message and a list of items.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const WelcomeMessage = () => {
  return (
    <View style={styles.welcomeContainer}>
      <Text style={styles.welcomeText}>Welcome to React Native!</Text>
    </View>
  );
};

const ItemList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <View style={styles.listContainer}>
      {items.map((item, index) => (
        <Text key={index} style={styles.listItem}>{item}</Text>
      ))}
    </View>
  );
};

export default function App() {
  return (
    <View style={styles.container}>
      <WelcomeMessage />
      <ItemList />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  welcomeContainer: {
    marginBottom: 20,
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  listContainer: {
    alignItems: 'center',
  },
  listItem: {
    fontSize: 18,
    marginVertical: 5,
  },
});

In this code:

• WelcomeMessage is a component that displays a welcome message.

• ItemList is a component that maps over an array of items and displays each one as an Text element.

• App is the main component that renders WelcomeMessage and ItemList.

2.4 Styling Your Components

In React Native, you style your components using JavaScript objects. These objects are similar to CSS but with some differences. For example, instead of using background-color, you use backgroundColor.

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

It would help if you now had a basic understanding of components and JSX in React Native. Components are the building blocks of your app, and JSX makes writing UI elements feel familiar and intuitive.

In the next chapter, we’ll explore state and props, two crucial concepts that allow your components to be dynamic and interactive.

Happy coding!