റിയാക്ട് (വെബ് ഫ്രെയിംവർക്ക്)

ഇംഗ്ലീഷ് വിലാസം

https://ml.wikipedia.org/wiki/React

റിയാക്ട്

Original author(s)	Jordan Walke
വികസിപ്പിച്ചത്	Facebook and community
ആദ്യപതിപ്പ്	മേയ് 29, 2013; 12 years ago (2013-05-29)[1]
Stable release	16.9.0 / ഓഗസ്റ്റ് 8, 2019; 5 years ago (2019-08-08)[2]
റെപോസിറ്ററി	React Repository
ഭാഷ	JavaScript
പ്ലാറ്റ്‌ഫോം	Web platform
തരം	JavaScript library
അനുമതിപത്രം	MIT License
വെബ്‌സൈറ്റ്	reactjs.org

ഉപയോക്തൃ ഇന്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയാണ് റിയാക്ട് (React.js അല്ലെങ്കിൽ ReactJS എന്നും അറിയപ്പെടുന്നു)^[3]. ഇത് പരിപാലിക്കുന്നത് ഫേസ്ബുക്കും വ്യക്തിഗത ഡവലപ്പർമാരുടെയും കമ്പനികളുടെയും ഒരു കമ്മ്യൂണിറ്റിയാണ്.^[4][5][6] ഉപയോക്തൃ ഇന്റർഫേസുകൾ അല്ലെങ്കിൽ യുഐ ഘടകങ്ങൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ഓപ്പൺ സോഴ്‌സ് ഫ്രണ്ട് എൻഡ് ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയാണ് റിയാക്റ്റ് (React.js അല്ലെങ്കിൽ ReactJS എന്നും അറിയപ്പെടുന്നു).^[3] ഇത് ഫേസ്ബുക്കും വ്യക്തിഗത ഡവലപ്പർമാരുടെയും കമ്പനികളുടെയും ഒരു കമ്മ്യൂണിറ്റിയാണ് പരിപാലിക്കുന്നത്.^[7][8][9]

ഒറ്റ പേജ് അല്ലെങ്കിൽ മൊബൈൽ ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുന്നതിൽ ഒരു അടിസ്ഥാനമായി റിയാക്റ്റ് ഉപയോഗിക്കാം. എന്നിരുന്നാലും, റിയാക്റ്റിന് സ്റ്റേറ്റ് മാനേജ്മെൻറിനെക്കുറിച്ചും ആ സ്റ്റേറ്റ് ഡോമിലേക്ക്(DOM)റെൻഡർ ചെയ്യുന്നതിനുമായി മാത്രമേ ബന്ധമുള്ളൂ, അതിനാൽ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നതിന് സാധാരണയായി റൗട്ടിംഗിനായി അധിക ലൈബ്രറികളുടെ ഉപയോഗവും ചില ക്ലയന്റ് സൈഡ് പ്രവർത്തനങ്ങളും ആവശ്യമാണ്. ^[10]

ജെ‌എസ്‌എക്സ്, ജാവാസ്ക്രിപ്റ്റ് എന്നിവയ്ക്കൊപ്പം എച്ച്ടിഎംഎല്ലിലെ റിയാക്ട് ഉപയോഗത്തിന്റെ അടിസ്ഥാന ഉദാഹരണമാണ് ഇനിപ്പറയുന്നത്.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

പ്രോപ്പർട്ടി ഗ്രീറ്റിംഗ് സ്വീകരിക്കുന്ന ഒരു റിയാക്റ്റ് ഘടകമാണ് ഗ്രീറ്റർ ക്ലാസ്. ReactDOM.render രീതി ഗ്രീറ്റർ ഘടകത്തിന്റെ ഒരു ഉദാഹരണം സൃഷ്ടിക്കുകയും ഗ്രീറ്റിംഗ് പ്രോപ്പർട്ടി 'ഹലോ വേൾഡ്' ആയി സജ്ജമാക്കുകയും റെൻഡർ ചെയ്ത ഘടകം ഐഡി myReactApp ഉപയോഗിച്ച് ഡോം(DOM) ഘടകത്തിലേക്ക് ഒരു ചൈൽഡ് എലമെന്റായി ചേർക്കുകയും ചെയ്യുന്നു.

ഒരു വെബ് ബ്രൗസറിൽ പ്രദർശിപ്പിക്കുമ്പോൾ അതിന്റെ ഫലം ലഭിക്കും

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>

