Intro to JSX

Basics

Consider the following:

const element = <div>Hello World</div>;

It looks like a mix of javascript and HTML, and it is called JSX, which you will see a lot in React based applications. It contains an opening tag and a closing tag.

In React Native, the idea behind it the same, except the syntax might be slightly different:

import { Text } from 'react-native';

const element = <Text>Hello World</Text>;

In this example, we declare a variable name and embed it inside the JSX element with curly brackets:

import { Text } from 'react-native';

const name = "Justin";
const element = <Text>Hello {name}</Text>;

JSX can contain children:

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

const name = "Justin";

const element = (
    <View>
        <Text>Hello {name}</Text>
        <Text>Nice to meet you!</Text>
    <View>
);

Components

Components are independent and reusable bits of code.

import { Text } from 'react-native';

const TestComponent = () => {
    const name = "Justin";

    return (
        <View>
            <Text>Hello {name}</Text>
        </View>
    );
}