Today, let me tell you about ReactJs, the one everyone keeps talking about.

It's a Free and open-source front-end JavaScript Library that can do the job just like today's most popular UI Frameworks.

ReactJs was created by Jordan Walke, a Software Engineer at what was then Facebook (now renamed Meta).

React uses a Virtual DOM (Document Object Model). Before you can understand what the Virtual DOM is, you first need to know about the Real DOM. To put it simply, the Real DOM works with HTML Element Objects as a Tree Data Structure, and every time a single UI Element Changes, it re-renders parts of the UI Tree Data Structure that have nothing to do with that change. The Virtual DOM, on the other hand, first makes a copy of the UI Elements Tree Data Structure, and when a UI element changes, the change is made in that cloned UI Tree Data Structure. After that, it compares the original UI Elements Tree Data Structure with the cloned one, swaps only the UI Elements that differ into the original, and renders them. Because React uses the Virtual DOM, it makes building SPAs (Single Page Applications) easy. To keep it simple, you can think of a Single Page Application as an Application that doesn't need a Refresh or Reload. ReactJs also comes with a State Management system that passes State and Props from Parent to Child by default. Because of that, you can split your code into Single Components, which lets you build leaner, faster Hybrid Applications (or) Websites. On top of that, even though the State Management System works through inheritance by default, you can Data Bind by combining it with the Global Context API, which lets you pass State Props across levels, and the Redux Store (React-Redux), which can deliver State Props in a generalized way. That usually makes Hybrid Apps much easier to Maintain.

React has plenty of Pros, but I want to talk about 5 of them.

1. It's easy to learn

That's right. If you've already learned JavaScript, you can move over to ReactJs pretty easily. That's because the statements and syntax you write aren't all that different between JavaScript and ReactJS. On top of that, there are tons of Resources, a big Community, and lots of Tips and Tricks out there, so it's easy to learn.

2. Lots of Tools and Libraries that support React

ReactJS is a UI JavaScript Library, but with the help of its many Supported Tools and Libraries, it can work much like a Framework. That's why a lot of people mistakenly see ReactJs as a Framework.

For Routing there's React-router-dom, Wouter, React-router-redux etc. For Styling there's Styled-component, Tailwind, Twin-macro etc. For Animation there's Framer-motion, React-three/fiber etc. For Testing there's Jest, Testing-Library, Enzyme etc. And for APIs there's React-query, Axios etc. There are plenty of Supported Libraries for each Feature, and they're easy to find.

3. You can build Dynamic Websites with Reusable Components

React JS is built around a Component System. You can think of a Component as one piece split off from the whole. Since you can separate things by their own area of responsibility, you won't end up with messy Systems or Code Structures. Better yet, you can make Components Reusable. And because React JS lets you write Dynamic Statements with the help of JSX, building Dynamic Websites goes smoothly.

4. Good Performance

Looking at Performance, ReactJS uses the Virtual DOM and can build SPAs (Single Page Applications) that don't need a Reload or Refresh, so its Performance is fast and snappy.

5. You can write solid Testing

When talking about ReactJs's strengths, I have to mention Testing. ReactJS ships with Jest by default, so writing tests is easy. You can also write them with the help of other Testing Libraries, and by writing tests you can improve your Application Performance.

As for React JS's Cons, I want to talk about 3 of them.

1. You have to put together a full Setup

Since React JS is still just a UI Library, if you want to use it like a Framework, you have to pull in extra Libraries. For example, to use routes, if they aren't provided by Default, you have to add react-router-dom and import it before you can use Routing. In real Frameworks, the Routing System follows the Folder Route Structure.

2. JSX Syntax can get confusing

Because ReactJS uses JSX (JavaScript XML) Syntax, it can be a bit disorienting for beginners. For example, the {} you use when writing Dynamic Syntax can be a little confusing at first. Once you've practiced writing it more, you'll get the hang of using {}.

3. With lots of Components, you can't see the View Path

Because React JS uses a Component System, once you have lots of Sub Components, you can't get a rough View Path overview of which Sub Component sits under which.

ဒီနေ့မှာတော့ အပြောများ၊အရေးများတဲ့ ReactJs အကြောင်းကိုပြောပြပါရစေ

ခုခေတ်ကာလမှာ ရေပန်းအစားဆုံးဖြစ်တဲ့ UI Frameworkတွေ နည်းတူ အလုပ်လုပ်နိုင်တဲ့ Free and open-source front-end JavaScript Library အမျိုးအစားတစ်ခုပဲဖြစ်ပါတယ်။

ReactJs ကိုတော့အရင်က Facebook (အခုအမည်ပြောင်း Meta Facebook) က Software Engineer တစ်ဦးဖြစ်တဲ့ Jordan Walke ကတီထွင်ထားခဲ့တာပါ။

