react-native
अवयव

बुनियादी घटक

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

class Example extends Component {
  render () {
    return (
      <View> 
        <Text> I'm a basic Component </Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('Example', () => Example)

स्टेटफुल कंपोनेंट

इन घटकों में बदलते राज्य होंगे।

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

class Example extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: "Sriraman"
    }  
  }
  render () {
    return (
      <View>
        <Text> Hi, {this.state.name}</Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('Example', () => Example)

स्टेटलेस कंपोनेंट

जैसा कि नाम से ही स्पष्ट है, स्टेटलेस कंपोनेंट्स का कोई स्थानीय राज्य नहीं है। उन्हें गूंगा अवयव के रूप में भी जाना जाता है। किसी भी स्थानीय राज्य के बिना, इन घटकों को जीवन चक्र विधियों या बॉयलरप्लेट की बहुत आवश्यकता नहीं होती है जो एक राज्य घटक के साथ आती है।

क्लास सिंटैक्स की आवश्यकता नहीं है, आप बस const name = ({props}) => ( ... ) । इसके परिणामस्वरूप आम तौर पर स्टेटलेस घटक अधिक संक्षिप्त होते हैं।

नीचे दो स्टेटलेस कंपोनेंट्स App और Title का एक उदाहरण है, जिसमें कंपोनेंट्स के बीच प्रॉपर पासिंग का प्रदर्शन है:

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

const Title = ({Message}) => (
  <Text>{Message}</Text>
)    

const App = () => (
  <View>
    <Title title='Example Stateless Component' />
  </View>
)

AppRegistry.registerComponent('App', () => App)

यह घटकों के लिए अनुशंसित पैटर्न है, जब संभव हो। जैसा कि भविष्य में इन घटकों के लिए अनुकूलन किया जा सकता है, स्मृति आवंटन और अनावश्यक जांच को कम किया जा सकता है।