React Native Basics

React Native uses the same component model as React, but renders native platform components instead of HTML.

Functional Components (Preferred)

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

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  )
}

export default MyComponent

JSX

JSX is a syntax extension that lets you write XML-like code inside JavaScript:

// This JSX:
const element = <Text>Hello!</Text>

// Compiles to:
const element = React.createElement(Text, null, 'Hello!')

Hooks over Classes

React Native uses hooks (introduced in React 16.8) — functional components with hooks are the modern way:

import React, { useState } from 'react'
import { View, Text, Button } from 'react-native'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="+" onPress={() => setCount(count + 1)} />
    </View>
  )
}