Adriyan Anik

30/01/2024

08/05/2020

If you look a little better, you will see that the components of ReactJS are used like a tree data structure. You can take the parent component as the root of this tree. And the child components are branches or conch branches. You can easily pass data from Parent Component to Child Component through Props.
But you can never pass data from Child Component to Parent Component through Props.

Before making any component you have to take out the big component money. After that you have to think about what smaller components can be extracted from there.

Since the data from the child component cannot be sent to the parent component, we have to keep the main data of the component inside the parent component and pass it to the child component in the form of props. Although the data from the child component cannot be passed to the parent component, we can call any function of the parent component from the child component. And this way we can change the data of the parent component.

In that case you need to create the necessary functions to change the data in the Parent Component and when the Child Component is called, you have to send the functions in the form of Props to the Child. The Child Component will call the functions as needed, and the data in the Parent Component will be changed.

If you look at the example, you will see that we first create a large component called Profile. Later I divide this big component into many smaller components. We keep the main data inside the Parent Component and Profile Component and send it to the Child Component through Props. Try to Loosly Coupled the Child Components at all times so that these Components can be used from any other Component.

The profile component in the example is the parent component or the root of the tree. It has three child components.
• Bio Component
• Skills Component
Links Component

These conch components can again have numerous branch components. However, before designing the component, you must design a tree for the component. Then there will be no problem to make the component or to think about how to pass the data to the child component or to decide which component to keep the main data.

আপনি যদি একটু ভাল ভাব লক্ষ্য করেন তাহলে দেখবেন ReactJS এর কম্পোনেন্ট গুলো একটা ট্রি ডাটা স্ট্রাকচারের মত ব্যবহার করে। Parent Component কে আপনি এই ট্রি এর রুট বা মূল ধরতে পারেন। আর Child Component গুলো ব্রাঞ্চ বা শাঁখা প্রশাখা। আপনি খুব সহজেই Parent Component থেকে Child Component এর কাছে Props এর মাধ্যমে ডাটা পাস করতে পারবেন।
কিন্তু কখনোই Child Component থেকে Props এর মাধ্যমে Parent Component এর কাছে ডাটা পাস করতে পারবেন না।

যে কোন Component বানানোর পূর্বে আপনাকে বড় কম্পোনেন্ট টাকে বের করে নিতে হবে। তার পরে সেখান থেকে আর ছোট কি কি Component বের করা যায় সেটা নিয়ে ভাবতে হবে।

যেহেতু Child Component থেকে ডাটা Parent Component এ পাঠানো যায় না, তাই আমাদেরকে Component এর মেইন ডাটাটা Parent Component এর ভিতরে রাখতে হবে এবং Props আকারে Child Component এ পাস করতে হবে। Child Component থেকে ডাটা Parent Component এ পাস করা না গেলেও আমরা Child Component থেকে Parent Component এর যে কোন ফাংশন কল করতে পারি। আর এভাবেই আমরা Parent Component এর ডাটা পরিবর্তন করতে পারব।

সেক্ষেত্রে Parent Component এ ডাটা পরিবর্তন করার জন্য প্রয়োজনীয় ফাংশন তৈরি করে রাখতে হবে এবং যখন Child Component টা কল করা হবে তখন Props আকারে ফাংশন গুলোকে Child এর কাছে পাঠিয়ে দিতে হবে। প্রয়োজন অনুসারে Child Component ফাংশন গুলোকে কল করবে, এবং Parent Component এ ডাটা পরিবর্তন হবে যাবে।

আপনারা যদি এক্সাম্পল এর দিকে লক্ষ্য করেন তাহলে দেখবেন, আমরা প্রথমে বড় একটা Component বানাই যার নাম দেই Profile. পরে এই বড় Component কে ছোট ছোট অনেক গুলো Component এ ভাগ করে ফেলি। মেইন ডাটা গুলো আমরা Parent Component মানে Profile Component এর ভিতরেই রাখি এবং Props এর মাধ্যমে Child Component গুলোর কাছে পাঠিয়ে দেই। Child Component গুলোকে সব সময় Loosly Coupled করার চেষ্টা করবেন যেন অন্য যে কোনো Component থেকে এই Component গুলোকে ব্যবহার করা যায়।

এক্সাম্পল এ Profile Component টা হচ্ছে Parent Component বা ট্রি এর রুট। এর তিনটা Child Component বা শাঁখা আছে--
• Bio Component
• Skills Component
• Links Component

এই শাঁখা Component গুলোর আবার অসংখ্য প্রশাখা Component থাকতে পারে। তবে Component Design করার পূর্বে অবশ্যই Component এর জন্য একটা ট্রি ডিজাইন করে নিবেন। তাহলে Component টা বানাতে বা কিভাবে Child Component এর কাছে ডাটা পাস করবেন সেই বিষয়টা ভাবতে অথবা কোন Component এর কাছে মেইন ডাটা গুলো রাখবেন সে গুলো সিদ্ধান্ত নিতে কোন সমস্যা হবে না।

28/04/2020

One of the features of ReactJS is JSX. At first glance, it seems that what is the HTML code inside the JavaScript code? But JSX doesn't really mean HTML code inside JavaScript.

