The Basics
Core Components
React xNFT has several core components, many of which correspond to UI elements you would normally use in React, React Native, or one of it's frameworks (e.g., Material UI). Here are some of the most commonly used primitives provided.
| React xNFT | React | Description |
|---|---|---|
<View> | <div> | A container for other UI elements. |
<Text> | <p> | Text typography. |
<TextField> | <input> | Text field for user input. |
<Image> | <img> | Displays different types of images. |
<Svg> | <svg> | Svg display. |
<Path> | <path> | Svg path. |
<Button> | <button> | Buttons for user interactions. |
<List> | <ul> | List container. |
<ListItem> | <li> | List item container. |
<ScrollBar> | N/A | Container for scrolling inner content. |
<Loading> | N/A | Activity loading indicator. |
<Iframe> | <iframe> | Loads an iframe. |
With these basics, you can build most user interfaces with ease if you know React. If React is new to you, it's recommended to first learn the basics.
Using Normal React
Note that if you want to use a normal React stack, you will be able to by using an <Iframe> component. Though this feature is currently still being developed (we'll provide some tooling so that you don't actually have to touch react-xnft), so if you need to use an <Iframe>, it's best to hold off for now.
Nevertheless, it's not recommended as your app will lack the cohesive look and feel of react-xnft components and will miss out on automatic updates to the design system of the xNFT host environment. So when possible, we strongly recommend using the framework.