React js ரியாக்ட் ஜெ எஸ்அறிமுகம்.

ரியாக்ட் ஓபன் சோர்ஸ் ஜாவாஸ்கிரிப்ட் லைப்ரரி ஆகும்.இது டைனமிக் மற்றும் இன்டர் ஆக்டிவ் யூசர் இன்டெர்ஃபேஸை உருவாக்கப் பயன்படுகின்றது.

ரியாக்ட் ஆனது வெப் மற்றும் மொபைல் அப்ளிகேசன்களின் view(UI) லேயரை திறம்பட கையாளுகின்றது.

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

இதை கற்றுக் கொள்ள் பின் வரும் அறிவுகள் தேவைப்படும்.

1.      Html மற்றும் css.

2.      Javascript ­மற்றும் es6 போன்றவை

3.      Node மற்றும் npm அடிப்படை.

இது ஃபேஸ்புக் நிறுவனத்தால் உருவாக்கப்பட்டது.

ரியாக்ட் ஆனது மெமெரியில் வெர்ச்சுவல் டாம் உருவாக்குகின்றது.

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

ரியாக்ட் நிறுவதல்.

முதலில் NODE.JS நிறுவ வேண்டும்.NODE JS ஆனது ரியாக்ட் ஜெ எஸ் இயங்க வேண்டிய ரண் டைம் என்விரான்மெண்டை வழங்குகின்றது.

https://nodejs.org

சென்று டவுன் லோட் செய்து நிறுவிக் கொள்ளவும்.

பிறகு

Node.js கமாண்ட் பிராம்ப்ட் செல்லவும்

பிறகு ரியாக்டை global அல்லது லோக்கல் ஃபோல்டெர் லெவெலில் நிறுவலாம்.

நாம் இப்பொழுது ரியாக்டை குலாபள் லெவெலில் உருவாக்குவோம்.

Node –v

என்று டைப் செய்து என்டெர் தட்டினால்

அதன் வெர்சன் காட்டப்படும்.

npm install  -g create-react-app

என்று கொடுத்தால் ரியாக்ட் இன்ஸ்டால் ஆகிவிடும்.

இப்பொழுது E டிரைவில் reactpr என்று ஒரு ஃபோல்டர் உருவாக்குவோம்.

Cd E:/reactpr

கொடுக்கவும்.

அடுத்து E:

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

Create-react-app demo-project.

இதில் demo-project என்பது பிராஜெக்ட் பெயர்.

Cd demo-project

அடுத்து

npm start

என்று கொடுத்து எண்டர் தட்டவும்.

இப்பொழுது பின் வரும் பிரவுசர் விண்டோ வெளிப்படும்.

நன்றி.

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

சி ஷார்ப் மெத்தட் ஹைடிங்க்.

முதலில் Employee என்று ஒரு பேஸ் கிளாஸ் உருவாக்குவோம்.

class Employee

    {

        public string FirstName;

        public string LastName;

        public void PrintFullName()

        {

            Console.WriteLine(FirstName + " " + LastName);

        }

    }

இப்பொழுது அதற்கு இரண்டு சைல்ட் கிளாஸ் உருவாக்குவோம்.

class PartTimeEmployee : Employee

    {

    }

    class FullTimeEmployee : Employee

    {

    }

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

class Program

    {

        static void Main(string[] args)

        {

            FullTimeEmployee FTE = new FullTimeEmployee();

            FTE.FirstName = "Full Time";

            FTE.LastName = "Employee";

            FTE.PrintFullName();

            PartTimeEmployee PTE = new PartTimeEmployee();

            PTE.FirstName = "Part Time";

            PTE.LastName = "Employee";

            PTE.PrintFullName();

        }

    }

Ctrl+f5 கொடுத்து நிரலை இயக்குவோம்

வெளியீடு:

Full Time Employee

Part Time Employee

Press any key to continue . . .

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

class PartTimeEmployee : Employee

    {

        public void PrintFullName()

        {

            Console.WriteLine(FirstName + " " + LastName+" -contractor");

        }

    }

PrintFullName என்ற மெத்தட் பேஸ் கிளாசிலும் இருக்கின்றது அதே நேரத்தில் டெரிவ்டு கிளாசிலும் இருக்கின்றது.

இப்பொழுது நிரலை இயக்கினால்

Full Time Employee

Part Time Employee -contractor

Press any key to continue . . .

என்ற  வெளியீடு கிடைக்கும்.

இதில் டெரிவ்டு கிளாசில் உள்ள மெத்தட் பேஸ் கிளாசில் உள்ள மெத்தடை ஹைட் செய்கின்றது

 எனினும் PrintFullName() என்பது பச்சை கலரில் அண்டர்லைன் ஆகியிருக்கும். இதை சரியாக்க டெரிவ்டு கிளாசில் உள்ள மெத்தடில் new என்ற கீவேர்டு சேர்த்தால் அது மறையும்.

class PartTimeEmployee : Employee

    {

        public new void PrintFullName()

        {

            Console.WriteLine(FirstName + " " + LastName+" -contractor");

        }

    }

இப்பொழுது டெரிவ்டு கிளாசில் உள்ள மெத்தடை அழைத்தால் பேஸ் கிளாசில் உள்ளதே கிடைக்க வேண்டுமென்றால் 2 வழிகள் இருக்கின்றது முதல் மெத்தட்.

class PartTimeEmployee : Employee

    {

        public new void PrintFullName()

        {

            base.PrintFullName();

            //Console.WriteLine(FirstName + " " + LastName+" -contractor");

        }

    }

Base என்ற கீவேர்டு மூலம் இதை செய்திருக்கின்றோம்.

இரண்டாவது வழி:

டைப் கேஸ்டிங்க்.

டெரிவ்டு கிளாஸ் ஆப்ஜெக்டை பேரன்ட் கிளாஸ் ஆப்ஜெக்டாக டைப் கேஸ்ட் செய்கின்றோம்.

static void Main(string[] args)

        {

            FullTimeEmployee FTE = new FullTimeEmployee();

            FTE.FirstName = "Full Time";

            FTE.LastName = "Employee";

            FTE.PrintFullName();

            PartTimeEmployee PTE = new PartTimeEmployee();

            PTE.FirstName = "Part Time";

            PTE.LastName = "Employee";

            ((Employee)PTE).PrintFullName();

        }

இரண்டு வழியிலும் வெளியீடு கீழ்கண்டவாறு இருக்கும்.

Full Time Employee

Part Time Employee

Press any key to continue . . .

பேரண்ட் கிளாசிற்கு ரெஃபெரஅன்ஸ் உருவாக்கி அதை டெரிவ்டு கிளாஸ் மெம்பருக்கு பாயிண்ட் செய்கின்றோம்.

Employee  PTE = new PartTimeEmployee();

            PTE.FirstName = "Part Time";

            PTE.LastName = "Employee";

            PTE.PrintFullName();

இப்பொழுதும் மேலே உள்ள வெளியீடே கிடைக்கும்.

நன்றி.

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