⚛️ JSX Basics in React Native

? Quick Overview

JSX (JavaScript XML) is a syntax extension used in React Native that allows you to write UI code that looks similar to HTML inside JavaScript. It makes component structure easier to read and understand while still using the power of JavaScript.

? Key Concepts

JSX is not HTML, it is JavaScript syntax
JSX elements are compiled to React.createElement()
Only one root element is allowed per component
JavaScript expressions can be embedded using curly braces {}

? Syntax / Theory

In React Native, JSX is used to describe UI using components like View, Text, and Image. Unlike web React, React Native does not use HTML tags such as div or span.

? Code Example(s)

? View Code Example

// Basic JSX structure in a React Native component
import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
return (
<View>
<Text>Hello JSX</Text>
</View>
);
};

export default App;

? Live Output / Explanation

The above JSX renders a simple screen with the text Hello JSX. JSX tags are converted into native UI components by React Native at runtime.

? Interactive Example

Concept: Conditional Rendering. Click the button below to see how JSX dynamically switches text using a ternary operator ? :.

John Doe

React Native Developer

Component Logic:

// 1. State Variable

const [isFollowing, setFollowing] = useState(false);

// 2. JSX Return

<Button

title={ isFollowing ? "Unfollow" : "Follow" }

onPress={() => setFollowing(!isFollowing)}

? Use Cases

Creating UI layouts in React Native apps
Embedding dynamic data inside UI components
Conditional rendering using JavaScript logic
Building reusable components

✅ Tips & Best Practices

Always wrap JSX inside a single parent element
Use {} to insert JavaScript expressions
Keep JSX clean and readable
Split large JSX blocks into smaller components

? Try It Yourself

Create a component that displays your name using JSX
Add a button that changes text on press
Use a JavaScript expression inside JSX
Wrap multiple elements using a parent View