React
യൂസര്‍ ഇന്റര്‍ഫേസുകള്‍ നിര്‍മ്മിക്കുവാനായി ഒരു ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി
ഡിക്ലറേറ്റീവ്
React ഇന്ററാക്ടീവ് UI-കള്‍ നിര്‍മ്മിക്കുന്നത് ആയാസരഹിതമാക്കുന്നു. നിങ്ങള്‍ നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ ഓരോ state-നും ലളിതമായിട്ടുള്ള വ്യൂസ് ഡിസൈന്‍ ചെയ്യുക, React ഫലപ്രദമായി അവ അപ്ഡേറ്റ് ചെയ്യുകയും നിങ്ങളുടെ ഡേറ്റ മാറുമ്പോള്‍ ശരിയായി റെന്റര്‍ ചെയ്യുകയും ചെയ്യുന്നു.
ഡിക്ലറേറ്റീവ് വ്യൂസ് നിങ്ങളുടെ കോഡ് കൂടുതല്‍ പ്രവചനീയമാക്കുകയും ഡിബഗ്ഗിംഗ് എളുപ്പമാക്കുകയും ചെയ്യുന്നു.
കമ്പോണന്റ് ബേസ്‍‍ഡ്
സ്വന്തം state കൈകാര്യം ചെയ്യുന്ന എന്‍ക്യാപ്സുലേറ്റട് കമ്പോണന്റ്കള്‍ നിർമ്മിക്കുക തുടർന്ന് അവ പുനരുപയോഗിച്ച് സങ്കീർണ്ണമായ UI കൾ നിർമ്മിക്കുക.
കമ്പോണന്റ് ലോജിക് െടമ്പ്ലേറ്റിനു പകരം JavaScript-ല്‍ എഴുതുന്നതിനാല്‍ നിങ്ങള്‍ക്ക് ആയാസരഹിതമായി റിച്ച് ഡേറ്റ ആപ്ലിക്കേഷന്‍ വഴി പാസ് ചെയ്യുവാനും DOM-ല്‍ നിന്ന് state മാറ്റി നിര്‍ത്തുവാനും സാധിക്കും.
ഒരിക്കല്‍ പഠിക്കൂ, എവിടെ വേണമെങ്കിലും എഴുതൂ
നിങ്ങളുടെ ബാക്കിയുള്ള സാങ്കേതിക സ്റ്റാക്കിനെക്കുറിച്ച് ഞങ്ങള്‍ക്ക് മുന്‍വിധികള്‍ ഒന്നുമില്ല, അതിനാല്‍ നിലവിലുള്ള കോഡ് റീറൈറ്റ് ചെയ്യാതെ തന്നെ React-ല്‍ പുതിയ ഫീച്ചേഴ്സ് നിര്‍മ്മിക്കുവാന്‍ സാധിക്കും.
React, Node ഉപയോഗിച്ച് സെര്‍വ്വറുകളില്‍ റെണ്ടര്‍ ചെയ്യാനും React Native ഉപയോഗിച്ച് മൊബൈല്‍ ആപ്പുകളില്‍ പ്രവര്‍ത്തിപ്പിക്കാനും സാധിക്കും.
ഒരു സിമ്പിള്‍ കമ്പോണന്റ്
React കമ്പോണന്റ്സ് ഒരു render() മെതേട് വഴി ഇന്‍പു‍ട് ഡേറ്റ സ്വീകരിക്കുകയും ഡിസ്പ്ലേ ചെയ്യേണ്ടത് എന്താണെന്ന് റിട്ടേണ്‍ ചെയ്യുകയും ചെയ്യുന്നു. ഈ ഉദാഹരണത്തില്‍ XML പോലത്തെ, JSX എന്ന് പേരുള്ള syntax ആണ് ഉപയോഗിക്കുന്നത്. render() via this.props വഴി കമ്പോണന്റിലേക്ക് പാസ് ചെയ്യപെട്ട ഇന്‍പു‍ട് ഡേറ്റ അക്സെസ് ചെയ്യാന്‍ സാധിക്കുന്നതുമാണ്.
JSX തന്നെ വേണമെന്ന് നിര്‍ബന്ധമില്ല React ഉപയോഗിക്കാന്‍. JSX കംപൈലേഷന്‍ ഘട്ടത്തില്‍ നിര്‍മ്മിക്കപ്പെടുന്ന JavaScript code കാണാന്‍ Babel REPL പരീക്ഷിച്ചു നോക്കൂ.
Loading code example...
ഒരു സ്റ്റേറ്റ്ഫുള്‍ കമ്പോണന്റ്
this.props വഴി ഇന്‍പു‍ട് ഡേറ്റ അക്സെസ് ചെയ്യുന്നതിനെക്കാളുപരി ഒരു കമ്പോണന്റിന് തന്റെ ഇന്റേണല്‍ സ്റ്റേറ്റും (this.state വഴി അക്സെസ് ചെയ്യുന്ന) മെയിന്റേന്‍ ചെയ്യാന്‍ സാധിക്കുന്നതാണ്. ഒരു കമ്പോണന്റിന്റെ സ്റ്റേറ്റ് ഡേറ്റ മാറുമ്പോള്‍, റെന്റര്‍ ചെയ്യപ്പെട്ട markup, render() ഫങ്ഷന്‍ റി-ഇന്‍വോക് ചെയ്ത് മാറ്റുന്നതാണ്.
Loading code example...
ഒരു ആപ്ലിക്കേഷന്‍
props & state ഉപയോഗിച്ച്, നമ്മള്‍ക്ക് ഒരു ചെറിയ റ്റുഡു ആപ്ലിക്കേഷന്‍ നിര്‍മ്മിക്കാവുന്നതാണ്. ഈ ഉദാഹരണത്തില്‍ ഇപ്പോഴുള്ള സാധനങ്ങളുടെ ലിസ്റ്റും യൂസര്‍ എന്റര്‍ ചെയ്യുന്ന ടെക്സ്റ്റ് ട്രാക് ചെയ്യുവാനും state ഉപയോഗിക്കുന്നു. ഇവന്റ് ഹാന്‍‍ഡ്ലേഴ്സ് ഇന്‍ലൈനായി റെന്റര്‍ ചെയ്യപ്പെടുന്നതായി തോന്നുമെങ്കിലും അവരെ കല്ക്ട് ചെയ്യത് ഇവന്റ് ഡെലഗേഷന്‍ ഉപയോഗിച്ചാണ് നടപ്പിലാക്കുന്നത്.
Loading code example...
എക്സ്റ്റേണല്‍ പ്ലഗിന്‍സ് ഉപയോഗിച്ചുകൊണ്ടുള്ള കമ്പോണന്റസ്
മറ്റുള്ള ലൈബ്രറികളുമായും ഫ്രേംവര്‍ക്കുകളുമായും ഇന്റര്‍ഫേസ് ചെയ്യുന്നത് React-ല്‍ അനുവദനീയമാണ്. ഈ ഉദാഹരണത്തില്‍, remarkable എന്ന ഒരു എക്സ്റ്റേണല്‍ Markdown ലൈബ്രറി ഉപയോഗിച്ച് <textarea>-ടെ വാല്യു തൽസമയം കണ്‍വേര്‍ട്ട് ചെയ്യുന്നത് നിങ്ങള്‍ക്ക് കാണാവുന്നതാണ്.