React မှာတော့ Virtual DOM (Document Object Modal) ကို သုံးထားတာဖြစ်ပါတယ်။ Virtual DOM ဘာလဲဆိုတာမသိခင်မှာ အရင် Real DOM အကြောင်းကိုသိထားဖို့လိုအပ်ပါတယ်။ Real DOM ဆိုတာကတော့ နားလည်လွယ်အောင်ပြောရမယ်ဆိုရင် HTML Element Object တွေကို Tree Data Structure အတိုင်းအလုပ်လုပ်ပြီး UI Element တစ်ခု Changes လုပ်တိုင်းမှာ မဆိုင်တဲ့ UI Tree Data Structure ကို render လုပ်ပြီး လုပ်ဆောင်ပေးနိုင်တာကို ခေါ်တာဖြစ်ပါတယ်။ Virtual DOM ဆိုတာကတော့ UI Elements Tree Data Structure ကို အရင်ပုံပွားယူပြီး UI element တစ်ခုပြောင်းလဲမယ်ဆိုရင် cloned UI Tree Data Structure မှာ လုပ်တာဖြစ်ပါတယ်။ပြီးတဲ့အခါ မူရင်း UI Elements Tree Data Structure နဲ့ cloned UI Tree Data Structure ကို နှိုင်းယှဉ်ပြီး မတူညီတဲ့ UI Element ကို မူရင်း UI Elements Tree Data Structure မှာ အစားထိုးပြီး render လုပ်ထားကို ခေါ်တာဖြစ်ပါတယ်။ ဆိုတော့ React က Virtual DOM ကို သုံးထားတာကြောင့် SPA (Single Page Application) တွေကို လွယ်လွယ်ကူကူလုပ်ဆောင်ပေးနိုင်တာပဲဖြစ်ပါတယ်။ SPA (Single Page Application) ဆိုတာကတော့ နားလည်လွယ်အောင် ပြောရမယ်ဆိုရင် Refresh, Reload မလိုတဲ့ သဘောသဘာဝ ရှိတဲ့ Applicationကို Single Page Application လို့မှတ်ယူလို့ရပါတယ်။ ReactJs မှာတော့ State ဆိုတဲ့ Props တွေကို Default အနေနဲ့ Parent to Child ကူးပြောင်းပေးနိုင်တဲ့ State Management စနစ်တစ်ခုလဲ ပါဝင်ပါသေးတယ်။ အဲ့လိုပါဝင်လာတာကြောင့် Single Component တွေခွဲရေးလို့ရတာမလို့ ပိုမိုကျစ်လစ်မြန်ဆန်တဲ့ Hybrid Application (or) Website တွေကို ဖန်တီးပေးနိုင်ပါတယ်။ အဲ့အပြင် State Management System မှာ Default အနေနဲ့ Inheritation သဘောနဲ့ လုပ်နေပေမဲ့လဲ State Props တွေကို အဆင့်ကျော်ပို့ပေးလို့ရတဲ့ Global Context API တွေ, State Props ကို Generalize ပို့ဆောင်ပေးနိုင်တဲ့ Redux Store (React-Redux) တွေ နဲ့ ပေါင်းပြီး Data Blind လို့ရတာကြောင့် အများအားဖြင့် Hybrid App တွေကို Maintain လွယ်လွယ်ကူကူလုပ်လို့ရနိုင်ပါတယ်။

React ရဲ့ Pros တွေ အများကြီးရှိတဲ့အထဲက အချက် (၅) ချက်နဲ့ ပြောပြချင်ပါတယ်။

1.လေလာရတာလွယ်ကူခြင်း

ဟုတ်ပါတယ်။ JavaScript ကို လေ့လာထားတဲ့ သူတွေဆိုရင် ReactJs ဘက်ကိုလွယ်လွယ်ကူကူ ကူးပြောင်းလို့ရနိုင်ပါတယ်။ ရေးရတဲ့ statement တွေ , syntax တွေက JavaScript နဲ့ ReactJS ကို များကြီးမကွာလို့ပဲဖြစ်ပါတယ်။အဲ့အပြင် လေ့လာစရာ Resource တွေ, Community ,Tip and Trick တွေကလဲ အများကြီးရှိတာမို့ လွယ်လွယ်ကူကူ လေ့လာလို့ရနိုင်ပါတယ်။

2.React ကို Support ပေးနိုင်တဲ့ Tools တွေ Libraryတွေများခြင်း

ReactJS က UI JavaScript Library ဖြစ်ပေမဲ့ များစွာသော Supported Tools , Library တွေရဲ့ အကူအညီနဲ့အတူ Framework ဆန်ဆန်အလုပ်လုပ်နိုင်တာပဲဖြစ်ပါတယ်။အဲ့ဒါကြောင့် ReactJs ကို Framework ဆိုပြီးအများအားအမြင်မှားတတ်ကြပါတယ်။

