JSX & Core Components

What is JSX?

JSX is a syntax that lets you write UI that looks like HTML directly inside JavaScript. It isn’t HTML — it’s converted into function calls — but it reads naturally and is how you describe what a component renders.

function Welcome() {
  const name = "Anand";
  return <Text>Hello, {name}!</Text>;   // {} embeds JavaScript
}

Inside JSX, curly braces { } let you drop in any JavaScript value or expression — variables, calculations, function calls.

The core components (your “HTML tags”)

React Native gives you native components instead of HTML elements. The essential ones:

• <View> — a container, like a div. The basic building block for layout.
• <Text> — displays text. All text must live inside this.
• <Image> — shows images (local or from a URL).
• <ScrollView> — a scrollable container for content that overflows.
• <TextInput> — a field for typing.
• <Pressable> / <Button> — respond to taps.

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

function Card() {
  return (
    <View>
      <Image source={{ uri: 'https://example.com/pic.png' }}
             style={{ width: 80, height: 80 }} />
      <Text>Anand Gaur</Text>
      <Pressable onPress={() => console.log('tapped')}>
        <Text>Follow</Text>
      </Pressable>
    </View>
  );
}

JSX rules to remember

• A component must return one root element. Wrap siblings in a <View> or a fragment <>...</>.
• Use style={{ }} (an object), not a CSS string.
• Attributes use camelCase: onPress, numberOfLines.
• Self-close tags with no children: <Image ... />.

Conditional and list rendering

{isLoggedIn ? <Text>Welcome</Text> : <Text>Please log in</Text>}

{showBadge && <Text>NEW</Text>}   // render only if true

{items.map((item) => (
  <Text key={item.id}>{item.name}</Text>   // key is required in lists
))}

Common mistakes

• Putting bare text outside a <Text> (a very common error/crash).
• Returning multiple root elements without a wrapper/fragment.
• Forgetting key when rendering lists with .map().

Summary: JSX lets you write UI in JavaScript, embedding values with { }. Use native components — View, Text, Image, ScrollView, Pressable — instead of HTML, return a single root, and remember text always goes inside <Text>.