JSX - Javascript Extension
This is a special syntax of ReactJS. It's just like HTML. But BabelJS converts this syntax to pure JavaScript code. If we wish, we can create applications using JavaScript code excluding JSX. But in this case our code will be much more verbose. And managing the code will be a lot of trouble.

For example, think about your div, which is -
I am developer
This code will look like this after converting to BabelJS -
React.createElement ('div', null, 'I am div')
From the above example you must understand how easy JSX is and why React has come up with a feature like JSX.

If you want to use JSX, you need to be aware of some of its features.

Such as -

• Wherever you do not use JSX code, you have to import React in that file. If there is no React inside the scope, your compiler will show you an error.

• When you return a JSX from the render method or from a functional component, you can only place one element at the root level. If there are more than one child inside this root element then there is no problem. But only a pea is a JSX element you can return.

• You can use dot notation inside JSX code as you would with a JavaScript object.

You can write any JavaScript code inside the JSX code. For this you need to write the JavaScript code inside the opening curly 6 and the closing curly 6. But remember, you can only execute a JavaScript statement inside. Functions, loops or conditions cannot be used here. However, arrow functions, variable declarations, function calls, conditional operators can be used.
You can store any JSX code inside a variable. You can also return from any function.
So if any other common function generates a view for you, you can call that function inside JSX.

As a child of JSX you can provide any single element or any array. If there is no element then you can provide null. If null is provided as JSX's child then JSX will not render anything.

We can pass props like attributes inside JSX. Again we can pass a Props object inside the JSX using the spread operator.

False False, null, undefined, true simple will be ignored inside JSX. These Boolean values ​​are what we need to render something conditionally.

If we know these things about JSX, we will be able to deal with all kinds of situations. But you have to practice a lot to remember everything.

ReactJS এর অন্যতম একটা ফিচার হচ্ছে JSX. প্রথম দিকে দেখলে মনে হয় জাভাস্ক্রিপ্ট কোডের ভিতরে এইচটিএমএল কোড কি করছে? কিন্তু আসলে JSX মানে জাভাস্ক্রিপ্টের ভিতরে এইচটিএমএল কোড না।

JSX - Javascript Extension
এটা ReactJS এর স্পেশাল একটা সিনট্যাক্স। এটা শুধু দেখতেই এইচটিএমএল এর মত। কিন্তু BabelJS এই সিনট্যাক্স কে কনভার্ট করে পিউর জাভাস্ক্রিপ্ট কোডে রূপান্তর করে দেই। আমরা ইচ্ছে করলেই JSX বাদ দিয়ে শুধু জাভাস্ক্রিপ্ট কোড ব্যবহার করেও অ্যাপ্লিকেশন বানাতে পারি। কিন্তু এই ক্ষেত্রে আমাদের কোডটা অনেক বেশি ভার্বোস হয়ে যাবে। এবং কোড ম্যানেজ করতে অনেক কষ্ট হবে।

উদাহরণ সরূপ নিজের ডিভ টার কথা চিন্তা করা যা -
I am developer
এই কোডটা BabelJS কনভার্ট করার পরে ঠিক এমন হবে দেখতে -
React.createElement('div', null, 'I am div')
ওপরের উদাহরণ থেকে এটা নিশ্চয়ই আপনি বুঝতে পারছেন JSX কতটা সহজ এবং কেন React JSX এর মত একটা ফিচার নিয়ে এসেছে।

JSX ব্যবহার করতে চাইলে এর আরও কিছু বৈশিষ্ট্য সম্পর্কে আপনাদের অবগত থাকতে হবে। যেমন -

• যেখানেই আপনি JSX কোড ব্যবহার করেন না কেন ওই ফাইলে React কে ইম্পোর্ট করে নিতে হবে। যদি স্কোপের ভিতরে React না থাকে তাহলে আপনার কম্পাইলার আপনাকে ইরর শো করবে।

• আপনি render মেথড থেকে অথবা ফাংশনাল কম্পোনেন্ট থেকে যখন কোন JSX রিটার্ন করবেন তখন আপনি রুট লেভেল এ শুধু মাত্র একটি এলিমেন্ট রাখতে পারবেন। এই রুট এলেমেন্টের ভিতরে যদি একাধিক চিলড্রেন থাকে তাহলে কোন প্রব্লেম নেই। কিন্তু শুধু মটর একটি JSX এলিমেন্টই আপনি রিটার্ন করতে পারবেন।

• আপনি JSX কোডের ভিতরে ডট নোটেশন ব্যবহার করতে পারবেন যেমনটা আপনি জাভাস্ক্রিপ্ট অবজেক্টের সাথে করতে পারেন।