ഘടകങ്ങൾ(components) എന്ന് വിളിക്കുന്ന എന്റിറ്റികളിലാണ് റിയാക്റ്റ് കോഡ് നിർമ്മിച്ചിരിക്കുന്നത്. റിയാക്റ്റ് ഡോം ലൈബ്രറി ഉപയോഗിച്ച് ഘടകങ്ങളെ ഡോമി ലെ ഒരു പ്രത്യേക ഘടകത്തിലേക്ക് റെൻഡർ ചെയ്യാൻ കഴിയും. ഒരു ഘടകം റെൻഡർ ചെയ്യുമ്പോൾ, "പ്രോപ്സ്" എന്നറിയപ്പെടുന്ന പ്രോപ്പർട്ടിയിലൂടെ മൂല്യങ്ങൾ പാസ് ചെയ്യാൻ സാധിക്കുന്നതാണ്:^[11]

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

റിയാക്റ്റിലെ കമ്പോണന്റ്സ് വിളിക്കുന്നതിനുള്ള രണ്ട് പ്രാഥമിക മാർഗ്ഗങ്ങളാണ് ഫംഗ്ഷണൽ കമ്പോണന്റസും ക്ലാസ് അധിഷ്ഠിത കമ്പോണന്റ്സും.

ഫംഗ്ഷണൽ കമ്പോണന്റ്സ് ഒരു ഫംഗ്ഷൻ ഉപയോഗിച്ച് പ്രഖ്യാപിക്കുകയും പിന്നീട് ജെ‌എസ്‌എക്സ്(JavaScript XML) റിട്ടേൺ ചെയ്യുന്നു. ഉദാ:

const Greeting = (props) => <div>Hello, {props.name}!</div>;

ക്ലാസ് അധിഷ്ഠിത കമ്പോണന്റ്സ് ഇഎസ്6(ES6) ക്ലാസ് ഉപയോഗിച്ച് പ്രഖ്യാപിക്കുന്നു. ഉദാ:

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

ശ്രദ്ധേയമായ മറ്റൊരു സവിശേഷത ഒരു വെർച്വൽ ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ അല്ലെങ്കിൽ വെർച്വൽ ഡോം ആണ്. റിയാക്റ്റ് ഒരു മെമ്മറി ഡാറ്റ-സ്്ട്രക്ചർ കാഷെ സൃഷ്ടിക്കുന്നു, അതിന്റെ ഫലമായുണ്ടാകുന്ന വ്യത്യാസങ്ങൾ കണക്കാക്കുന്നു, തുടർന്ന് ബ്രൗസറിൽ ഡോം കാര്യക്ഷമമായി അപ്‌ഡേറ്റ് ചെയ്യുന്നു.^[12]ഈ പ്രക്രിയയെ റീകൺസിലീയേഷൻ(reconciliation)എന്ന് വിളിക്കുന്നു. ഓരോ മാറ്റത്തിലും മുഴുവൻ പേജും റെൻഡർ ചെയ്യുന്നതുപോലെ കോഡ് എഴുതാൻ ഇത് പ്രോഗ്രാമറെ അനുവദിക്കുന്നു, അതേസമയം റിയാക്റ്റ് ലൈബ്രറികൾ യഥാർത്ഥത്തിൽ മാറുന്ന സബ് കമ്പോണന്റസിനെ മാത്രമേ റെൻഡർ ചെയ്യുകയുള്ളൂ. ഈ സെലക്ടീവ് റെൻഡറിംഗ് മെച്ചപ്പെട്ട പെർഫോമൻസ് നൽകുന്നു. സി‌എസ്‌എസ് സ്റ്റയിൽ വീണ്ടും കണക്കാക്കാനുള്ള ശ്രമം, പേജിനായുള്ള ലേഔട്ട്, മുഴുവൻ പേജിനും റെൻഡർ ചെയ്യൽ എന്നിവയിൽ നിന്ന് സംരക്ഷിക്കുന്നു.

ഒരു കമ്പോണന്റിന്റെ ലൈഫ്ടൈം സെറ്റ് പോയിന്റുകളിൽ കോഡ് നിർവ്വഹിക്കാൻ അനുവദിക്കുന്ന ഒരു തരം ഹുക്കിംഗ് ലൈഫ് സൈക്കിൾ മെത്തേഡുകൾ ഉപയോഗിക്കുന്നു.

