Learn React

লিখে লিখে React শিখুন। এই React JS টিউটোরিয়ালটি আপনাকে JSX-এর প্রথম লাইন থেকে হুকস, স্টেট ম্যানেজমেন্ট এবং সম্পূর্ণ অ্যাপ তৈরি পর্যন্ত নিয়ে যাবে, এবং আপনার লেখা প্রতিটি কম্পোনেন্ট সরাসরি আপনার ফোনে একটি লাইভ প্রিভিউতে রেন্ডার হবে।

৮৮টি কোর্স এবং ৩২৪টি ইন্টারেক্টিভ লেসন, লেভেল A1 থেকে C1 পর্যন্ত। একটি সংক্ষিপ্ত ধারণা পড়ুন, আসল কোড টাইপ করুন, রান (Run) ট্যাপ করুন এবং ফলাফল দেখুন। কোনো ল্যাপটপ বা সেটআপের প্রয়োজন নেই।

আপনার ফোনেই কোড লিখুন

• JSX-এর জন্য তৈরি একটি কোড এডিটর, যেখানে একটি লাইভ প্রিভিউ রয়েছে যা অ্যাপের ভেতরেই আপনার কম্পোনেন্ট রেন্ডার করে

• রানটাইম (ReactDOM এবং Babel) অ্যাপের সাথেই বান্ডেল করা থাকে, তাই আপনার কোড সার্ভারে নয়, ডিভাইসেই চলে

• মাল্টি-ফাইল প্রজেক্ট: একটি কম্পোনেন্টকে অন্যটিতে ইম্পোর্ট করুন, ঠিক যেভাবে আসল অ্যাপ তৈরি করা হয়

• আপনার রেন্ডার করা বাটনে ট্যাপ করুন, ফর্মে টাইপ করুন এবং UI-এর প্রতিক্রিয়া দেখুন

ল্যাব

• হুকস ল্যাব: প্রতিটি স্টেট পরিবর্তন এবং প্রতিটি রি-রেন্ডার ঘটার সাথে সাথেই দেখুন

• প্রপস নবস: একটি স্লাইডার দিয়ে প্রপ পরিবর্তন করুন এবং কম্পোনেন্টের আপডেট দেখুন

• রেন্ডার প্রোফাইলার এবং স্টেট টাইমলাইন (প্রো): কোন কম্পোনেন্টটি কেন রি-রেন্ডার হয়েছে তা খুঁজে বের করুন, তারপর আপনার স্টেটের মধ্যে দিয়ে পেছনে ফিরে যান

ধাপে ধাপে, বিগিনার থেকে অ্যাডভান্সড

• বেসিক: JSX, কম্পোনেন্ট, প্রপস, স্টেট, ইভেন্টস, লিস্ট এবং কী, কন্ডিশনাল রেন্ডারিং

• হুকস: useState, useEffect, useRef, useReducer, কাস্টম হুকস, useLayoutEffect এবং আরও অনেক কিছু

• ফর্ম এবং ভ্যালিডেশন, রিয়্যাক্ট হুক ফর্ম, নিয়ন্ত্রিত এবং অনিয়ন্ত্রিত ইনপুট

• স্টেট ম্যানেজমেন্ট: কনটেক্সট, রিডাক্স টুলকিট এবং আরটিকে কোয়েরি, জুস্ট্যান্ড এবং জোটাই

• রিয়্যাক্ট রাউটার, ডেটা ফেচিং, ট্যানস্ট্যাক কোয়েরি, এসডব্লিউআর এবং অপটিমিস্টিক ইউআই

• টাইপস্ক্রিপ্ট, টেস্টিং, স্টোরিবুক, অ্যাক্সেসিবিলিটি এবং সিকিউরিটি

• পারফরম্যান্স: মেমোইজেশন, কোড স্প্লিটিং, সাসপেন্স, ট্রানজিশন, ভার্চুয়ালাইজড লিস্ট

• রিয়্যাক্ট ১৯ এবং সার্ভার কম্পোনেন্টস, এসএসআর এবং হাইড্রেশন, স্ট্রিমিং

• নেক্সট.জেএস অ্যাপ রাউটার, ডেটা ফেচিং এবং অথেন্টিকেশন

• ওয়েব ডেভেলপারদের জন্য রিয়্যাক্ট নেটিভের মৌলিক বিষয়

• ডিপ্লয়মেন্ট, মাইক্রো-ফ্রন্টএন্ড এবং মডিউল ফেডারেশন

