அறிமுகம்
React ஆனது மென்பொருள்களுக்கான பயனர் இடைமுகங்களை ( UIs ) இலகுவாகவும், மிக சிறப்பாகவும் உருவாக்க உதவுகின்றது. அத்துடன் இது தரவு மாற்றங்களுக்கு ஏற்றாற் போல் அத்தரவுகளுடன் சம்பந்தப்பட்ட இடைமுக கூறுகளை ( components ) மாத்திரம் புதுப்பிக்கக் கூடிய ஆற்றலையும் கொண்டுள்ளது.
உங்களுடைய குறிமுறையாக்கல் உருவாகும் பயனர் இடைமுக ( UI ) காட்சிகள் மிக இலகுவாக யூகிக்கக்கூடிய வகையிலும், தவறுகளை இலகுவாக இனங்கண்டு சரிசெய்ய கூடிய வகையிலும் இருக்கின்றது.
கூறுகளை அடிப்படையாக கொண்டது.
தமக்கேயுரிய பிரத்தியேக நிலையமைப்பைக் ( state ) கொண்ட கூறுகளை ( components ) உருவாக்கி பின்னர் அவை அனைத்தையும் ஒன்றிணைத்து மிகவும் சிக்கலான பயனர் இடைமுகங்களை இலகுவாக உருவாக்கலாம்.
கூறுகளினுடைய ( component ) தர்க்கங்கள் ( logic ) யாவும் JavaScript ஆல் எழுதப்பட்டிருக்கின்றன, ஆகவே செயலிக்கு ( app ) தேவையான தரவுகளை DOM இற்கு வெளியிலேயே வைத்திருக்கலாம்.
ஒருமுறை கற்றுக்கொள்ளுங்கள், எங்குவேண்டுமானாலும் எழுதுங்கள்
React ஆனது வேறு எந்தவிதமான தொழில்நுட்ப அமைப்பிலும் சம்பந்தப்படாது சுயமாக செயல்படக்கூடியது. ஆகவே நீங்கள் புதிய அம்சங்களை React இல் உருவாக்கும் போது தற்போது உங்களிடம் உள்ள செயலியில் ( app ) எந்தவிதமான மாற்றங்களையும் மேற்கொள்ள வேண்டிய தேவை ஏற்ப்படாது.
<<<<<<< HEAD React ஐ நீங்கள் Node ஐ பயன்படுத்தி சேவையகத்தில் இருந்தும் காண்பிக்க முடியும். அத்தோடு React Native ஐ பயன்படுத்தி கையடக்க சாதனங்களுக்கான ( mobile ) செயலிகளையும் ( apps ) உருவாக்கி கொள்ளலாம். ======= React can also render on the server using Node and power mobile apps using React Native.
bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
ஒரு எளிய கூறு ( Component )
React இன் ஒவ்வொரு கூறுகளும் render() எனப்படும் ஓர் முறையையினையே ( method ) செயல்படுத்துகின்றன. இது வழங்கப்படும் தரவுகளை பெற்றுக்கொண்டு அதற்கு ஏற்றாற்போல் எவற்றை காண்பிக்க வேண்டுமோ அவற்றை வெளியீடாக தருகின்றது. இந்த எடுத்துக்காட்டில் XML மாதிரியான குறியீடுகள் பயன்படுத்தப்பட்டுள்ளன. இவை JSX என அழைக்கப்படும். இக் கூறுகளுக்கு வழங்கப்படும் உள்ளீடுகள் ஆனது this.props என்பதினூடாக பயன்படுத்த கூடியதாக அமைகின்றது.
JSX ஆனது கட்டாயமற்றது. இது React இனை பயன்படுத்த அவசியம் அற்றது. Babel REPL ஐ பயன்படுத்தி எவ்வாறு JSX குறியீடுகள் JavaScript குறியீடுகளுக்கு மாற்றப்படுகின்றன என முயன்று பாருங்கள்.
Loading code example...
ஒரு பிரத்தியேக நிலையமைப்பைக் ( state ) கொண்ட கூறு ( Component )
இக் கூறுகளுக்கு வழங்கப்படும் உள்ளீடுகளுக்கு மேலதிகமாக ( this.props என்பதினூடாக பயன்படுத்த கூடியதாக அமைகின்ற தரவுகள் ), ஒவ்வொரு கூறுகளும் தமக்கே உரிய பிரத்தியேக நிலையமைப்பு ( this.state என்பதினூடாக பயன்படுத்த கூடியதாக அமைகின்ன்ற ) தரவுகளை கொண்டுள்ளன. அக் குறிப்பிட்ட நிலையமைப்புக்கான தரவுகள் மாற்றம் அடையும் போதும் render() முறையையினை ( method ) மீண்டும் செயற்படுத்தப்பட்டு ஏற்கனவே காண்பிக்கப்பட்ட கூறுகளின் பெறுபேற்றை மாற்றியமைக்கும்.
Loading code example...
ஒரு செயலி ( Application )
இங்கே props மற்றும் state ஆகியவற்றை பயன்படுத்தி நாம் ஓர் சிறிய செயலி ( app ) ஒன்றினை உருவாக்கலாம். இங்கே state ஆனது தற்போது பட்டியலில் காணப்படும் உருப்படிகளை கண்காணிக்கவும் அத்தோடு நாம் உள்ளிடும் தரவை கண்காணிக்கவும் பயன்படுகின்றது. இங்கே நிகழ்வுகளை கையாள்வது ( event handle ) ஒரே பகுதியில் காண்பிக்கப்பட்டு இருப்பினும் அவை அவ் நிகழ்வுகளுக்கான ( event ) பிரதிநிதிகளால் சேகரிக்கப்பட்டே செயல்படுத்தப்படுகின்றன.
Loading code example...
புற நிரல்களை ( Plugins ) பயன்படுத்தும் ஒரு எளிய கூறு ( Component )
React ஆனது உங்களை மற்றைய நிரல்கூறுகளுடனும் ( libraries ), கட்டமைப்புக்களுடனும் ( frameworks ) இடைமுகப்படுத்திக்கொள்ள அனுமதிக்கின்றது. இந்த எடுத்துக்காட்டில் remarkable எனப்படும் வெளி Markdown நிரல்கூறு ஒன்றை பயன்படுத்தி <textarea> இல் உள்ளிடப்படும் Markdown உள்ளீட்டை உடனுக்குடன் HTML வெளியீடாக மாற்றலாம்.