ரியாக்ட் ஜெ எஸ் ஒரு கண்ணோட்டம்

 

ரியாக்ட் ஜெ எஸ் என்பது ஜாவாஸ்கிரிப்ட் ஒபன் சோர்ஸ் லைப்ரரி ஆகும்.இது டைனமிக் மற்றும் இன்டெராக்டிவ் வெப் அப்ளிகேசன் மற்றும் மொபைல் அப்ளிகேசன்க்ளை உருவாக்க பயன்படுகின்றது..

இது எளிதான மற்றும் திறன் வாய்ந்த வேகமான மொபைல் மற்றும் வெப் அப்ளிகேசன்களின் ஃப்ரண்ட் எண்ட் ஆக செயற்படுகின்றது.

ஒரு அப்ளிகேசன் முழுவதுமோ அல்லது தேவைப்படும் அளவிற்கோ ரியாக்ட் ஜெ எஸை பயன்படுத்திக் கொள்ளலாம்.

உதாரணத்திற்கு ஒரு வெப் தளத்திற்கு புதிய தன்மையை சேர்க்கவோ அல்லது UI முழுவதுமோ பயன்படுத்திக் கொள்ளலாம்.

ரியாக்ட் ஆனது டாக்குமெண்ட் ஆப்ஜெக்ட் மாடலிற்கு டேட்டாவை ரெண்டெர் செய்ய மட்டுமே பயன்படுகின்றது.எனவே ரியாக்ட் அப்ளிகேசன்கள் கூடுதலாக ஸ்டேட் மேனேஜ்மென்ட் மற்றும் ரௌடிங்க் செய்வதற்கான லைப்ரரிகள் தேவைப்படுகின்றது.

ரியாக்டின் பிரபலத்திற்கு காரணம் ஃப்ளெக்ஸ்பிள் மற்றும் எளிமையே காரணம் ஆகும்.

ஃபேஸ் புக், உபெர், இன்ஸ்டாகிராம் போன்ற வெப் தளங்கள் ரியாக்டை பயன்படுத்திகின்றன.

ரியாக்ட் ஆனது ஃபேஸ்புக் நிறுவனத்தைச் சேர்ந்த ஜோர்டன் வேல்க் என்பவரால் உருவாக்கப்பட்டது.

ரியாக்ட் ஜெ எஸ் கற்றுக் கொள்ள தேவையான அடிப்படை அறிவுகள்.

1. html

2. css

3.ஜாவா ஸ்கிரிப்ட் மற்றும் ES 6(let, constant, class, arrow functions)

4. நோட்(node) மற்றுன் என்பிஎம்(npm) பற்றிய அடிப்படை அறிவுகள்.

virtual DOM.

ரியாக்ட் டெவலப்பர் நேரடியாம டாமை செயற்படுத்தாமல் விர்ச்சுவல் டாமை செயற்படுத்துகின்றார்.

components.

ரியாக்ட் ஆனது அப்ளிகேசன் UI ஆனதை தனித்தனி காம்பனெண்ட்களாக பிரிக்கின்றது.அதாவது  ஹெட்டர், ஃபுட்டர், நேவிகேட்டர், கண்டெண்ட் என தனித்தனி காம்பனெண்டுகளாக பிரிக்கின்றது.

JSX.

 இது ஜாவாஸ்கிரிப்ட் சிண்டாக்ஸ் எக்ஸ்டென்சன் ஆகும்.இது டெம்ப்லேட்டுகளை உருவாக்குவதற்கு ஜாவா ஸ்கிரிப்டிற்கு பதிலாக jsx ஆனதை பயன்படுத்துகின்றது. எனினும் இது தேவையில்லை. ஆனால் இது ஜாவாஸ்கிரிப்பிற்கு அழகு சேர்க்கின்றது.

ஒன் வே டேட்டா பைண்டிங்க்.

ரியாக்ட் ஆனது யுனி டைரக்சனல் டேட்டா பைண்டிங்கை பயன்படுத்திகின்றது.

ரியாக்ட் நேட்டிவ்.

ரியாக்ட் ஆனது வெப் டெவலெப்மெண்டிற்கான லைப்ரரி ஆகவும் ரியாக்ட் நேட்டிவ் ஆனது மொபைல் அப்ளிகேசனிற்கான லைப்ரரியாகவும் பயன்படுகின்றது. இரண்டிலும் சிண்டாக்ஸ் ஒன்று படும் காம்பனெண்டுகள் வேறுபடும்.