বাস্তব প্রজেক্ট তৈরি করুন

২০টি নির্দেশিত প্রজেক্ট, একবারে একটি ছোট ধাপ: একটি লাইক বাটন, প্রোফাইল কার্ড, একটি টিপ ক্যালকুলেটর, একটি কুইজ গেম, একটি স্টপওয়াচ, একটি সাইন-আপ ফর্ম, একটি শপিং কার্ট, একটি ইমেজ ক্যারোসেল, একটি পেজিনেটেড লিস্ট, একটি টাস্ক অ্যাপ এবং আরও অনেক কিছু। প্রতিটি ধাপে যাচাই করা হয় যে আপনার কম্পোনেন্টটি আসলেই কাজ করছে কিনা, তারপরই আপনি পরবর্তী ধাপে যাবেন।

অভ্যস্ত না হওয়া পর্যন্ত অনুশীলন করুন

• হুক, রেন্ডারিং, ফর্ম, কনটেক্সট এবং পারফরম্যান্সের উপর ৩০টি কোডিং মিশন (সহজ, মাঝারি এবং কঠিন)

• UI ম্যাচ: একটি টার্গেট কম্পোনেন্ট পুনর্নির্মাণ করুন এবং এর গঠন, স্টাইল ও টেক্সটের জন্য স্কোর অর্জন করুন

• বাগ হান্ট: একটি ত্রুটিপূর্ণ কম্পোনেন্টের বাগ খুঁজে বের করুন এবং ঠিক করুন

• কম্পোনেন্ট রিকল: আপনার ইতিমধ্যে কার্যকর করা কোডে অনুপস্থিত অংশটি স্পেসড রিপিটেশনের মাধ্যমে টাইপ করে পুনরায় লিখুন

• ৫০টি প্রশ্নসহ কুইজ, ৫০টি ইন্টারভিউ প্রশ্ন এবং একটি চিট শিট

• দৈনিক চ্যালেঞ্জ, স্ট্রিকস, XP এবং একটি লিডারবোর্ড

AI মেন্টর (প্রো)

কোনো হুক বা এররে আটকে গেছেন? একটি স্পষ্ট ব্যাখ্যার জন্য AI মেন্টরকে জিজ্ঞাসা করুন, AI-কে আপনার কোড পর্যালোচনা করতে দিন এবং একটি সমাধান প্রস্তাব করতে দিন, অথবা যেকোনো বিষয়ে একটি কাস্টম লেসন তৈরি করুন।

সার্টিফিকেট (প্রো)

চূড়ান্ত পরীক্ষায় উত্তীর্ণ হন এবং একটি সার্টিফিকেট অর্জন করুন যা আপনি শেয়ার করতে পারবেন।

কাদের জন্য

• নতুন ব্যবহারকারী যারা কিছুটা HTML, CSS বা JavaScript জানেন

• অন্য ফ্রেমওয়ার্ক থেকে আসা ডেভেলপার যারা দ্রুত পরিবর্তন করতে চান

• যারা ফ্রন্টএন্ড ডেভেলপার ইন্টারভিউয়ের জন্য প্রস্তুতি নিচ্ছেন

• নিজে নিজে শেখা কোডার যারা প্রোজেক্টের পোর্টফোলিও তৈরি করছেন

ফ্রি এবং প্রো

ফ্রি: প্রথম কোর্স, একটি গাইডেড প্রোজেক্ট, ২টি কোডিং মিশন, লাইভ প্রিভিউ সহ কোড এডিটর, হুকস ল্যাব, প্রপস নবস, বাগ হান্ট এবং দিনে ৩টি UI ম্যাচ চেক। ফ্রি ভার্সনে বিজ্ঞাপন দেখানো হয়।

প্রো: সব ৮৮টি কোর্স, সমস্ত প্রোজেক্ট এবং মিশন, AI মেন্টর, রেন্ডার প্রোফাইলার এবং স্টেট টাইমলাইন, সার্টিফিকেট পরীক্ষা এবং কোনো বিজ্ঞাপন নেই।

অ্যাপটি ২২টি ভাষায় উপলব্ধ।

React হলো Meta Platforms, Inc.-এর একটি ট্রেডমার্ক। Next.js হলো Vercel, Inc.-এর একটি ট্রেডমার্ক। এটি একটি স্বাধীন লার্নিং অ্যাপ, যা Meta বা Vercel-এর সাথে অনুমোদিত বা সমর্থিত নয়।

গোপনীয়তা নীতি: https://www.coddykit.com/terms/privacy-policy