• shouldComponentUpdateഒരു റെൻഡർ ആവശ്യമില്ലെങ്കിൽ ഫാൾസായി റിട്ടേൺ ചെയ്ത് ഒരു കമ്പോണന്റിന്റെ അനാവശ്യ റീ-റെൻഡറിംഗ് തടയാൻ ഡവലപ്പറെ അനുവദിക്കുന്നു.
• componentDidMountകമ്പോണൻസ് "മൗണ്ട്" ചെയ്തുകഴിഞ്ഞാൽ (കമ്പോണൻസ് ഉപയോക്തൃ ഇന്റർഫേസിൽ സൃഷ്ടിക്കപ്പെടുന്നു, പലപ്പോഴും ഇത് ഒരു ഡോം നോഡുമായി ബന്ധപ്പെടുത്തിക്കൊണ്ടായിരിക്കും)ഒരു വിദൂര ഉറവിടത്തിൽ നിന്ന് ഒരു എപിഐ(API) വഴി ഡാറ്റ ലോഡിംഗ് പ്രവർത്തനക്ഷമമാക്കാൻ ഇത് സാധാരണയായി ഉപയോഗിക്കുന്നു.
• componentWillUnmount കമ്പോണൻസ് ഇല്ലാതാക്കുകയോ അല്ലെങ്കിൽ "അൺ‌മൗണ്ട് ചെയ്യുന്നതിനെയോ" ആണ്. കമ്പോണൻസിന്റെ റിസോഴ്സ്-ഡിമാൻഡിംഗ് ഡിപൻഡൻസികൾ മായ്‌ക്കുന്നതിന് ഇത് സാധാരണയായി ഉപയോഗിക്കുന്നു, അത് കമ്പോണൻസിന്റെ അൺമൗണ്ടിംഗ് ഉപയോഗിച്ച് നീക്കംചെയ്യില്ല (ഉദാ. കമ്പോണൻസിന്റെ സാന്നിധ്യം കാരണം കമ്പോണൻസുമായി ബന്ധപ്പെട്ട ഏതെങ്കിലും setInterval() നീക്കംചെയ്യൽ, അല്ലെങ്കിൽ "ഇവന്റ് ലിസ്റ്റനർ" ഉപയോഗിച്ച് പ്രമാണത്തെ സെറ്റ് ചെയ്യൽ മുതലായവ)
• renderഏറ്റവും പ്രധാനപ്പെട്ട ലൈഫ് സൈക്കിൾ മെത്തേഡാണ്, ഏത് കമ്പോണൻസിനും ആവശ്യമുള്ള ഒരേയൊരു മാർഗ്ഗവുമാണ്. കമ്പോണൻസിന്റെ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുചെയ്യുമ്പോഴെല്ലാം ഇത് സാധാരണയായി വിളിക്കപ്പെടുന്നു, അത് ഉപയോക്തൃ ഇന്റർഫേസിൽ പ്രതിഫലിക്കുകയും ചെയ്യുന്നു.

ജാവാസ്ക്രിപ്റ്റ് ഭാഷാ വാക്യഘടനയിലേക്കുള്ള വിപുലീകരണമാണ് ജെ‌എസ്‌എക്സ് അല്ലെങ്കിൽ ജാവാസ്ക്രിപ്റ്റ് എക്സ്എം‌എൽ.^[13] എച്ച്‌ടി‌എം‌എല്ലിന് സമാനമായി, നിരവധി ഡെവലപ്പർ‌മാർ‌ക്ക് പരിചിതമായ വാക്യഘടന ഉപയോഗിച്ച് കമ്പോണൻസ് റെൻഡറിംഗ് രൂപകൽപ്പന ചെയ്യുന്നതിനുള്ള ഒരു മാർ‌ഗ്ഗം ജെ‌എസ്‌എക്സ് നൽകുന്നു. റിയാക്റ്റ് കമ്പോണൻസ് സാധാരണയായി ജെ‌എസ്‌എക്സ് ഉപയോഗിച്ചാണ് എഴുതുന്നത്, അവ ഉണ്ടാകണമെന്നില്ലെങ്കിലും (കമ്പോണൻസ് പ്യൂവർ ജാവാസ്ക്രിപ്റ്റിലും(pure JavaScript) എഴുതാം). എക്സ്എച്ച്പി എന്നറിയപ്പെടുന്ന പിഎച്ച്പിക്കായി ഫേസ്ബുക്ക് സൃഷ്ടിച്ച മറ്റൊരു വിപുലീകരണ വാക്യഘടനയ്ക്ക് സമാനമാണ് ജെഎസ്എക്സ്.