Routing အတွက် React-router-dom, Wouter, React-router-redux etc, Styling ဆိုရင် Styled-component, Tailwind, Twin-macro etc , Animation ဆိုရင် Framer-motion, React-three/fiber etc, Testing အတွက်ဆို Jest, Testing-Library, Enzyme etc, API အတွက်ဆိုရင် React-query, Axios etc များစွာ သက်ဆိုင်ရာ Feature အလိုက် Supported Library များစွာရှိသလို ရှာရတာလဲလွယ်ကူပါတယ်။

3.Reusable Component တွေနဲ့ အတူ Dynamic Website တွေဖန်တီးနိုင်ခြင်း

React JSကို Component System အတိုင်းပုံဖော်ထားတာဖြစ်ပါတယ်။ Componentဆိုတာက တစ်ခုလုံးထဲကနေ တစ်စိတ်တပိုင်းပိုင်းခြားထားခြင်းလို့ ခေါ်ဆိုလို့ရပါတယ်။ ကိုယ်က သက်ဆိုင်ရာကဏ္ဏအလိုက် သီခြားပိုင်းခြားထားနိုင်တာကြောင့် ရှုပ်ထွေးနေတဲ့ System , Code Structure တွေကိုဖြစ်စေမှာမဟုတ်ပါဘူး ။ အဲ့အပြင် Component ကို ပိုမိုကောင်းမွန်အောင် Reusable ဖြစ်တဲ့အထိကို ဖန်တီးနိင်သေးတာပဲဖြစ်ပါတယ်။ ပြီးတဲ့အခါ React JS က JSX အကူအညီနဲ့ Dynamic Statement တွေဖန်တီးထားနိုင်တာကြောင့် Dynamic Website တွေကိုအဆင်ပြေပြေဖန်တီးနိုင်မှာဖြစ်ပါတယ်။

4.Peformance အပိုင်းဆိုင်ရာ ကောင်းမွန်ခြင်း

Performance ပိုင်းကို ကြည့်ရင်လဲ ReactJS က Virtual DOM ကို သုံးထားပြီး Reload,Refreshမလို တဲ့ SPA(Single Page Application) ဖန်တီးနိုင်တာကြောင့် Performance အပိုင်းက မြန်ဆန်သွက်လက်စေပါတယ်။

5.Testing ကောင်းကောင်းရေးလို့ရနိုင်ခြင်း

ReactJs ရဲ့ ကောင်းကွက်တွေပြောတဲ့အခါ Testing အပိုင်းကို မဖြစ်မနေပြောပြရမှာဖြစ်ပါတယ်။ ReactJS က Default အနေနဲ့ Jest ကိုထည့်ပေးထားကြောင့် Testing အပိုင်းရေးတဲ့အခါ လွယ်လွယ်ကူကူရေးလို့ရပါတယ်။ အဲ့ပြင် အခြားTesting Library ရဲ့ အကူအညီနဲ့လဲရေးလို့ရတာကြောင့် Testing တွေရေးခြင်းဖြင့် Application Performance ကိုမြင့်တင်လို့ရပါတယ်။

React JS ရဲ့ Cons ကိုတော့ အချက်(၃) ချက် ပြောပြချင်ပါတယ်။

1. Setup အပြည့်အစုံသွင်းရခြင်း

React JSက UI Library ပဲဖြစ်သေးတာကြောင့် Framework ဆန်ဆန်သုံးဖို့ဆိုရင် ပြန်ပြီး Library တွေပြန်ခေါ်ပေးရတာပဲဖြစ်ပါတယ်။ ဥပမာ- route သုံးဖို့ဆိုရင် Default ပေးထားရှိသလို မရှိရင် react-router-dom ပြန်ထည့်ပေးရသလို ပြန်ခေါ်သုံးမှာသာ Routing ကို သုံးလို့ရမှာဖြစ်ပါတယ်။ Framework စစ်တွေမှာဆိုရင်တော့ Routing System တွေက Folder Route Structure တိုင်းလုပ်ထားတာဖြစ်ပါတယ်။

2.JSX Syntax ရောထွေးနိုင်ခြင်း

ReactJS က JSX(JavaScript XML) Syntax ကို သုံးထားတာကြောင့် စလေ့လာသူတွေအဖို့တော့ နည်းနည်းမျက်စိလည်စေပါတယ်။ ဥပမာ- Dynamic Syntax တွေကိုဖန်တီးတဲ့နေရာမှာ {} နဲ့ နည်းနည်းမျက်စိလည်စေပါတယ်။နောက်ပိုင်းရေးကျင့်တာများရင်တော့ {} သုံးတာနားလည်သဘောပေါက်သွားစေမှာပါ။

3. Component အပိုင်းများရင် View Path နဲ့ ကြည့်လို့မရခြင်း

React JS က Component System ကိုသုံးထားတာကြောင့် Sub Component တွေများကြီးဖြစ်လာရင် ဘယ်အောက်မှာ Sub Component ရှိတာဆိုတာကို အကြမ်းအမြင် View Path သဘောကြည့်လို့မရခြင်းဖြစ်ပါတယ်။