• JSX কোডের ভিতরে আপনি যে কোনো জাভাস্ক্রিপ্ট কোড লিখতে পারবেন। এর জন্য আপনাকে ওপেনিং কার্লি { এবং ক্লোসিং কার্লি } এর ভিতরে জাভাস্ক্রিপ্ট কোডটা লিখতে হবে। তবে মনে রাখবেন, এর ভিতরে আপনি শুধু মাত্র একটি জাভাস্ক্রিপ্ট স্টেটমেন্টই এক্সিকিউট করতে পারবেন। ফাংশন, লুপ বা কন্ডিশন এখানে ব্যবহার করা যাবে না। তবে অ্যারো ফাংশন, ভ্যারিয়েবল ডিক্লারেশন, ফাংশন কল, কন্ডিশনাল অপারেটর এই গুলো ব্যবহার করা যাবে।

• আপনি যে কোন JSX কোডকে ভ্যারিয়েবল এর ভিতরে স্টোর করতে পারেন। আবার যে কোন ফাংশন থেকে রিটার্নও করতে পারেন। তাই যদি অন্য কোন সাধারণ ফাংশন আপনার জন্য ভিউ জেনারেট করে থাকে তাহলে সেই ফাংশন টা আপনি JSX এর ভিতরে কল করতে পারবেন।

• JSX এর চিলড্রেন হিসেবে আপনি যে কোনো সিঙ্গেল এলিমেন্ট অথবা যে কোন অ্যারে প্রোভাইড করতে পারেন। যদি কোন এলিমেন্ট না থাকে সেই ক্ষেত্রে আপনি null প্রোভাইড করতে পারেন। যদি JSX এর চাইল্ড হিসেবে null প্রভাইড করা হয় তাহলে JSX কোন কিছুই রেন্ডার করবে না।
• আমরা JSX এর ভিতরে অ্যাট্রিবিউট এর মত করে Props পাস করতে পারি। আবার আমরা একটা Props অবজেক্টকে স্প্রেড অপারেটর ব্যবহার করে JSX এর ভিতরে পাস করতে পারি।

• JSX এর ভিতরে false, null, undefined, true সিম্পলই ইগনোরড হয়ে যাবে। এই Boolean ভ্যালু গুলো আমাদের দরকার হয় কন্ডিশনাল ভাবে কোন কিছু রেন্ডার করার কাজে।

JSX সম্পর্কে এই বিষয় গুলো জানা থাকলেই আমরা সব ধরনের সিসুয়েশন এর মোকাবেলা করতে পারব। তবে সব কিছু মনে রাখার জন্য আপনার প্রচুর প্র্যাকটিস করতে হবে।

21/04/2020

Data and logic layer:

Everything in ReactJS is based on data. We need to generate views by linking to the data. Views will be updated automatically if we change our data over time or through various side effects. So when we work on ReactJS, our first and foremost task will be with the data layer and we will need different logics to update this data. We will do all of that inside the data and logic layers.

We have four total systems for working with data and logic layers -

• State - A component's own data is kept inside the state.This is the most important system to keep data. Because the data you keep inside the state will only change the view if the data is updated. If the value of any other variable or property is changed, no effect will be placed on our view. And the value of State is visible inside each component, there is no way to access one component state from another component.

• Variable or Properties - Components are created in two main ways in ReactJS. We create all our components using classes or functions.Many times, some variables or properties are needed inside these classes or functions.As long as the component is alive, the values ​​of this variable will remain. But if the value of this variable or property changes, the view will not change.

• Methods or Functions - Inside the component we create different methods or functions to perform different logic implements or change state as we need.Most components of a component have logic like this inside a small method or function.

• Life Cycle Methods - We can create functions or methods whenever we like.But React provides some life cycle method to change our data with different access at different times of a component's lifetime.As a result, we can do some extra work when a component is created, also there are numerous lifecycle methods to keep in control at various times like component update deletions, data changes, which play a very important role in development.

Representation Layer:

The data layer is very important in ReactJS, but we can make something out of the data layer altogether. But we can't make a component without the view or representation layer.

ReactJS uses JSX to display any information in the browser. It is basically an extended syntax of JavaScript.

The representation layer in ReactJS is static.We'll make it once.Later I will do all the work on the data layer.Because if the data changes, the representation or view will be updated automatically.

ডাটা এবং লজিক লেয়ারঃ

ReactJS এ সব কিছুই হয় ডাটার ওপরে ভিত্তি করে। আমাদের ভিউটা জেনারেট করতে হবে ডাটার সাথে লিংক রেখে। সময়ের সাপেক্ষে বা বিভিন্ন সাইড ইফেক্টের মাধ্যমে আমরা আমাদের ডাটা গুলোকে পরিবর্তন করলে অটোমেটিক ভাবে ভিউ আপডেট হয়ে যাবে। তাই ReactJS এ যখন আমরা কাজ করব তখন আমাদের প্রথম এবং প্রধান কাজ থাকবে ডাটা লেয়ার নিয়ে এবং এই ডাটা আপডেট করার জন্য বিভিন্ন লজিক দরকার পড়বে। সেই সব কিছু আমরা করব ডাটা এবং লজিক লেয়ারের ভিতরে।

ডাটা এবং লজিক লেয়ার নিয়ে কাজ করার জন্য আমাদের কাছে টোটাল চারটা সিস্টেম আছে -