ജെഎസ്എക്സ് കോഡിന്റെ ഒരു ഉദാഹരണം:

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

റിയാക്റ്റിന്റെ അടിസ്ഥാന ആർക്കിടെക്ചർ ബ്രൗസറിൽ എച്ച്‌ടി‌എം‌എൽ റെൻഡർ ചെയ്യുന്നതിനപ്പുറം ബാധകമാണ്. ഉദാഹരണത്തിന്, <canvas> ടാഗുകളിലേക്ക് ^[14]റെൻഡർ ചെയ്യുന്ന ചലനാത്മക ചാർട്ടുകൾ ഫേസ്ബുക്കിൽ ഉണ്ട്, സെർവറിലും ക്ലയന്റിലും സമാനമായ എച്ച്‌ടി‌എം‌എൽ(HTML) റെൻഡർ ചെയ്യുന്നതിന് നെറ്റ്ഫ്ലിക്സും പേപാലും യൂണിവേഴ്സൽ ലോഡിംഗ് ഉപയോഗിക്കുന്നു.^[15][16]

ഫംഗ്ഷൻ കമ്പോണന്റിൽ നിന്നും സ്റ്റേറ്റും, ലൈഫ് സൈക്കിൾ സവിശേഷതകളും ഉപയോഗിക്കുവാൻ ഡവലപ്പർമാരെ അനുവദിക്കുന്ന ഫംഗ്ഷനുകളാണ് ഹുക്കുകൾ.^[17] ക്ലാസുകൾക്കുള്ളിൽ ഹുക്കുകൾ പ്രവർത്തിക്കില്ല - ക്ലാസുകൾ ഇല്ലാതെ റിയാക്റ്റ് ഉപയോഗിക്കാൻ ഇത് മൂലം സാധിക്കുന്നു.^[18]

റിയാക്റ്റ് ചില ബിൽറ്റ്-ഇൻ ഹുക്കുകൾ നൽകുന്നു useState^[19] useContext, useReducer ഉം useEffect. ^[20] മറ്റുള്ളവ ഹുക്സ് എപിഐ(API) റഫറൻസിൽ രേഖപ്പെടുത്തിയിട്ടുണ്ട്.^[21] useState, useReduceruseEffect, ഇവ ഏറ്റവും കൂടുതൽ ഉപയോഗിക്കുന്നത് യഥാക്രമം സ്റ്റേറ്റ്, സൈഡ് എഫ്റ്റ് എന്നിവ നിയന്ത്രിക്കുന്നതിനാണ്.

ഹുക്കുകൾ ആശ്രയിക്കുന്ന ക്യാരക്ടറൈസ്ഡ് കോഡ് പാറ്റേൺ വിവരിക്കുന്ന ഹുക്ക് നിയമങ്ങളുണ്ട്.^[22] റിയാക്റ്റിനൊപ്പം സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിനുള്ള ആധുനിക മാർഗമാണിത്.

1. ഹുക്കുകൾ ഉയർന്ന തലത്തിൽ മാത്രമേ വിളിക്കൂ (ലൂപ്പിനുള്ളിലോ ഇഫ് സ്റ്റേറ്റ്മെന്റിനുള്ളിലോ(if statement)അല്ല).
2. സാധാരണ ഫംഗ്ഷനുകളിൽ നിന്നോ ക്ലാസ് കമ്പോണന്റ്സിൽ നിന്നോ അല്ല, റിയാക്റ്റ് ഫംഗ്ഷൻ കമ്പോണന്റിസിൽ നിന്ന് മാത്രമേ ഹുക്കുകൾ വിളിക്കൂ

റൺടൈമിൽ ഈ നിയമങ്ങൾ നടപ്പിലാക്കാൻ കഴിയില്ലെങ്കിലും, ഡെവലപ്മെന്റ് സമയത്ത് നിരവധി തെറ്റുകൾ കണ്ടെത്തുന്നതിന് ലിന്റേഴ്സ് പോലുള്ള കോഡ് വിശകലന ഉപകരണങ്ങൾ ക്രമീകരിക്കാൻ കഴിയും. ഹുക്കുകളുടെ ഉപയോഗത്തിനും ഇഷ്‌ടാനുസൃത ഹുക്കുകൾ(custom hooks)നടപ്പിലാക്കുന്നതിനും ഈ നിയമങ്ങൾ ബാധകമാണ്, ^[23] ഇതിനെ അതർ ഹൂക്കുകൾ എന്ന് വിളിക്കാം.

