Start Your Frontend Journey

React না, React এ চিন্তা করা শিখুন

React একটি UI লাইব্রেরী যা ব্যবহার করা হয় ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করার কাজে। React ব্যবহার করে ফ্রন্টেন্ড ডেভেলপমেন্ট করার জন্য আপনার দরকার হবে আরও অসংখ্য টুলস। বেশির ভাগ টিউটোরিয়াল গুলোতেই সম্পূর্ণ ফ্রন্টেন্ড ডেভেলপমেন্ট শেখাতে গিয়ে React এর ফান্ডামেন্টাল কনসেপ্ট এর ওপরে গুরুত্ব দেওয়া হয় না। যার ফলে পরবর্তীতে সমস্যার সম্মুখীন হতে হয়। এই Chunk টিতে আমরা শুধু মাত্র React এর ফান্ডামেন্টাল বিষয়ের ওপরেই জোর দিয়েছি। যেন React সম্পর্কে আপনার একটা সুন্দর ধারণা তৈরি হয় এবং আপনি React এর মতো করে চিন্তা করতে পারেন।
Understand ReactJS Core Feature - Absolute Beginner | Stack Learn & Stack School Course

এই কোর্সের আলোচিত বিষয়

এক ঝলকে দেখা নেওয়া যাক

  • Frontend Application

    বর্তমানে কিভাবে একটা ওয়েব অ্যাপলিকেশন কাজ করে আর কিভাবে এর ডেভেলপমেন্ট করা হয়? ফ্রন্টেন্ড অ্যাপলিকেশন কি, কিভাবে ফ্রন্টেন্ড অ্যাপলিকেশন কাজ করে থাকে এই বিষয়ে বিস্তর আলোচনা করা হয়েছে।

  • Thinking in Component

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

  • React Component

    React অন্য সব ফ্রেমওয়ার্ক মতো কাজ করে না। React এর কাজ করার রাস্তাটা একটু ভিন্ন। আর React এ সব কিছু কম্পোনেন্টের ওপরে ভিত্তি করে করতে হয়। তাই React শেখার ক্ষেত্রে প্রথমেই এর কম্পোনেন্ট সম্পর্কে জ্ঞান অর্জন করতে হবে।

  • Props & State

    React এ কম্পোনেন্ট গুলোর নিজস্ব ডাটা ধারণ করার জন্য ব্যবহৃত হয় state এবং বিভিন্ন কম্পোনেন্টের সাথে যোগাযোগ স্থাপন করার জন্য ব্যবহৃত হয় props যা React এর সব থেকে বেসিক দুইটা থিওরি।

  • Styling React App

    React এর নিজস্ব কোনো স্টাইল নেই। React ডিফল্ট ভাবে inline-css ব্যবহার করে স্টাইলিং সাপোর্ট করে। কিন্তু এর কিছু খারাপ দিক আছে। এখানে আমরা React এর সম্ভাব্য সমস্ত স্টাইলিং সিস্টেম নিয়েই আলোচনা করেছি।

  • Event Handling

    React ব্যবহার করে ইন্টারেক্টিভ UI তৈরি করতে আপনার দরকার হবে ইভেন্ট হ্যান্ডেল করা। অন্য সব কিছুর মত এখানেও React নিজস্ব বৈশিষ্ট্য মেনেই ইভেন্ট হ্যান্ডেল করে থাকে যা আমরা সম্পূর্ণ ভাবে শেখানোর চেষ্টা করেছি।

  • Two Way Data Binding

    বর্তমানে মডার্ন সমস্ত লাইব্রেরী বা ফ্রেমওয়ার্কেরই নিজস্ব ডাটা বাইন্ডিং সিস্টেম আছে। React এর ব্যতিক্রম না হলেও এর ডাটা বাইন্ডিং সিস্টেমটা ব্যতিক্রম। React এ কিভাবে Two Way Data Binding করবেন সে বিষয়ে আমরা আলোচনা করেছি।

  • Form & Validation

    ফ্রন্টেন্ডের একটা বড় অংশ হচ্ছে ফর্ম এবং ফর্ম ভ্যালিডেশন। প্রতিটা অ্যাপলিকেশনেই আপনার দরকার হবে অসংখ্য ফর্ম। React এ আপনি কিভাবে ফর্ম তৈরি করতে পারেন, কিভাবে ফর্ম ভ্যালিডেশন করতে পারেন সেই বিষয়ে আমরা বিস্তর আলোচনা করেছি।

  • List & Table

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

  • Tic Tac Toe

    আমাদের এই কোর্সের প্রথম প্রোজেক্ট Tic Tac Toe যা React এর অফিসিয়াল সাইটেই দেওয়া আছে। কিন্তু ভালোভাবে ব্যাখ্যা করা নেই। React এর ফান্ডামেন্টাল বিষয় বোঝার জন্য এই প্রোজেক্টটিই যথেষ্ট যা আমরা ব্যাখ্যা সহ ইমপ্লিমেন্ট করে দেখিয়েছি।

  • Stack Todo

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

  • Smart Poll

    আমাদের সর্বশেষ প্রোজেক্টটি হচ্ছে একটা পোল ক্রিয়েশন অ্যাপলিকেশন। যেখানে ইউজার পোল ক্রিয়েট, ডিলিট, আপডেট এবং সার্চ করতে পারবেন। সিলেক্ট করে তার ডাটা দেখতে পারবে এবং নিজের মতামত শেয়ার করতে পারবে। সম্পুর্ণ প্রোজেক্ট করা হয়েছে কোর React ব্যবহার করেই।