• State - একটা কম্পোনেন্টের নিজস্ব ডাটা রাখা হয় State এর ভিতরে। এটাই সব থেকে গুরুত্বপূর্ণ সিস্টেম ডাটা রাখার। কারণ আপনি স্টেট এর ভিতরে যেই ডাটা গুলো রাখবেন শুধুমাত্র সেই ডাটা পরিবর্তন করলে ভিউটা আপডেট নেবে। অন্য কোনো ভ্যারিয়েবল বা প্রোপার্টিস এর ভ্যালু পরিবর্তন হলেও আমাদের ভিউ এর ওপরে কোন রকম কোন ইফেক্ট পরবে না। এবং State এর ভ্যালু প্রতিটা কম্পোনেন্টের ভিতরেই ভিসিবল, একটা কম্পোনেন্ট স্টেট অন্য কম্পোনেন্ট থেকে এক্সেস করার কোন উপায় নেই।

• Variable or Properties - ReactJS এ প্রধাণত দুইভাবে কম্পোনেন্ট তৈরি করা হয়। ক্লাস অথবা ফাংশন ব্যবহার করেই আমরা আমাদের সমস্ত কম্পোনেন্ট বানিয়ে থাকি। অনেক সময় এই ক্লাস বা ফাংশন গুলোর ভিতরে কিছু ভ্যারিয়েবল বা প্রোপার্টিস এর দরকার হয়। যতক্ষণ কম্পোনেন্টটা জীবিত থাকবে ঠিক ততক্ষণ এই ভ্যারিয়েবল এর ভ্যালু গুলোও জীবিত থাকবে। কিন্তু এই ভ্যারিয়েবল বা প্রোপার্টিস এর ভ্যালু পরিবর্তিত হলে ভিউ পরিবর্তন হবে না।

• Methods or Functions - কম্পোনেন্ট এর ভিতরে আমরা আমাদের প্রয়োজন মত, বিভিন্ন লজিক ইমপ্লেমেন্ট করার জন্য বা স্টেট পরিবর্তন করার জন্য বিভিন্ন মেথড বা ফাংশন তৈরি করে থাকি। একটা কম্পোনেন্টের বেশির ভাগ লজিক গুলো থাকে এই রকম ছোটো ছোটো মেথড বা ফাংশনের ভিতরে।

• Life Cycle Methods - আমরা নিজেরা নিজের মন মত যখন খুশি তখন ফাংশন বা মেথড বানাতে পারি। কিন্তু একটা কম্পোনেন্ট এর জীবনকালের বিভিন্ন সময়ে এক্সেস নিয়ে আমাদের ডাটা কে বিভিন্ন পরিবর্তন করার জন্য React কিছু লাইফ সাইকেল মেথড প্রোভাইড করে থাকে। এর ফলে একটা কম্পোনেন্ট যখন ক্রিয়েট হয় তখন আমরা কিছু এক্সট্রা কাজ করতে পারি, এছাড়াও কম্পোনেন্ট আপডেট ডিলিট, ডাটা পরিবর্তন এই রকম বিভিন্ন সময়ে কন্ট্রোল টা আমাদের হাতে রাখার জন্য অসংখ্য লাইফ সাইকেল মেথড আছে, যেগুলো ডেভেলপমেন্টে খুবই গুরুত্বপূর্ণ কিছু ভূমিকা পালন করে থাকে।

রিপ্রেসেন্টেশন লেয়ারঃ

ReactJS এ ডাটা লেয়ার খুব গুরুত্বপূর্ণ হলেও ডাটা লেয়ারকে সম্পুর্ণ বাদ দিয়ে আমরা একটা কিছু বানাতে পারি। কিন্তু ভিউ বা রিপ্রেসেন্টেশন লেয়ার বাদ দিয়ে আমরা একটা কম্পোনেন্ট বানাতে পারবো না।

ReactJS ব্রাউজারে যে কোনো তথ্য দেখানোর জন্য ব্যবহার করে থাকে JSX. এটা মূলত জাভাস্ক্রিপ্টের এক্সটেন্ডেড সিনট্যাক্স।
ReactJS এ রিপ্রেসেন্টেশন লেয়ারটা স্ট্যাটিক। আমরা একবারই এটা তৈরি করব। পরবর্তিতে সমস্ত কাজ করব ডাটা লেয়ারে। কারণ ডেটা পরিবর্তন হলে অটোমেটিক ভাবেই রিপ্রেসেন্টেশন বা ভিউটা আপডেট হয়ে যাবে।

পরবর্তী লেসনে আমরা JSX সম্পর্কে জানবো।

18/04/2020

What is the component?

Compact is the smallest and most important feature of ReactJS. A component is actually a JavaScript function or a JavaScript class that refers to the ReactJS component class's properties.

In ReactJS, the component may be too small or too large like a normal HTML file. However, the components are usually divided into logical smaller components. Later, a large project is made by pairing the pieces together.

A shopping cart can be thought of as an example. There are many product list or card view. So many items do not have to be created in React. Creating a product component releases that component itself. Again inside this component, smaller components can be created for Add to Cart, Add to Wishlist and Price. There is a component to search and filter on the top, and there may be a Cart and List Item component to view the Cart List.