ഒരു സമ്പൂർണ്ണ "ആപ്ലിക്കേഷൻ ലൈബ്രറി" നൽകാൻ റിയാക്റ്റ് ശ്രമിക്കുന്നില്ല. ഉപയോക്തൃ ഇന്റർ‌ഫേസുകൾ‌ നിർമ്മിക്കുന്നതിനായി ഇത് പ്രത്യേകം രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു ^[3] അതിനാൽ‌ ഒരു അപ്ലിക്കേഷൻ‌ നിർമ്മിക്കുന്നതിന് ചില ഡെവലപ്പർ‌മാർ‌ ആവശ്യമെന്ന് കരുതുന്ന നിരവധി ഉപകരണങ്ങൾ‌ ഉൾ‌പ്പെടുന്നില്ല. നെറ്റ്‌വർക്ക് ആക്‌സസ് അല്ലെങ്കിൽ ലോക്കൽ ഡാറ്റ സംഭരണം പോലുള്ള ജോലികൾ നിർവഹിക്കാൻ ഡെവലപ്പർമാർക്ക് താൽപ്പര്യപ്പെടുന്ന ലൈബ്രറികൾ തിരഞ്ഞെടുക്കാൻ ഇത് അനുവദിക്കുന്നു.

റിയാക്റ്റിന്റെ യുണിഡിറക്ഷണൽ ഡാറ്റാ ഫ്ലോയെ പിന്തുണയ്ക്കുന്നതിനായി (ഇത് ആംഗുലർ.ജെഎസിന്റെ ബൈഡിറക്ഷണൽ ഫ്ലോയ്ക്ക് വിപരീതമാണ്), ജനപ്രിയ മോഡൽ-വ്യൂ-കൺട്രോളർ ആർക്കിടെക്ചറിന് പകരമായി ഫ്ലക്സ് ആർക്കിടെക്ചർ വികസിപ്പിച്ചെടുത്തു. ഒരു സെൻ‌ട്രൽ‌ ഡിസ്‌പാച്ചർ‌ വഴി ഒരു സ്റ്റോറിലേക്ക് അയയ്‌ക്കുന്ന പ്രവർ‌ത്തനങ്ങൾ‌ ഫ്ലക്സ് സവിശേഷതകൾ‌, കൂടാതെ സ്റ്റോറിലെ മാറ്റങ്ങൾ‌ വെബ്ബിലും തൽസമയം മാറ്റം സംഭവിക്കുന്നു. റിയാക്റ്റിനൊപ്പം ഉപയോഗിക്കുമ്പോൾ, കമ്പോണന്റ്സ് പ്രോപ്പർട്ടികളുലൂടെയാണ് ഈ പ്രചരണം നടക്കുന്നത്.^[24] ആശയങ്ങളെ ഗ്രഹിക്കുന്നതു മുതൽ, ഫ്ലക്സിന്റെ പ്രാധാന്യം റെഡക്സ്(Redux), മോബ്എക്സ്(MobX) തുടങ്ങിയ ലൈബ്രറികളുടെ വരവോടെ ഇല്ലാതായി.^[25]

ഒബ്സെർവർ പാറ്റേണിന്റെ ഒരു വകഭേദമായി ഫ്ലക്സിനെ കണക്കാക്കാം.^[26]

ഫ്ലക്സ് ആർക്കിടെക്ചറിനു കീഴിലുള്ള ഒരു റിയാക്റ്റ് കമ്പോണന്റിലേക്ക് കൈമാറിയ ഏതെങ്കിലും പ്രോപ്പുകളെ(props)നേരിട്ട് പരിഷ്കരിക്കരുത്, പക്ഷേ സ്റ്റോർ പരിഷ്ക്കരിക്കുന്നതിന് ഡിസ്പാച്ചർ അയച്ച പ്രവർത്തനങ്ങൾ സൃഷ്ടിക്കുന്ന കോൾബാക്ക് ഫംഗ്ഷനുകൾ വഴി കൈമാറണം. എന്താണ് സംഭവിച്ചതെന്ന് വിവരിക്കേണ്ട ഉത്തരവാദിത്തമുള്ള ഒരു ഒബ്ജക്ടാണ് ആക്ഷൻ: ഉദാഹരണത്തിന്, ഒരു ഉപയോക്താവിനെ "പിന്തുടരുന്നത്" വിവരിക്കുന്ന ഒരു ആക്ഷനിൽ ഒരു യൂസർ ഐഡി, ടാർഗെറ്റ് യൂസർ ഐഡി, USER_FOLLOWED_ANOTHER_USER ടൈപ്പ് ഉണ്ട്.^[27] മോഡലുകളായി കണക്കാക്കാവുന്ന സ്റ്റോറുകൾക്ക്, ഡിസ്പാച്ചറിൽ നിന്ന് ലഭിച്ച ആക്ഷനുകൾക്ക് മറുപടിയായി സ്വയം മാറാൻ കഴിയും.