ரியாக்ட் பயன்படுத்துவதற்கு தேவையான சாஃப்ட் வேர்கள்.

நோட் ஜெ எஸ்.

இது பிரவுசருக்கு வெளியே ஜாவாஸ்கிரிப்ட் நிரலை இயக்குவதிற்கு பயன் படுகின்றது. இதை நிறுவும் பொழுது npm ஆனதும் சேர்ந்தே  நிறுவப்படுகின்றது. npm ஆனது ஆங்குலர் அல்லது ரியாக்டிற்கான பேக்கேஜுகளை நிர்வாக்கிக்க பயன்படுகின்றது.

இதை கீழ் கண்ட  முகவரியில் இலவசமாக பதிவிறக்கம் செய்து நிறுவிக் கொள்ளலாம்.

https://nodejs.org

இதை  நிறுவிய பிறகு கமாண்ட் பிராம்ப்ட்க் சென்று

node -v

மற்றும்

npm -v

என்றும் கொடுத்து  பரிசோதித்து கொள்ளலாம்.இவை நிறுவப்பட்டிருந்தால் அதன் வெர்சன் எண்ணைக் காட்டும்.

create-react-app டூல்.

இந்த டூல் ஆனது எளிதாக ரியாக்ட் அப்ளிகேசன்களை உருவாக்கவதற்கு பயன்படுகின்றது. இதற்கு முதலில் கீழ்க்கண்ட கமாண்டைப் பயன்படுத்தி இந்த டூலை நிறுவ வேண்டும்.

npm install -g create-react-app

 

புதிய  ரியாக்ட் அப்ளிகேசனை உருவாக்குதல்.

முதலில் கமாண்ட் பிராம்டில் இருந்த படி பயன்பாடு உருவாக்க வேண்டிய ஃபோல்டருக்கு CD கமாண்ட் மூலம் நேவிகேட் செய்து கொள்ளவும்.

create-react-app test-project

 

இதில் test-project என்பது நம் பயன்பாட்டின் பெயர். இது யூசர் டிபைண்டு ஆகும்.

இதை  இயக்குவதற்கு முதலில் இந்த பிராஜெட்டிற்கு மாற வேண்டும். பிறகு நிரலை இயக்க வேண்டும்.

cd test-project

npm start

 

இப்பொழுது பிரவுசரை இயக்கி கீழ்க்கண்ட முகவரிக்கு நேவிகேட் செய்யவும்.

http://localhost:3000.

இப்பொழுது புதிய பயன்பாட்டை உருவாக்கி இயக்கியுள்ளோம். ஆனால் நமக்கு தேவைப்படும் படி பிராஜெக்டை வடிவமைக்க ஒரு எடிட்டர் தேவைப்படும். இதற்கு இப்பொழுது எல்லாரோலும் பரிந்துரைக்கு,ம் எடிட்டர் visual studio code ஆகும்.

இதை கீழ்க்கண்ட  முகவரியில் பதிவிறக்கி நிறுவிக் கொள்ளலாம்.

https://code.visualstudio.com/download

இப்பொழுது VS கோடை இயக்கி பிராஜெக்ட் ஃபோல்டரை ஓபன் செய்து கொள்ளலாம்.

இதில் முக்கியமாக கீழ்க்கண்ட மூன்று ஃபோல்டர் இருக்கும்.

• Node_modules
• Public
• src

இது போக index.html என்று ஒரு ஃபைல் இருக்கும் இது தான் முதலில் இயக்கப்படும் ஃபைல் ஆகும்.

இதில் root என்ற ஐடியுடன் ஒரு div டேக் இருக்கும்.

<div id="root"></div>

இது எப்படி இயக்கப்படுகின்றது என்று அறிய வேண்டுமானால் src ஃபோல்டரில் உள்ள app.js என்ற ஃபைலை ஓபன் செய்யவும்.

இதில் உள்ள இமேஜ் தான் நாம் பிரவுசரில் கண்ட இமேஜ் ஆகும்.

இதில் டெக்ஸ்டில் மாறுதல் செய்தால் வெளியீட்டில் பிரதிபலிக்கும்.

இதில் babel என்றொரு முக்கியமான டூலை பற்றி நீங்கள் அறிந்து கொள்ள வேண்டும். இது jsx கோடை  பழைய ஜாவாஸ்கிரிப்ட் ஆக  டிரானாஸ்கம்பைல் செய்கின்றது.

நன்றி.

முத்துகார்த்திகேயன் ,மதுரை.