All of these are examples, in fact how to design a component in your project will tell your project requirements. But I hope you get a clearer idea of ​​what the component in React really means.

What is inside the component?
The main task of the component is to create a user interface for a small part. The user interface really means the interactive user interface. This means that there may be dynamic content, user can get feedback from it, different side effects, conditionally change the view. Generating a view is the main function of a component, while the rest of the work is optional. Because there is no word that all views are interactive, such as a paragraph.

Basically we divide a component into two layers.
• Data and Logic Layer (Optional)
• Representation layer (recurred)

কম্পোনেন্ট কি?

ReactJS এর সব থেকে ছোট এবং সব থেকে গুরুত্বপূর্ণ ফিচার হচ্ছে কম্পোনেন্ট। একটা কম্পোনেন্ট বলতে আসলে একটা জাভাস্ক্রিপ্ট ফাংশন বা জাভাস্ক্রিপ্ট ক্লাস যা ReactJS এর কম্পোনেন্ট ক্লাস এর বৈশিষ্ট্যকে নিজের ভিতরে ধারণ করে তাকে বোঝায়।

ReactJS এ কম্পোনেন্ট খুবই ছোট হতে পারে অথবা সাধারণ এইচটিএমএল ফাইল এর মত অনেক বড় হতে পারে। তবে সাধারণত কম্পোনেন্ট গুলোকে লজিক্যাল ছোট ছোট কম্পোনেন্টে ভাগ করে ফেলা হয়। পরে সেই টুকরা টুকরা কম্পোনেন্ট কে জোড়া লাগিয়েই (কম্পোজিশন) একটা বড় প্রজেক্ট করা হয়।

উদারণ সরূপ একটা শপিং কার্টের কথা চিন্তা করা যেতে পারে। এখানে অনেক গুলো প্রডাক্ট এর লিস্ট বা কার্ড ভিউ থাকে। এত গুলো আইটেম React এ তৈরি করতে হয় না। একটা প্রোডাক্ট কম্পোনেন্ট বানিয়ে সেই কম্পোনেন্টাকেই রিইউজ করা হয়। আবার এই কম্পোনেন্টের ভিতরে Add to Cart, Add to Wishlist and Price এর জন্য আরও ছোট ছোট কম্পোনেন্ট বানানো যেতে পারে। ওপরে সার্চ এবং ফিল্টার করার জন্য একটা কম্পোনেন্ট থাকে এবং Cart List দেখার জন্য Cart and List Item কম্পোনেন্ট থাকতে পারে।

এগুলো সবই উদাহরণ, আসলে আপনার প্রজেক্টে কিভাবে কম্পোনেন্ট ডিজাইন করতে হবে সেটা আপনার প্রোজেক্টের রিকুয়ারমেন্টস বলে দিবে। কিন্তু আমি আশা করছি আপনি একটা ক্লিয়ার ধারণা পেয়েছেন যে React এ কম্পোনেন্ট বলতে আসলে কি বোঝানো হয়।

কম্পোনেন্টের ভিতরে কি কি থাকে?
কম্পোনেন্টের মূল কাজ হচ্ছে একটা ছোট্ট অংশের জন্য ইউজার ইন্টারফেস তৈরি করা। ইউজার ইন্টারফেস বলতে আসলে বোঝাতে চাচ্ছি ইন্টারেক্টিভ ইউজার ইন্টারফেস। মানে সেখানে ডাইনামিক কন্টেন্ট থাকতে পারে, ইউজার এর কাছে থেকে ফিডব্যাক একসেপ্ট করতে পারে, বিভিন্ন সাইড ইফেক্ট থাকতে পারে, কন্ডিশনালি তার ভিউটা পরিবর্তন হতে পারে। একটা ভিউ জেনেরেট করাটা একটা কম্পোনেন্ট এর প্রধান কাজ, বাকি কাজ গুলো অপশনাল। কারণ সমস্ত ভিউ যে ইন্টারেক্টিভ হবে এমন কোন কথা নেই, যেমন একটা প্যারাগ্রাফ।

একটা কম্পোনেন্ট কে আমরা সাধারনত দুইটা লেয়ার এ ভাগ করে থাকি।
• ডাটা এবং লজিক লেয়ার (অপশনাল)
• রিপ্রেসেন্টেশন লেয়ার (রিকুয়ারড)

পরবর্তী লেসনে আমরা কম্পোনেন্টের এই দুইটা লেয়ার নিয়ে আলোচনা করবো।

13/04/2020

In this chapter we have discussed Create-React-App with React's CLI (Command Line Interface) tool. Using this tool, you can easily create a ReactJS application. Create-React-App will give you all the support you need in the React app.

Create-React-App basically gives you the following benefits -
• Development server
• Code optimization
• Babel & Webpack Boilerplate Project Setup
• CSS, CSS Module, Sass, Pre and Post CSS support
• Easy to work with Image, Fonts and File
• Flow, Typescript and Relay integration
• Facilities of Environment Variable
• Testing Environment Using Jest
• Server integration using Proxy
• Built in Development and Production Scripts

You do not have to do anything for yourself to get the above features, but in some cases you may need to do a little work.
Create-React-App provides us four scripts -