ഈ പാറ്റേണിൽ ചിലപ്പോൾ "പ്രോപ്പർട്ടികൾ താഴേക്കോ, അല്ലെങ്കിൽ ആക്ഷനുകൾ മുകളിലേക്കോ ഫ്ലോ ചെയ്യുന്നു". ഫ്ലക്സിന്റെ തുടക്കം മുതൽ തന്നെ നിരവധി നടപ്പാക്കലുകൾ സൃഷ്ടിക്കപ്പെട്ടിട്ടുണ്ട്, ഒരുപക്ഷേ ഏറ്റവും അറിയപ്പെടുന്ന റെഡക്സ്, ഒരൊറ്റ സ്റ്റോർ അവതരിപ്പിക്കുന്നു, ഇത് പലപ്പോഴും സിംഗിൾ സോഴസ് ഓഫ് ട്രൂത്ത് എന്ന് വിളിക്കപ്പെടുന്നു.^[28]

കോർ ടീം ഡിസ്ക്ഷൻ ഫോറം വഴി പ്രോജക്റ്റ് സ്റ്റാറ്റസ് ട്രാക്കുചെയ്യാനാകും.^[29] എന്നിരുന്നാലും, റിയാക്റ്റിലെ പ്രധാന മാറ്റങ്ങൾ ഫ്യൂച്ചർ ഓഫ് റിയാക്റ്റ് റിപ്പോസിറ്ററി പ്രശ്നങ്ങളിലൂടെ കടന്നുപോകുകയും പുൾ റിക്വസ്റ്റ് നടത്തുകയും ചെയ്യുന്നു.^[30][31] പുതിയ സാധ്യതയുള്ള സവിശേഷതകൾ, പരീക്ഷണാത്മക എപിഐകൾ, ജാവാസ്ക്രിപ്റ്റ് വാക്യഘടന മെച്ചപ്പെടുത്തലുകൾ എന്നിവയെക്കുറിച്ച് ഫീഡ്‌ബാക്ക് നൽകാൻ ഇത് റിയാക്റ്റ് കമ്മ്യൂണിറ്റിയെ പ്രാപ്‌തമാക്കുന്നു.

ഫെയ്‌സ്ബുക്കിലെ സോഫ്റ്റ്‌വെയർ എഞ്ചിനീയറായ ജോർദാൻ വാൾക്കാണ് റിയാക്റ്റ് സൃഷ്ടിച്ചത്, റിയാക്റ്റിന്റെ ആദ്യകാല പ്രോട്ടോടൈപ്പ് "ഫാക്സ് ജെഎസ്" പുറത്തിറക്കി.^[32][33] പി‌എച്ച്പിക്കായുള്ള ഒരു എച്ച്ടിഎംഎൽ (HTML) കമ്പോണന്റ് ലൈബ്രറിയായ എക്സ്എച്ച്പി (XHP) അദ്ദേഹത്തെ സ്വാധീനിച്ചു. ഇത് ആദ്യം 2011 ൽ ഫേസ്ബുക്കിന്റെ ന്യൂസ് ഫീഡിലും പിന്നീട് 2012 ൽ ഇൻസ്റ്റാഗ്രാമിലും വിന്യസിച്ചു.^[34] 2013 മെയ് മാസത്തിൽ ജെ.എസ്.കോൺഫ് യു.എസിൽ ഇത് ഓപ്പൺ സോഴ്‌സ് ചെയ്തു.^[33]

