Gutenberg block development শেখার জন্য React এর কিছু গুরুত্বপূর্ণ বিষয় ভালোভাবে বুঝতে হবে। কারণ Gutenberg ব্লক মূলত React এর উপর ভিত্তি করে কাজ করে। নিচে React এর এমন কিছু গুরুত্বপূর্ণ বিষয়ের তালিকা দেওয়া হলো যা Gutenberg ব্লক ডেভেলপমেন্টের জন্য জানা প্রয়োজন:
1. React এর Basic Concepts
JSX: JavaScript এর মধ্যে HTML লিখে কিভাবে React কাজ করে।
Components: Functional এবং Class components এর মধ্যে পার্থক্য এবং ব্যবহারের পদ্ধতি।
Props: Component এর মধ্যে ডেটা পাস করা।
State: Component এর ডেটা ম্যানেজমেন্ট।
Events Handling: ইভেন্ট গুলো কিভাবে হ্যান্ডেল করতে হয়।
2. React Hooks
useState: State ম্যানেজ করার জন্য।
useEffect: Lifecycle events (e.g., componentDidMount, componentDidUpdate) হ্যান্ডেল করার জন্য।
useRef: DOM element রেফারেন্স করার জন্য।
Custom Hooks: Reusable hook তৈরি করা।
3. Context API
Component গুলোর মধ্যে ডেটা শেয়ার করার জন্য Context API।
4. React DOM Manipulation
refs এবং DOM interaction: React দিয়ে DOM এ কিভাবে কাজ করতে হয়।
Virtual DOM এর ধারণা।
5. React Router
যদি Gutenberg ব্লকের জন্য রাউটিং দরকার হয়, তবে React Router সম্পর্কে ধারণা থাকা ভালো।
6. React এর Advanced Concepts
Higher Order Components (HOC): Reusable component pattern।
Render Props: Dynamic UI তৈরি করার জন্য।
Portals: React element অন্য DOM node এ রেন্ডার করার জন্য।
7. Gutenberg Specific Concepts
@wordpress/block-editor API: Gutenberg এর core functionalities।
Attributes: Block এর ডেটা ম্যানেজ করা।
Inspector Controls: Settings panel তৈরি করা।
RichText API: Text input এর জন্য।
InnerBlocks: Nested blocks তৈরি করা।
useBlockProps: Gutenberg ব্লকের props ম্যানেজ করা।
8. JavaScript ES6+ Features
React এবং Gutenberg block এর জন্য ES6+ syntax জানা গুরুত্বপূর্ণ:
Arrow Functions
Destructuring
Template Literals
Spread/Rest Operators
Modules (import/export)
9. Webpack এবং Babel
React এবং Gutenberg block development এর জন্য Webpack এবং Babel setup করা জানা দরকার।
10. npm এবং Package Management
Gutenberg block এর development এর জন্য npm এবং প্যাকেজ ম্যানেজমেন্টের ধারণা থাকা প্রয়োজন।