Perquisites Before Start

এই কোর্সটি করার পূর্ব শর্ত সমূহ

  • জাভাস্ক্রিপ্ট সম্পর্কে একটা ভালো জ্ঞান থাকতে হবে। জাভাস্ক্রিপ্টের সাধারণ বিষয় গুলো এবং ES6 সম্পর্কে কাজ করার অভিজ্ঞতা থাকতে হবে।

  • ES5 সম্পর্কে অল্প জ্ঞান থাকলেও ES6 সম্পর্কে পূর্ণাঙ্গ ব্যবহারিক জ্ঞান থাকতে হবে।

  • HTML, CSS, Bootstrap সম্পর্কে নূন্যতম একটা ধারণা থাকতে হবে। কারণ ফ্রন্টেন্ড ফ্রেমওয়ার্ক শেখার পূর্বে আপনাকে ওয়েবসাইট ডিজাইন করা জানতে হবে।

  • যথেষ্ট ধৈর্য এবং পরিশ্রম করার মানুষিকতা থাকতে হবে। কারণ অনুশীলন না করলে ব্যাপার গুলো শিখলেও ভুলে যেতে সময় লাগবে না।

How to Enrol this Course

কিভাবে কোর্সটিতে এনরোল করবেন

  • বিকাশ, রকেট, নগদ বা যে কোনো বাংলাদেশি ব্যাংকের মাধ্যমে কোর্স ফি ট্রান্সফার করতে পারবেন।

  • যে কোনো কোর্স এনরোল করার পূর্বে আমাদের সাথে যোগাযোগ করুন, না হলে আপনাকে আমাদের কমিউনিটি তে এক্সেস দিতে প্রব্লেমে পড়তে হবে।

  • আপনি যদি বাংলাদেশি হয়ে থাকেন, তাহলে আপনাকে বাংলাদেশের পেমেন্ট মেথডেই পেমেন্ট করার জন্য অনুরোধ করা হচ্ছে। কারণ আমরা চাই না আপনার টাকা অন্য দেশের ট্যাক্সের কাজে ব্যবহৃত হোক।

  • যদি আপনি দেশের বাইরে থেকে কোর্সটা এনরোল করতে চান, তাহলে আপনি ইন্টারন্যাশনাল যেকোনো ক্রেডিট বা ডেবিট কার্ডের মাধ্যমেই পে করতে পারবেন। পেপাল ব্যবহার করে পেমেন্ট করার সুবিধাও রয়েছে।

  • আমাদের দেশে Stripe বা Paypal কোনোটারই সাপোর্ট নেই। আমরা দেশের বাইরের স্টুডেন্টদের সুবিধা দেওয়ার জন্য Paypal and Stripe ব্যবহার করে থাকি যা দেশের বাইরে থেকে অপারেট হয়। তাই দয়া করে দেশের টাকা দেশে রাখতে দেশের পেমেন্ট মেথডই ব্যবহার করবেন।

  • যেকোনো ধরনের পেমেন্টের পূর্বে আমাদের অফিশিয়াল পেজে যোগাযোগ করবেন। কোনো থার্ড পার্টি কারোর সাথে যোগাযোগ করে কোনো পেমেন্ট করবেন না।।

What People Say About this Course

কোর্সটি সম্পর্কে শিক্ষার্থীদের মন্তব্য

Sofiqul Islam

5 star rating

“এত্ত সহজ করে শেখানো হয়েছে কোর্সটিতে, সত্যিই অসাধারণ”

“এত্ত সহজ করে শেখানো হয়েছে কোর্সটিতে, সত্যিই অসাধারণ”

Read Less

Mahbubul Alam