• Start - This script allows you to open your application from the command line interface to the development server. It will run a NodeJS server for you and serve the React application as a static file. You will also get the benefit of Hot Module Replacement. You can use this command like npm start or yarn start

• Build - When your application is ready for deployment, you will build your project with this command. It requires your code
o Optimize
o Will minify
o Creates source map
o Generate CSS files
o Optimize files and images
o Converts the source code to Chang
o Will do much more
This command will do all the optimization needed to send an application to production and we do not need any configuration. Then there are some applications where we need customization like our own, in which case we can modify the built-in configuration ourselves. The command for this is - npm run build or yarn run build

• Test - Create-React-App provides us with a propert testing environment. We can test React Application in this environment without setting up any extra tools. However, advanced testing will require the help of other packages or modules. The command for testing is - npm test or yarn test

• Eject - When you create an application using Create-React-App, all configuration files and script files will be hidden. If you want to get all these files then you have to use this command. The configuration that Create-React-App gives us doesn't always need to be changed. And don't forget to update them so that the files are kept hidden. If for some reason we need to update these files then we use this command. However, once you eject, you can not roll back to the previous position. So do not use this command without being sure. You can use this command like this - npm run eject or yarn run eject

[Note: If yarn is not installed on your PC, you must first install this package globally - npm i -g yarn]

When you create an application using Create-React-App, you can install any dependencies like normal node applications, and write your own script.

আজ আমরা জানবো Create-React-App, React এর CLI (Command Line Interface) টুলসটা নিয়ে। এই টুলসটা ব্যবহার করে আপনি খুব সহজেই একটা ReactJS অ্যাপ্লিকেশন তৈরি করতে পারবেন।

React অ্যাপ্লিকেশনে যা যা ফিচার আপনার দরকার তার সমস্ত সাপোর্ট আপনাকে দিবে Create-React-App।
Create-React-App আপনাকে মূলত নিচের সুবিধা গুলো দিয়ে থাকে -

• ডেভেলপমেন্ট সার্ভার
• কোড অপটিমাইজেশন
• Babel & Webpack বয়লারপ্লেট প্রোজেক্ট সেটআপ
• CSS, CSS Module, Sass, Pre and Post CSS এর সাপোর্ট
• Image, Fonts and File নিয়ে কাজ করার সহজ সিস্টেম
• Flow, Typescript and Relay ইন্টিগ্রেশন
• Environment Variable এর ফ্যাসিলিটিস
• Testing Environment Using Jest
• Proxy ব্যবহার করে সার্ভার ইন্টিগ্রেশন
• Built in Development and Production Scripts

উপরউক্ত ফিচার গুলো পাওয়ার জন্য আপনার নিজে থেকে তেমন কিছুই করতে হবে না আবার কিছু ক্ষেত্রে অল্প কিছু কাজ করতে হতেও পারে।
Create-React-App আমাদেরকে চারটি স্ক্রিপ্ট প্রোভাইড করে থাকে -

• Start - এই স্ক্রিপ্টের মাধ্যমে আপনি কমান্ড লাইন ইন্টারফেস থেকে আপনার অ্যাপ্লিকেশনটা ডেভেলপমেন্ট সার্ভারে ওপেন করতে পারবেন। এটা আপনার জন্য একটা NodeJS সার্ভার রানিং করবে এবং React অ্যাপ্লিকেশনটাকে স্ট্যাটিক ফাইল হিসেবে সার্ভ করবে। এর সাথে আপনি Hot Module Replacement এর সুবিধাও পাবেন। এই কমান্ডটা আপনি এভাবে ব্যবহার করতে পারেন npm start অথবা yarn start

• Build - যখন আপনার অ্যাপ্লিকেশন ডেপলয় করার জন্য তৈরি হয়ে যাবে তখন আপনি এই কমান্ডটার মাধ্যমে আপনার প্রজেক্ট বিউল্ড করবেন। এটা প্রয়োজন মত আপনার কোডকে
o অপ্টিমাইজ করবে
o মিনিফাই করবে
o সোর্স ম্যাপ তৈরি করবে
o CSS ফাইল জেনারেট করবে
o ফাইল এবং ইমেজ গুলোকে অপ্টিমাইজ করবে
o সোর্স কোড গুলোকে চাংকে রূপান্তর করবে
o আরও অনেক কিছু করবে

• একটা অ্যাপ্লিকেশন প্রোডাকশনে পাঠানোর জন্য যতটা অপটিমাইজেশনের দরকার হয়, তার সবটাই করবে এই কমান্ডটা এবং এর জন্য আমাদের কোনো কনফিগারেশনের দরকার নেই। তারপরেও কিছু অ্যাপ্লিকেশন আছে যেখানে আমাদের নিজেদের মত করে অপটিমাইজেশনের দরকার পরে, সেই ক্ষেত্রে আমরা নিজেরাও বিউল্ট ইন কনফিগারেশনকে মডিফাই করতে পারব। এর জন্য কমান্ডটা হচ্ছে - npm run build অথবা yarn run build

