React
യൂസര്‍ ഇന്റര്‍ഫേസുകള്‍ നിര്‍മ്മിക്കുവാനായി ഒരു ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി
ഡിക്ലറേറ്റീവ്
React ഇന്ററാക്ടീവ് UI-കള്‍ നിര്‍മ്മിക്കുന്നത് ആയാസരഹിതമാക്കുന്നു. നിങ്ങള്‍ നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ ഓരോ state-നും ലളിതമായിട്ടുള്ള വ്യൂസ് ഡിസൈന്‍ ചെയ്യുക, React ഫലപ്രദമായി അവ അപ്ഡേറ്റ് ചെയ്യുകയും നിങ്ങളുടെ ഡേറ്റ മാറുമ്പോള്‍ ശരിയായി അവ റെന്റര്‍ ചെയ്യുകയും ചെയ്യുന്നു.
ഡിക്ലറേറ്റീവ് വ്യൂസ് നിങ്ങളുടെ കോഡ് കൂടുതല്‍ പ്രവചനീയമാക്കുകയും ഡിബഗ്ഗിംഗ് എളുപ്പമാക്കുകയും ചെയ്യുന്നു.
കമ്പോണന്റ് ബേസ്‍‍ഡ്
സ്വന്തം state കൈകാര്യം ചെയ്യുന്ന എൻ‌ക്യാപ്സുലേറ്റഡ് കമ്പോണന്റ്കള്‍ നിർമ്മിക്കുക, തുടർന്ന് അവ പുനരുപയോഗിച്ച് സങ്കീർണ്ണമായ UI-കൾ നിർമ്മിക്കുക.
ടെം‌പ്ലേറ്റുകൾ‌ക്ക് പകരമായി കമ്പോണന്റ് ലോജിക് JavaScript-ൽ എഴുതുന്നതിനാല്‍ നിങ്ങളുടെ അപ്ലിക്കേഷനിലൂടെ റിച്ച് ഡാറ്റ എളുപ്പത്തിൽ കൈമാറാനും DOM-ൽ നിന്നും state-നെ മാറ്റി നിര്‍ത്തുവാനും കഴിയും.
ഒരിക്കൽ പഠിക്കുക, എവിടെയും എഴുതുക
നിങ്ങളുടെ ബാക്കി ടെക്നോളജി സ്റ്റാക്കിനെക്കുറിച്ച് ഞങ്ങൾ അനുമാനങ്ങൾ നടത്തുന്നില്ല, അതിനാൽ നിലവിലുള്ള കോഡ് മാറ്റിയെഴുതാതെ React-ൽ നിങ്ങൾക്ക് പുതിയ സവിശേഷതകൾ വികസിപ്പിക്കാൻ കഴിയും.
Node ഉപയോഗിച്ച് React സെർവറിൽ റെൻഡർ ചെയ്യാനും 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>-ടെ വാല്യു തൽസമയം കണ്‍വേര്‍ട്ട് ചെയ്യുന്നത് നിങ്ങള്‍ക്ക് കാണാവുന്നതാണ്.