റിയാക്റ്റിനൊപ്പം നേറ്റീവ് ആൻഡ്രോയിഡ്, ഐഒഎസ്, യുഡബ്ല്യുപി വികസനം പ്രാപ്തമാക്കുന്ന റിയാക്റ്റ് നേറ്റീവ്, 2015 ഫെബ്രുവരിയിൽ ഫേസ്ബുക്കിന്റെ റിയാക്റ്റ് കോൺഫിൽ പ്രഖ്യാപിക്കുകയും 2015 മാർച്ചിൽ ഓപ്പൺ സോഴ്‌സ് ചെയ്യുകയും ചെയ്തു.

1. ↑ Occhino, Tom; Walke, Jordan. "JS Apps at Facebook". YouTube. Retrieved 22 Oct 2018.
2. ↑ "Releases – Facebook/React". GitHub.
3. ↑ ^{3.0 3.1 3.2} "React - A JavaScript library for building user interfaces". React. Retrieved 7 April 2018.
4. ↑ Krill, Paul (May 15, 2014). "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld.
5. ↑ Hemel, Zef (June 3, 2013). "Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews". InfoQ.
6. ↑ Dawson, Chris (July 25, 2014). "JavaScript's History and How it Led To ReactJS". The New Stack.
7. ↑ Krill, Paul (May 15, 2014). "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld.
8. ↑ Hemel, Zef (June 3, 2013). "Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews". InfoQ.
9. ↑ Dawson, Chris (July 25, 2014). "JavaScript's History and How it Led To ReactJS". The New Stack.
10. ↑ Dere, Mohan (2018-02-19). "How to integrate create-react-app with all the libraries you need to make a great app". freeCodeCamp. Retrieved 2018-06-14.
11. ↑ "Components and Props". React. Facebook. Retrieved 7 April 2018.
12. ↑ "Refs and the DOM". React Blog.
13. ↑ "Draft: JSX Specification". JSX. Facebook. Retrieved 7 April 2018.
14. ↑ "Why did we build React? – React Blog". Archived from the original on 2015-04-06. Retrieved 2021-06-02.
15. ↑ "PayPal Isomorphic React". Archived from the original on 2019-02-08.
16. ↑ "Netflix Isomorphic React".
17. ↑ "Hooks at a Glance – React". reactjs.org (in ഇംഗ്ലീഷ്). Retrieved 2019-08-08.
18. ↑ "What the Heck is React Hooks?". Soshace (in ഇംഗ്ലീഷ്). 2020-01-16. Archived from the original on 2022-05-31. Retrieved 2020-01-24.
19. ↑ "Using the State Hook – React". reactjs.org (in ഇംഗ്ലീഷ്). Retrieved 2020-01-24.
20. ↑ "Using the Effect Hook – React". reactjs.org (in ഇംഗ്ലീഷ്). Retrieved 2020-01-24.
21. ↑ "Hooks API Reference – React". reactjs.org (in ഇംഗ്ലീഷ്). Retrieved 2020-01-24.
22. ↑ "Rules of Hooks – React". reactjs.org (in ഇംഗ്ലീഷ്). Retrieved 2020-01-24.
23. ↑ "Building Your Own Hooks – React". reactjs.org (in ഇംഗ്ലീഷ്). Retrieved 2020-01-24.
24. ↑ "In Depth OverView". Flux. Facebook. Archived from the original on 2022-08-07. Retrieved 7 April 2018.
25. ↑ "Flux Release 4.0". Github. Retrieved 26 February 2021.
26. ↑ Johnson, Nicholas. "Introduction to Flux - React Exercise". Nicholas Johnson. Archived from the original on 2022-05-31. Retrieved 7 April 2018.
27. ↑ Abramov, Dan. "The History of React and Flux with Dan Abramov". Three Devs and a Maybe. Retrieved 7 April 2018.
28. ↑ "State Management Tools - Results". The State of JavaScript. Archived from the original on 2018-04-08. Retrieved 7 April 2018.
29. ↑ "Meeting Notes". React Discuss. Archived from the original on 2015-12-22. Retrieved 2015-12-13.
30. ↑ "reactjs/react-future - The Future of React". GitHub. Retrieved 2015-12-13.
31. ↑ "facebook/react - Feature request issues". GitHub. Retrieved 2015-12-13.
32. ↑ Walke, Jordan. "FaxJS". Retrieved 11 July 2019.
33. ↑ ^{33.0 33.1} Papp, Andrea (4 April 2018). "The History of React.js on a Timeline". RisingStack. Retrieved 11 July 2019.
34. ↑ "Pete Hunt at TXJS".