• Test - Create-React-App আমাদেরকে একটা প্রোপার টেস্টিং এনভারনমেন্ট প্রোভাইড করে থাকে। এই এনভাইরনমেন্টে কোন এক্সট্রা টুলস সেটআপ না করেই আমরা React Application টেস্ট করতে পারি। তবে অ্যাডভান্সড টেস্টিং এর জন্য অন্য প্যাকেজ বা মডুউলের সাহায্য লাগবে। টেস্টিং এর কমান্ড হচ্ছে - npm test অথবা yarn test

• Eject - আপনি যখন Create-React-App ব্যবহার করে একটা অ্যাপ্লিকেশন তৈরি করবেন তখন সমস্ত কনফিগারেশন ফাইল এবং স্ক্রিপ্ট ফাইল গুলো হিডেন থাকবে। এই সব ফাইল গুলো পেতে চাইলে এই কমান্ডটা ব্যবহার করতে হবে।

Create-React-App যেই কনফিগারেশনটা আমাদেরকে দেয় সেটা সবসময় পরিবর্তন করার দরকার হয় না। আর আপনি ভুল করে যেন সেগুলোকে আপডেট করে না ফেলেন এই জন্যই ফাইল গুলোকে হিডেন রাখা হয়। যদি কোনো কারণে আমাদের এই ফাইল গুলো আপডেট করার প্রয়োজন হয় তখন আমরা এই কমান্ডটা ব্যবহার করে থাকি। তবে একবার Eject করার পরে আর চাইলেও Roll Back করে আগের অবস্থানে ফিরে আসা যায় না। তাই একদম নিশ্চিত না হয়ে এই কমান্ডটা ব্যবহার করবেন না। এই কমান্ডটা ব্যবহার করতে হয় এই ভাবে - npm run eject অথবা yarn run eject

[Note: আপনার পিসিতে yarn ইন্সটল করা না থাকলে প্রথমে এই প্যাকেজটা গ্লোবালই ইন্সটল করে নিবেন - npm i -g yarn ]

Create-React-App ব্যবহার করে কোনো অ্যাপ্লিকেশন তৈরি করলে আপনি সেখানে সাধারণ নোড অ্যাপ্লিকেশন এর মত করেই যে কোনো ডিপেন্ডেন্সি ইন্সটল করতে পারবেন, নিজস্ব স্ক্রিপ্টও লিখতে পারবেন।

10/04/2020

As the days go by, JavaScript is evolving and various tools are being built around JavaScript to make our work easier. Webpack is one such tool.

The main responsibility of Webpack is to bundle the code. When we do a project there are many files. That is, we distribute our code into smaller files so that the code is easier to manage. But if we publish the web site by placing the code in many such files, then the performance of our website or web application will not be good. Because each small file will require a network call. So before publishing the application we should minify all the code, bundle it in one place and then publish it.

If we want to do this manually, it will take us a long time and the work will not work well. That's why Webpack is doing this for us beautifully.

We basically do a lot of work using Webpack -
• Code bundling
• Minifying
• Creating source maps
• Image and code optimization
• CSS module
• Development server
• Much more

Webpack is basically a NodeJS package that runs on the NodeJS platform. We have to create a configuration file according to the project. Then we can build the project according to our configuration with the build command.

যত দিন যাচ্ছে তত জাভাস্ক্রিপ্ট উন্নত হচ্ছে এবং জাভাস্ক্রিপ্টকে ঘিরে তৈরি হচ্ছে নানা রকম সব টুলস আমাদের কাজ গুলোকে সহজ করার জন্য। Webpack এমনই একটা টুলস।

Webpack এর মূল দায়িত্ব হচ্ছে কোড গুলোকে বান্ডেলিং করে ফেলা। আমরা যখন একটা প্রজেক্ট করি তখন সেখানে অনেক ফাইল হয়। অর্থাৎ আমরা আমাদের কোড গুলোকে ছোট ছোট ফাইলে ডিস্ট্রিবিউট করে রাখি যেন কোড গুলো ম্যানেজ করতে সহজ হয়। কিন্তু যদি এভাবেই অনেক গুলো ফাইলে কোড রেখে আমরা ওয়েব সাইটকে পাবলিশ করে দেই তাহলে আমাদের ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনটার পার্ফরমেন্স ভাল হবে না। কারণ প্রতিটা ছোট ছোট ফাইলের জন্য এর নেটওয়ার্ক কলের প্রয়োজন পরবে। তাই অ্যাপ্লিকেশনটা পাবলিশ করার আগেই আমাদের উচিত হবে সব কোড গুলোকে মিনিফাই করে, এক জায়গাতে বান্ডেল করে তারপরে পাবলিশ করা।

এই কাজটা যদি আমরা ম্যানুয়ালি করতে চাই, তাহলে আমাদের অনেক সময় লাগবে এবং কাজটাও ভাল ভাবে হবে না। এই জন্য আমাদের হয়ে এই কাজটা সুন্দর ভাবে করে দিচ্ছে Webpack।

