React കമ്പോണന്റ്സ് ഒരു render() മെതേട് വഴി ഇന്‍പു‍ട് ‍ഡേറ്റ സ്വീകരിക്കുകയും ‍‍‍‍ഡിസ്പ്ലേ ചെയ്യേണ്ടത് എന്താണെന്ന് റിട്ടേണ്‍ ചെയ്യുകയും ചെയ്യുന്നു. ഈ ഉദാഹരണത്തില്‍ XML പോലത്തെ, JSX എന്ന് പേരുള്ള syntax ആണ് ഉപയോഗിക്കുന്നത്. render() via this.props വഴി കമ്പോണന്റിലേക്ക് പാസ് ചെയ്യപെട്ട ഇന്‍പു‍ട് ‍ഡേറ്റ അക്സെസ് ചെയ്യാന്‍ സാധിക്കുന്നതുമാണ്.

JSX തന്നെ വേണമെന്ന് നിര്‍ബന്ധമില്ല React ഉപയോഗിക്കാന്‍. JSX കംപൈലേഷന്‍ ഘട്ടത്തില്‍ നിര്‍മ്മിക്കപ്പെടുന്ന JavaScript code കാണാന്‍ Babel REPL പരീക്ഷിച്ചു നോക്കൂ.

this.props വഴി ഇന്‍പു‍ട് ‍ഡേറ്റ അക്സെസ് ചെയ്യുന്നതിനെക്കാളുപരി ഒരു കമ്പോണന്റിന് തന്റെ ഇന്റേണല്‍ സ്റ്റേറ്റും (this.state വഴി അക്സെസ് ചെയ്യുന്ന) മെയിന്റേന്‍ ചെയ്യാന്‍ സാധിക്കുന്നതാണ്. ഒരു കമ്പോണന്റിന്റെ സ്റ്റേറ്റ് ഡേറ്റ മാറുമ്പോള്‍, റെന്റര്‍ ചെയ്യപ്പെട്ട markup, render() ഫങ്ഷന്‍ റി-ഇന്‍വോക് ചെയ്ത് മാറ്റുന്നതാണ്.

props & state ഉപയോഗിച്ച്, നമ്മള്‍ക്ക് ഒരു ചെറിയ റ്റുഡു ആപ്ലിക്കേഷന്‍ നിര്‍മ്മിക്കാവുന്നതാണ്. ഈ ഉദാഹരണത്തില്‍ ഇപ്പോഴുള്ള സാധനങ്ങളുടെ ലിസ്റ്റും യൂസര്‍ എന്റര്‍ ചെയ്യുന്ന ടെക്സ്റ്റ് ട്രാക് ചെയ്യുവാനും state ഉപയോഗിക്കുന്നു. ഇവന്റ് ഹാന്‍‍ഡ്ലേഴ്സ് ഇന്‍ലൈനായി റെന്റര്‍ ചെയ്യപ്പെടുന്നതായി തോന്നുമെങ്കിലും അവരെ കല്ക്ട് ചെയ്യത് ഇവന്റ് ഡെലഗേഷന്‍ ഉപയോഗിച്ചാണ് നടപ്പിലാക്കുന്നത്.

മറ്റുള്ള ലൈബ്രറികളുമായും ഫ്രേംവര്‍ക്കുകളുമായും ഇന്റര്‍ഫേസ് ചെയ്യുന്നത് React-ല്‍ അനുവദനീയമാണ്. ഈ ഉദാഹരണത്തില്‍, remarkable എന്ന ഒരു എക്സ്റ്റേണല്‍ Markdown ലൈബ്രറി ഉപയോഗിച്ച് <textarea>-ടെ വാല്യു തൽസമയം കണ്‍വേര്‍ട്ട് ചെയ്യുന്നത് നിങ്ങള്‍ക്ക് കാണാവുന്നതാണ്.