# React Native से आना

> Java कोड में JSX/useState→Component मैपिंग, बिना bridge और बिना hot-reload के।

Source: https://crossfly.dev/hi/docs/migrate/from-react-native — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# React Native से आना

RN में आप UI को **JSX** में वर्णित करते हैं और स्टेट बदलने पर री-रेंडर होता है। CrossFly में UI
**Java कोड** है जो एक बार माउंट होता है, और आप **म्यूट** करते हैं। पहले [दर्शन](/docs/migrate/overview) पढ़ें।

## अनुवाद तालिका
| React Native | CrossFly |
|---|---|
| फ़ंक्शनल कंपोनेंट + JSX | `onShow()` में माउंट किया गया `Window`/`Component` का सबक्लास (बिना markup के) |
| `useState` / री-रेंडर | फ़ील्ड + `repaint()` |
| `props` | **कंस्ट्रक्टर** आर्गुमेंट्स (बिना रूट टेबल के) |
| `<View>` / `<Text>` / `<Image>` | `Component` / `Label` / `ImageView` |
| `<FlatList>` | `VirtualListView` |
| `flexbox` (`flex: 1`) | `add(LAY_FILL, c)` + `VerticalLayout`/`HorizontalLayout` |
| `StyleSheet` | `ComponentStyle` / `Skin` (`ingap`/`outgap` = padding/मार्जिन) |
| `react-navigation` | `Window` का स्टैक (`show()` / `hide()`) |
| `useEffect` / `Promise` / `async` | `Thread` + `Component.onUI(...)` |
| `AsyncStorage` | **कोई समकक्ष नहीं** → SQLite या `Device.homeFolder` में फ़ाइलें |

## पहले कैसा था / अब कैसा है — सूची
```jsx
// React Native
function Lista({ itens }) {
   return <FlatList data={itens}
      renderItem={({ item }) => <Text>{item.nome}</Text>} />;
}
```
```java
// CrossFly — props कंस्ट्रक्टर आर्गुमेंट बन जाते हैं; UI Java में
public class Lista extends Window {
   private final List<Item> itens;
   public Lista(List<Item> itens) { this.itens = itens; }   // "props"
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), new DataAdapter() {
         public int getCount() { return itens.size(); }
         public Component createView() { return new Label(""); }
         public void bindView(Component v, int i) { ((Label) v).setText(itens.get(i).nome); }
      }));
   }
}
```

## और क्या बदलता है
- **कोई JS *bridge* नहीं और कोई hot-reload नहीं** — यह संकलित Java है (डेस्कटॉप पर चक्र तेज़ है; देखें
  [प्लेटफ़ॉर्म](/docs/platforms))।
- **`props` → कंस्ट्रक्टर:** डेटा `new Tela(dados)` के ज़रिए पास करें और `.show()` कॉल करें।
- **`StyleSheet` → `ComponentStyle`:** padding/मार्जिन `ingap`/`outgap` हैं, flex की प्रॉपर्टीज़ नहीं।

## यह भी देखें
- [स्क्रीनों के बीच नेविगेट करें](/docs/ui/navigation/navigate-between-screens) · [परफ़ॉर्मेंस और सूचियाँ](/docs/best-practices/performance-e-listas-grandes)