Webpack ব্যবহার করে আমরা মূলত অনেক গুলো কাজ করে থাকি -
• কোড বান্ডেলিং
• মিনিফাইং
• সোর্স ম্যাপ তৈরি
• ইমেজ এবং কোড অপটিমাইজেশন
• সিএসএস মডিউল
• ডেভেলপমেন্ট সার্ভার
• আরও অনেক কিছু
Webpack মূলত একটা নোডজেএস এর প্যাকেজ যা রান করে নোডজেএস প্লাটফর্মে। আমাদেরকে একটা কনফিগারেশন ফাইল তৈরি করতে হয় প্রজেক্ট অনুযায়ী। তারপরে বিউল্ড কমান্ড দিয়ে আমাদের কনফিগারেশন অনুযায়ী প্রজেক্টটাকে বিউল্ড করতে পারি।

07/04/2020

BabelJS is a JavaScript compiler. If you are using Modern Javascript, you will need this compiler.

The new version of Javascript was released in the 21st, a release that changed drastically. Many features that have never been in JavaScript have been added to JavaScript. But the problem is that these new features do not support older browsers. There are still many browsers in the market that have not updated the user. As a result, new features of JavaScript are disabled in all these browsers.

A new compiler is needed to support JavaScript in all browsers. The task of this compiler is to convert the JavaScript version of the new version into the old version's JavaScript code. As a result, you will write code using modern JavaScript at the time of writing the code, but this code will be compiled and converted to old JavaScript, so that your code can be used in many older browsers. You cannot update your user's browser, so you are downgrading your code for maximum support.

While there are many tools in the market for doing this, BabelJS is the most popular and best tool. In ReactJS you have to work with Modern Javascript. It also has some of ReactJS's own features that we will need BabelJS to compile and convert to regular JavaScript.

You can see the documentation by visiting the official website of BabelJS. BabelJS also has a REPL on its website, where you can see how the live JavaScript code is compiled and converted to a regular JavaScript code.



BabelJS হল জাভাস্ক্রিপ্টের একটা কম্পাইলার। আপনি যদি মডার্ন জাভাস্ক্রিপ্ট ব্যবহার করে থাকেন তাহলে আপনার এই কম্পাইলারের প্রয়োজন হবে।

২০১৫ সালে জাভাস্ক্রিপ্টের নতুন ভার্সন রিলিজ হয়, যেই রিলিজে অনেক বেশি পরিবর্তন আসে। যেই সব ফিচার গুলো আগে জাভাস্ক্রিপ্টে কখনো ছিল না এরকম অসংখ্য ফিচার জাভাস্ক্রিপ্টে যুক্ত হয়। কিন্তু সমস্যা হল এই নতুন ফিচার গুলো পুরাতন ব্রাউজার গুলোতে সাপোর্ট করত না। এখনো বাজারে অনেক ব্রাউজার আছে যা ইউজার আপডেট করেনি। যার ফলে এই সব ব্রাউজারে জাভাস্ক্রিপ্টের নতুন ফিচার গুলো অচল।

যেন সব রকম ব্রাউজারে জাভাস্ক্রিপ্টের সাপোর্ট দেওয়া যায় এই জন্য নতুন একটা কম্পাইলারের প্রয়োজন হল। এই কম্পাইলারটার কাজ হল নতুন ভার্সনের জাভাস্ক্রিপ্ট কোড গুলোকে পুরাতন ভার্সনের জাভাস্ক্রিপ্ট কোডে রূপান্তর করে ফেলা। এর ফলে যেটা হল, আপনি কোড লেখার সময় মডার্ন জাভাস্ক্রিপ্ট ব্যবহার করেই কোড লিখবেন, কিন্তু এই কোড টাকে কম্পাইল করে পুরাতন জাভাস্ক্রিপ্টে রূপান্তর করে সার্ভ করা হবে, যেন অনেক পুরাতন ব্রাউজারেও আপনার কোডটা ব্যবহার করা যায়। আপনি তো আপনার ইউজারের ব্রাউজার আপডেট করতে পারবেন না, তাই আপনি আপনার কোডটাকে ডাউনগ্রেড করে দিচ্ছেন সর্বোচ্চ সাপোর্ট এর জন্য।

এই কাজটা করার জন্য বাজারে অনেক টুলস থাকলেও সব থেকে জনপ্রিয় এবং ভাল টুলস হল BabelJS। ReactJS এ আপনাকে মডার্ন জাভাস্ক্রিপ্ট নিয়েই কাজ করতে হবে। এর সাথে ReactJS এর নিজস্ব কিছু ফিচার আছে যা কম্পাইল করে রেগুলার জাভাস্ক্রিপ্টে রূপান্তর করার জন্য আমাদের BabelJS দরকার হবে।

আপনি BabelJS এর অফিশিয়াল ওয়েবসাইটে ভিসিট করে এর ডকুমেন্টেশন দেখতে পারেন। BabelJS তার ওয়েবসাইটে একটি REPL ও দিয়ে রেখেছে, যেখানে আপনি লাইভ কোড করে দেখতে পারবেন যে মডার্ন জাভাস্ক্রিপ্ট কোড কিভাবে কম্পাইল হয়ে রেগুলার জাভাস্ক্রিপ্ট কোডে রূপান্তর হয়।