5 star rating

“Whole concept was clear to me and very easy to understanding thanks Stack Learner. may be about architecture related article was missing in this season.”

“Whole concept was clear to me and very easy to understanding thanks Stack Learner. may be about architecture related article was missing in this season.”

Read Less

Md.Meherul Islam

5 star rating

“This is really a very good course to become A Frontend Developer.”

“This is really a very good course to become A Frontend Developer.”

Read Less

Learn and Flourish

5 star rating

“Super explanation.. As react works with components his lectures like the react component. Explained details about react core with examples. ”

“Super explanation.. As react works with components his lectures like the react component. Explained details about react core with examples. ”

Read Less

SK Sarker

5 star rating

“HM Naiem #Vai is always special....and it's a very special series for me..Many Many Thanks Naiem Vai ”

“HM Naiem #Vai is always special....and it's a very special series for me..Many Many Thanks Naiem Vai ”

Read Less

Muyabbaj Hussain

5 star rating

“ReactJS Core Features explained so much easily”

“ReactJS Core Features explained so much easily”

Read Less

Yousuf Ahamad

5 star rating

“Many many love for Stack Learner..”

“Many many love for Stack Learner..”

Read Less

Nabid Bhuia

5 star rating

“I think it is a good place to learn react....”

“I think it is a good place to learn react....”

Read Less

Farabi Faisal

5 star rating

“Really easy to understand”

“Really easy to understand”

Read Less

Course Outline

এক ঝলকে দেখে নিন সম্পুর্ণ কোর্স আউটলাইনটি

  • 01

    Welcome

    • Welcome to Our Course

  • 02

    Chapter One - Understanding ReactJS

    • 1. Introduction

    • 2. How Does Website Work

    • 3. How Does SPA Work

    • 4. How Does ReactJS Work

    • 5. Which Type of Problem React is Solving

    • 6. Core Features of React

    • 7. Advanced Features of React

    • 8. Tools We Need to Work with React

    • 9. How to Use This Course

    • References & Download Links

  • 03

    Chapter Two - Make Our Hands Dirty

    • 1. Introduction

    • 2. Tools We Need to Compile React

    • 3. What is BabelJS

    • 4. What is Webpack

    • 5. Hands on Environment Setup

    • 6. Understanding Files We Need

    • 7. Environment Setup Reference

    • 8. First React APP

    • 9. Section References

    • 10. What We have Learned So Far?

  • 04

    Chapter Three - Create React App

    • 1. Introduction

    • 2. Create React App Overview

    • 3. Create First Project

    • 4. Understand React Scripts

    • 5. File Structures of React Application

    • 6. Create First React Component

    • 7. Section References

  • 05

    Chapter Four - Components & Props

    • 1. Introduction

    • 2. What is Component?

    • 3. Understand Component in Details

    • 4. Type of Components in React

    • 5. How to Create Functional Component

    • 6. Which Component We Should Pick When?

    • 7. What is JSX?

    • 8. How to Use JSX?

    • 9. JSX Quick References

    • 10. Create Profile Component

    • 11. Split Profile Component into Child Components

    • 12. How to Reuse Our Components?

    • 13. What is Props?

    • 14. Modify Profile Components using Props

    • 15. Pass Function as Props

    • 16. Render Props Children

    • 17. Props Quick References

    • 18. Understanding Component Tree

    • 19. Section References

    • 20. Practice Problems (Component, JSX and Props)

    • 21. What We have Learned So Far?

  • 06

    Chapter Five - Understanding React State

    • 1. Intro

    • 2. Why Do We Need State

    • 3. Introducing State

    • 4. How Does State Work

    • 5. How To Update State

    • 6. State Example With Timer App

    • 7. Section Reference

    • 8. Practice Problem

    • What We have Learned So Far?

  • 07

    Chapter Six - Styles in React

    • 1. Introduction

    • 2. How To Style React Apps

    • 3. Inline Styles

    • 4. Css Classes

    • 5. Css Module

    • 6. Styled Component

    • 7. Which Method We Should Use?

    • 8. What We have Learned So Far?

  • 08

    Chapter Seven - Handling Events in React

    • 1. Introduction

    • 2. What Is Event

    • 3. First React Event

    • 4. Text Field And Change Event

    • 5. Two Way Data Bindings

    • 6. Blur And Focus Events

    • 7. Event Reference

    • 8. Common Events in React

    • 9. Practice Problems

    • 10. What We have Learned So Far?

  • 09

    Chapter Eight - Working with Inputs And Forms

    • 1. Introduction

    • 2. Basic Input Elements

    • 3. Checkbox And Radio Button

    • 4. Checkbox And Skills Array

    • 5. Input Element References

    • 6. Introducing Forms In React - Uncontrolled Form

    • 7. First React Form

    • 8. Understand The Form Philosophy

    • 9. Split Form Into Multiple Components

    • 10. Form References

    • 11. Create A Signup Form

    • 12. How To Validate This Form

    • 13. Implement Form Validationcmproj

    • 14. State Lifting

  • 10

    Project One - Tic Tac Toe

    • 1. Introduction

    • 2. Project Architecture

    • 3. Setup Project

    • 4. Poll CRUD functionalities

    • 5. Game Component Functionalities

    • 6. Game Winning Logic

    • 7. Implement Jump Functionality

  • 11

    Project Two - Stack Todo (Multi Functional)

    • 1. Introduction

    • 2. Project Architecture

    • 3. Setup Project

    • 4. List View

    • 5. Table View

    • 6. Create Todo Form

    • 7. Controller Component with Search Panel

    • 8. Add, Select and Complete Todo

    • 9. Change View and Other Controller JSX

    • 10. Search and Filter.cmproj

    • 11. Bulk Controller

  • 12

    Project Three - Smart Poll App

    • 1. Introduction

    • 2. Project Architecture

    • 3. Setup Project

    • 4. Poll Crud Functionalities

    • 5. Implement Sidebar Component

    • 6. Create Poll Form

    • 7. Poll Participation Form

    • 8. Main Content And Get Opinion.Cmproj

    • 9. Reuse Create Poll Form

    • 10. Search Polls

  • 13

    Download Course Contents

    • Google Drive Link

FAQ (Frequently Asked Questions)

কিছু সাধারণ প্রশ্নোত্তর

  • আমি React এর ফান্ডামেন্টাল জানি, আমার এই কোর্স করার দরকার আছে কি?

    না। যদি আপনার আত্মবিশ্বাস থাকে যে আপনি React এর মতো করে চিন্তা করতে পারেন, আপনি React এর সমস্ত ফান্ডামেন্টাল বিষয় সম্পর্কে পরিপূর্ণ একটা জ্ঞান রাখেন তাহলে এই কোর্সে এনরোল করার কোনো প্রয়োজন নেই। এটা একটা বিগিনার কোর্স। তবে আপনি যদি মনে করেন React কে একবার ঝালাই করে নিবেন তাহলে অবশ্য আমরা না করবো না।

  • আমি জাভাস্ক্রিপ্ট জানি না, আমি কি এই কোর্স করতে পারবো?

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

  • ফ্রন্টেন্ড ডেভেলপমেন্টের জন্য এই কোর্সটি কি যথেষ্ট?

    না। এই কোর্সটির প্রধান আলোচনার বিষয় হচ্ছে ReactJS যা একটি UI লাইব্রেরী। এই কোর্সে ফ্রন্টেন্ড ডেভেলপমেন্ট পুরোপুরি শেখানো হয়নি। আর React ব্যবহার করে পুরোপুরি ফ্রন্টেন্ড ডেভেলপমেন্ট করতে হলে অন্যান্য অনেক লাইব্রেরী এর সাহায্য দরকার হয় যা আমাদের পরবর্তী কোর্স গুলোতে আসবে।

  • তাহলে আমি কেন এই কোর্সটি করব?

    কারণ ফ্রন্টেন্ড ডেভেলপমেন্টের জগতে React একটা বড় ভূমিকা পালন করছে। সব কোর্সে ফ্রন্টেন্ড ডেভেলপমেন্টের সাথে জড়িত অন্যান্য অনেক বিষয় নিয়ে আলোচনা করা হয়। যার ফলে React এর ফান্ডামেন্টালটাই ভালোভাবে শেখা হয়ে ওঠে না। আর এই কারণে ডেভেলপমেন্টে অনেক রকম সমস্যার সৃষ্টি হয়। আমাদের এই কোর্স তৈরি করার মূল লক্ষ্যই হলো ফ্রন্টেন্ড ডেভেলপমেন্ট না, কোর React টা ভালোভাবে শেখা এবং বোঝা।

Premium Courses

আমাদের প্রিমিয়াম কোর্স গুলো

Meet Your Instructor

কোর্স ইন্সট্রাক্টর সম্পর্কে কিছু কথা

I am a full-stack web and mobile application developer, entrepreneur and trainer. I love to work with new technologies, new people and new environment. I like ideas not to talk about but like to implement. My passion is learning and exploring new technologies and programming languages. I think the best way to learn anything is to teach people about that thing. I am an evergreen learner.

HM Nayem

Fullstack Javascript Developer