>> [সঙ্গীত বাজাচ্ছি]
>> নীল মেহতা: এটা এখানে যায়.
>> ওয়েল, সবাই ওয়েব স্বাগত জানাই সঙ্গে ভবিষ্যতের এপস প্রতিক্রিয়া.
এটি CS50.
আমার নাম নীল হয়.
আমি CS50 এবং একটি বার্ষিক একটি টিএ আছি হার্ভার্ড কলেজ এবং একটি খুব, খুব এ
কামুক ওয়েব ডেভেলপার.
তাই আমি খুব উত্তেজনাপূর্ণ আছি আজ তোমার সাথে কথা হবে,
আপনি এখানে বা বাড়িতে কিনা আরো প্রায় আবার যা প্রতিক্রিয়া
আমি ওয়েব অ্যাপ্লিকেশান, ভবিষ্যতে বলেন হিসেবে.
>> তাই প্রতিক্রিয়া একটি ওয়েব ফ্রেমওয়ার্ক হয়.
আমি চলেছি হিসাবে এবং কহন এখানে কিছু লোক,
একটি কাঠামো মাত্র হয় আপনি ব্যবহার করতে পারেন টুল সেট
গঠন এবং আপনার ওয়েব অ্যাপ্লিকেশন নির্মাণ করতে.
আর ওয়েব অ্যাপ্লিকেশন, আবার ওয়েবসাইটের হয় ফেসবুকের মত ইন্টারেক্টিভ যে হয়,
Twitter.com, Instagram.com, যাই হোক না কেন.
>> তাই ফেসবুক একটি ওয়েব ফ্রেমওয়ার্ক যে ফেসবুক দ্বারা উন্নত ছিল
প্রতিক্রিয়া ফিরে যান কয়েক বছর হল.
এরপর থেকে এটি ব্যবহার করা হয়েছে তাদের মোবাইল অ্যাপ্লিকেশন ফেসবুক
এবং ওয়েব অ্যাপ্লিকেশন, Instagram.
খান একাডেমী অন্য হয় প্রতিক্রিয়া বিশিষ্ট গ্রহণকারী প্রথম.
>> এটা সত্যিই পেয়ে হয়েছে অত্যন্ত জনপ্রিয়.
আপনি কি কৌণিক বা ভালো জিনিস ব্যবহার করা হলে দাঁড়া, এই একই পরিবারের হয়,
কিন্তু যেহেতু এটি পর্যন্ত হয়েছে তাদের জনপ্রিয়তা আমার হাত থেকে বেঁচে.
এটা গরম নতুন জিনিস.
এটা সত্যিই, সত্যিই বিশাল.
>> আর তাই প্রতিক্রিয়া হিসেবে না শুধু ভাল হয় বিল্ডিং ইন্টারফেসের জন্য ওয়েব ফ্রেমওয়ার্ক.
এটা ওয়েব ইন্টারফেস নির্মাণের জন্য ভাল.
একটা জিনিস রয়েছে বলা দেশীয় প্রতিক্রিয়া যা
আপনি ইন্টারফেস নির্মাণ করতে দেয় Android এবং iOS জন্য
ভবিষ্যতে হয়তো এবং অন্যান্য প্ল্যাটফর্মের ঠিক একই জাভাস্ক্রিপ্ট কোড ব্যবহার.
আপনি সঠিক একই ব্যবহার করতে পারে জাভাস্ক্রিপ্ট কোড, ওয়েবসাইট রেন্ডার
অ্যান্ড্রয়েড অ্যাপ্লিকেশন এবং iOS অ্যাপ্লিকেশান রেন্ডার.
>> এটি একটি খুব, খুব উত্তেজনাপূর্ণ সময়.
এটি একটি সত্যিই সত্যিই, শান্ত সুযোগ.
এটা সত্যিই একটি সার্বজনীন ওয়েব এর ইন্টারফেস উন্নয়নের হাতিয়ার,
তাই এটি একটি খুব, খুব কী গুরুত্বপূর্ণ বিষয় জানতে.
আর, আমি মানুষ বলার ছিল হিসাবে আগে, এই, আমি মনে করি,
আমরা কিভাবে পরিবর্তন করতে যাচ্ছে সব সময় প্রবেশ করুন ওয়েব অ্যাপ্লিকেশন নির্মাণ.
সুতরাং এটি হতে পারে একটি বিট অতিশয়োক্তি, কিন্তু আমি এটা জানেন যে আপনি একটি প্রশংসনীয় ভাল জিনিস মনে করি.
>> ঠিক আছে, তাই প্রতিক্রিয়া কি?
প্রতিক্রিয়া একটি কাঠামো আপনি যা করতে পারেন ইন্টারফেস নির্মাণের জন্য ব্যবহার.
একটি ইন্টারফেস আবার হয় সঠিক একটি ওয়েব পৃষ্ঠা,?
সুতরাং এখানে Instagram.com এর ব্যবহারসমূহ প্রতিক্রিয়া.
>> উপর নির্মিত হয় প্রতিক্রিয়া উপাদান ধারণা.
একটি কম্পোনেন্ট একটি এইচটিএমএল স্টেরয়েড উপাদান,
তাই একটি HTML উপাদান একটি বাটন ভালো হয়.
এটা একটি অনুচ্ছেদ আছে.
এটা ঠিক আছে, একটি হেডার?
এবং Instagram এই ব্যবহার, কিন্তু এটি হবে এছাড়াও প্রতিক্রিয়া উপাদান ব্যবহার করা হবে.
>> উপাদান প্রতিক্রিয়া souped আপ এইচটিএমএল উপাদান
তাদের নিজস্ব ব্যবহার আছে যে তাদের মধ্যে রয়েছে.
সুতরাং, একটি উদাহরণ হিসাবে, আমরা হতে পারে একটি সময় উপাদান, একটি সময় কম্পোনেন্ট,
যা ভালো থাকতে হবে সময় স্ট্যাম্প, আপনি কি জানেন,
একটি প্রোফাইল কম্পোনেন্ট যা প্রোফাইল ইমেজ উপস্থিত থাকবে
এবং ব্যক্তির নাম.
এটা একটা ভালো কাউন্টার, থাকতে পারে যা পছন্দ সংখ্যা মত নির্ভর করতে পারেন,
আপনি এটি ক্লিক করা হলে এবং তা হবে পছন্দ সংখ্যা বৃদ্ধি.
একটি কম্পোনেন্ট মাত্র হয় এইচটিএমএল কোড গুচ্ছ যে
কিছু কার্যকারিতা রয়েছে এটি ভেতরে আবৃত.
সুতরাং এটি একটি HTML উপাদান মত স্টেরয়েড, হিসাবে আমি আগে বলেন.
আপনি এই উপাদান গ্রহণ করতে পারেন, এবং আপনি তাদের একত্রে পারেন
নতুন উপাদান করা এই ক্ষেত্রে, একটি পোস্ট কম্পোনেন্ট,
যা এই সব উপাদান রয়েছে.
এটা, প্রোফাইল টাইম থাকতে হবে, LikeCounter, হয়তো মন্তব্য
এবং হয়তো ইমেজটি.
আর তাই ওয়েব অ্যাপ্লিকেশান শুধু গ্রহণ করে নির্মিত হয় উপাদান এবং তাদের একসঙ্গে নির্বাণ.
একটি Instagram ফিড আরো কিছু আর কিছুই নয় পোস্ট একটি গুচ্ছ একের পর এক,
প্রতিটি পোস্ট, সময় মত রয়েছে তাই, LikeCounter প্রোফাইল, এবং.
এটা কোন ধরনের একটি ঘর নির্মাণ করার মত.
আপনি নির্মাণ না উপরে নিচে থেকে বাড়িতে.
আপনি যদি উপাদান সরবরাহ নিতে বাথরুম মত নিতে.
আপনি যদি তাদের বিদ্ধ bedroom-- নিতে একসাথে, এবং আপনি একটি নতুন উপাদান আছে.
আপনি বাড়িতে একটি নতুন অংশ আছে.
>> সুতরাং সব চারপাশে নির্মিত হয় প্রতিক্রিয়া উপাদান এই ধারণা যে
ঘোষণামূলক হয়, ইন্টারেক্টিভ হয়.
কি একটি আপনি শুধু বলতে চাই প্রোফাইল, এবং এটা উপস্থাপনা.
তারা composable হয়.
আপনি একটি সময় এবং একটি প্রোফাইল নিতে পারেন, করা তাদের একসঙ্গে, কিছু ভাল করতে.
তাঁরা যদি তাই, পুনর্ব্যবহারযোগ্য আছেন আপনি একটি পোস্টের জন্য সোর্স কোড আছে,
আপনি যে কোন জায়গায় এম্বেড পারে.
>> আপনি একটি Instagram এম্বেড করতে পারেন আপনার নিজের ওয়েবসাইটে জিনিস.
আপনি ফেসবুক এ এম্বেড করতে পারেন, উদাহরণস্বরূপ, যতদিন এটি ব্যবহার যত ভাল প্রতিক্রিয়া.
সুতরাং উপাদান সত্যিই, সত্যিই সত্যিই, আছে ওয়েব এর শক্তিশালী বিল্ডিং ব্লক
যে কোন স্থানে ব্যবহার করা হয় এবং করা যেতে পারে একসঙ্গে নতুন বিল্ডিং ব্লক করতে.
যে এটা অত্যন্ত এর উচ্চ পর্যায়ের ওভারভিউ.
সুতরাং, আবার, আপনি যদি যে কোনো স্থানে যে কোনো প্রশ্ন
চুল্লী, দর্শনের সম্পর্কে কোডিং, আমার বন্ধ, এবং আমাকে জানাতে.
>> ঠিক আছে, তাই এটা কারণ শীতল প্রতিক্রিয়া হয় আমি বিভিন্ন উপায় আছে
আপনি ওয়েব অ্যাপস নির্মাণ কিভাবে এ.
আপনি সম্ভবত MVC, একটি শোনা করেছি মডেল আপনি CS50 বা যাই হোক না কেন এ নিয়ন্ত্রণ
আপনি ব্যবহার নীরিক্ষণ শ্রেণীর অন্যান্য.
আর সবচেয়ে অবকাঠামো আছে MVC ধারণা চারপাশে নির্মিত.
প্রতিক্রিয়া ব্যক্ত না হয়.
ধারণা চারপাশে নির্মিত হয় প্রতিক্রিয়া একমুখী তথ্য প্রবাহ
এখানে এই চার্ট বা গ্রাফিক দ্বারা হিসাবে দেখা যায়.
>> মূলত, আপনি একটি তথ্য উৎস আছে.
আর তথ্য উৎস সিদ্ধান্ত নিতে হবে কিভাবে নির্দিষ্ট উপাদান খুঁজে রাখা.
এবং উপাদান হবে তারপর, তারা পরিবর্তন হলে,
তারা বলতে হবে তথ্য উৎস পরিবর্তন.
>> Instagram ব্যবহার করতে উদাহরণস্বরূপ, আপনি থাকতে পারে
ভালো পোস্ট বস্তুর একটি তালিকা একটি ডাটাবেস বা কিছু.
তথ্য যে.
এবং তারপর আমাদের পোস্ট উপাদান যে তথ্য নিতে হবে,
এবং রেন্ডার যে তথ্য ব্যবহার পর্দায় একটি জিনিস.
যে কি তীর , উপাদান তথ্য থেকে
এবং তারপর যে একই ডাটা ব্যবহার করা হয় উপাদান একটি গুচ্ছ রেন্ডার.
>> ফেসবুক রসূলের প্রতি, এর জন্য প্রতিক্রিয়া যা উদাহরণস্বরূপ,
আপনি একটি তালিকা থাকতে পারে আপনার ডাটা উৎস হিসেবে বার্তা.
আর যে না পারিশ্রমিক প্রদান করা হবে বার্তা শুধুমাত্র তালিকা
কিন্তু বন্ধুদের তালিকা আপনি.
আপনি অপঠিত গণনা আছে.
হয়ত ফেসবুক জিনিস রেন্ডার যে Facebook.com নীচে আছে.
একই তথ্য একটি সত্যের একক উৎস
এবং যে অনেক কারণ উপাদান অনুষ্ঠিত হবে.
আর যখনই ঐ এক উপাদান পরিবর্তিত হয়,
এটা ফিরে যায় এবং তথ্য উৎস পরিবর্তন.
>> আপনি সঠিক, একটি বার্তা পাঠান?
যে তথ্য উৎস পরিবর্তন.
আপনি আপনার বার্তা পড়া, তাই আপনি 0 থেকে অপঠিত সেট.
যে তথ্য উৎস পরিবর্তন.
এবং এক এই যে সব লক্ষ্য তীর একই তথ্য ফিরে যাচ্ছে
উৎস, তাই আপনি কি জানেন, একটি নির্দিষ্ট ডাটা সেট দেওয়া,
আপনি ঠিক কি জানেন পাতা অনুরূপ যাচ্ছে.
এটা নিয়ন্ত্রণবাদী এর.
আপনি, দেওয়া নির্দিষ্ট তথ্য জানেন, কি পাতা অনুরূপ যাচ্ছে.
আপনি চাইলে এটিকে সমৃদ্ধ যাচ্ছে কিভাবে পূর্বাভাস দিতে পারি আচরণ এবং কিভাবে জিনিষ যাচ্ছি
তারা একত্র করছি যখন কাজ করতে.
>> আর আমি একটি মিলিয়ন উপাদান ছিল এখানে, এটা ঠিক আছে, একই আচরণ করবে?
যদি আপনি কোন থাকা না অদ্ভুত আন্তঃসংযোগ.
একটি ডেটা একটি মিলিয়ন উপাদান অনুষ্ঠিত.
একটি মিলিয়ন উপাদান পারা ফিরে যান এবং তথ্য সম্পাদনা করুন.
আর তাই এটি খুবই চমৎকার.
আমরা, composable নির্মাণ করছেন সহজে আকার পরিবর্তনযোগ্য ওয়েব অ্যাপ্লিকেশান.
>> আপনি একটি ডাটা উৎস আছে, সত্যের উৎস.
যে আপনার উপাদান বলে কিভাবে পৃষ্ঠা খুঁজে রাখা,
এবং উপাদান হবে মিথস্ক্রিয়া হ্যান্ডেল.
এবং তারা পরিবর্তন করতে চান তাহলে কিছু, শুধু ফিরে যান
এবং তথ্য উৎস পরিবর্তন বলতে.
ধারণা তৈরী কর?
তাই প্রতিক্রিয়া সব বোঝার সম্পর্কে কিভাবে একটি কম্পোনেন্ট নির্মাণের
এবং আপনার কম্পোনেন্ট করা কিভাবে বাইরের জগতের সাথে যোগাযোগ করার জন্য.
>> কম্পোনেন্ট ইন্টারঅ্যাক্ট মেকিং বাইরের পৃথিবীর সাথে
অন্য প্রযুক্তি ব্যবহার বলা সর্দি, যা
যে একটি কাঠামো প্রতিক্রিয়া উপরে যোগ.
আমরা যে বিষয়ে কথা বলতে যাচ্ছেন না.
আমরা দেওয়া সম্পর্কে আরো কথা বলতে যাচ্ছেন তথ্য, কিভাবে আপনি একটি কম্পোনেন্ট রেন্ডার করতে পারে?
>> আর তাই আপনাকে কারণ সত্যিই শীতল প্রতিক্রিয়া আপনার কাঙ্ক্ষিত ফিরে শেষ সঙ্গে এটি ব্যবহার করতে পারেন.
আপনি একটি পাইথন ফিরে শেষ ভালো থাকে, আপনার পাইথন কিছু তথ্য থুতু করতে পারেন তাহলে,
এটা রেন্ডার করতে পারে প্রতিক্রিয়া.
আপনি কোন জাতীয় আউটপুট হন তথ্য প্রতিক্রিয়া এটি উপস্থাপনা.
রুবি সাথে আপ পাগল তথ্য প্রতিক্রিয়া এটি উপস্থাপনা.
>> তাই প্রতিক্রিয়া মূলত একটি ওয়েব হয় উপাদান সঙ্গে একটি সামনে শেষ view--
সবটা কোনো তথ্য উৎস জন্য.
তাই তথ্য উৎস থেকে যাচ্ছে উপাদান প্রতিক্রিয়া বেশ সহজ.
অন্য কোন উপায়ে গিয়ে একটু কঠিন হয়.
আমি আগে উল্লেখ করেছে যে সর্দি ব্যবহার.
আমরা যে পাবেন না.
আমরা আরও নজর দিতে হবে তথ্য টু কম্পোনেন্ট দিকে.
আপনি করতে পারেন এই ভাবে শান্ত, মজা ওয়েব অ্যাপ্লিকেশান.
বাইরের পৃথিবীর কোনও প্রভাব ফেলবে না এখন জন্য, কিন্তু যে অন্য গল্প.
>> ঠিক আছে, তাই যদি আপনি এখানে ছিলেন আমার সর্বশেষ সেমিনারে জন্য
আপনার জন্য কোড যে সব জানতে পারবেন আজকের আলোচনা এই URL- এ হতে যাচ্ছে
এখানে, দুঃখিত, এখানে এই URL- এ.
এবং মূলত আমরা যেতে চলুন হয়তো চার ধাপ, পাঁচটি মাধ্যমে,
সম্ভবত না পাঁচটি.
আমরা চার ধাপ মাধ্যমে সরাতে হবে একটি নমুনা নির্মাণের অ্যাপ্লিকেশন প্রতিক্রিয়া.
আর তাই সব সোর্স কোড পথ প্রতিটি ধাপের জন্য
যদি তাই হয়, এখানে ডান হতে যাচ্ছে আপনি, বাড়ীতে বরাবর অনুসরণ করছেন
এই কোড পড়া বিনা দ্বিধায়.
আপনি এখানে বরাবর অনুসরণ করছি, আমরা, পর্দায় এটি দেখানো হবে
তাই এটা নিয়ে চিন্তা করবেন না.
কিন্তু আপনি বাড়িতে থাকেন, তাহলে মনে এই ওয়েবসাইট ভিজিট করার জন্য বিনামূল্যে.
আর, হ্যাঁ, আপনি পেতে সক্ষম হওয়া উচিত আপনি কি এখানে প্রয়োজন চাই সব কোড.
সুতরাং এটি একটি ভাল Cheat শীট হিসাবে ভাল সাথে আপনার ভবিষ্যতের অভিযান প্রতিক্রিয়া.
কুল, তাই যদি এখানে সবাই কে, এবং আপনি বাড়িতে থাকেন, এমনকি যদি,
is.gd/cs50react, এই ওয়েবসাইটে আপ টান, কোন রাজধানী কোন আন্ডারস্কোর, কোন কিছুই.
>> আপনি দেখায় যে একটি পৃষ্ঠা দেখতে পাবেন এই মত একটি সামান্য বিট.
এই CodePen নামক একটি জিনিস.
CodePen একটি সহযোগীতা হয় কোডিং পরিবেশ
যা দিয়ে আমি এখানে কোড লিখুন, এবং পারেন এটি স্বয়ংক্রিয়ভাবে আপনাকে পাঠানো হবে.
আর এই ভাবে করার জন্য, আমি কোড লিখতে পারেন.
আমি এখানে কোড রান করতে পারেন.
>> Example-- জন্য এবং এটা দেখতে reloads-- তাহলে, আমি পেজে জাভাস্ক্রিপ্ট কোড চলমান করছি
এখানে ডান, এবং এটি হবে স্বয়ংক্রিয়ভাবে একটি ওয়েব পাতা রেন্ডার
এই জাভাস্ক্রিপ্ট কোড দিয়ে.
আর তাই এই একটি উপায় আমাদের কোড চেষ্টা করে
ব্যবহার ছাড়াই সত্যিই দ্রুত আমাদের আইডি অথবা আমাদের স্থানীয় মেশিন ব্যবহার
বা যাই হোক না কেন.
এটা আপনি mockup করার জন্য একটি খুব দ্রুত উপায় এবং কোড এর বিভিন্ন ধরণের পরীক্ষা.
>> তাই আমি গ্রহণ করা যাচ্ছে না উদাহরণস্বরূপ কোড, এখানে এটি নির্বাণ.
আমরা এটা দিয়ে কাজ করা চলুন.
আর আপনি বাড়িতে থাকেন, তাহলে আপনি পাশাপাশি এই টান আপ করতে পারেন.
এবং আমি ইতিমধ্যে ইনস্টল করেছি এখানে প্রতিক্রিয়া, তাই আপনি ঠিক করতে পারেন
এখানে আপনার নিজের কোড লিখুন, এবং আপনার নিজস্ব খেলার মাঠ হিসাবে এটা চেষ্টা.
>> হ্যা, সবাই যদি এখানে এই লিঙ্কটি খুলুন.
আমার একটি অঙ্গুষ্ঠ জানাবেন আপনি এটা খোলা আছে একবার.
কুল, কুল.
কিছুই, এখন জন্য এখানে আছে কিন্তু আমরা খুব শীঘ্রই যে পরিবর্তন হবে.
>> ঠিক আছে, তাই একটি জাভাস্ক্রিপ্ট প্রতিক্রিয়া জানায় লাইব্রেরি, এবং যেমন,
, দয়া করে জাভাস্ক্রিপ্ট জ্ঞান প্রয়োজন যা ওয়েব প্রোগ্রামিং ভাষা.
এবং এটা অন্যান্য জিনিসের জন্য ব্যবহার করা হচ্ছে এখন খুব কিন্তু প্রাথমিকভাবে ওয়েব বিকাশ
ভাষা, আপনার সাথে অপরিচিত, তাই যদি যে, JSforCats.com নামক একটি সাইট পড়তে.
ইহা চমৎকার.
আপনাকে JavaScript শিখতে পারেন আধা ঘণ্টার ভিতর.
এটা অবিশ্বাস্য.
>> সুতরাং এটি একটি পড়তে দিতে.
আমরা এখানে কারণ এইচটিএমএল অনেক আমরা অবশ্যই ওয়েব পেজ ডিজাইন করছি.
আপনার সাথে অপরিচিত হন তাহলে তাই এইচটিএমএল, HTMLdog.com খুঁজে বার করো.
আমি প্রতিক্রিয়া একটি শেখার মনে মিলিয়ন বার সহজ ইতিমধ্যেই আপনি যদি
বিল্ডিং ব্লক জানেন.
আপনি উপাদান আছে, এটা সহজ একটি বড় কম্পোনেন্ট করা.
তার মানে আপনি ভাষা প্রতিক্রিয়া আছে.
>> তাই এগিয়ে যান এবং দিতে এই জিনিস একটি পড়ুন.
এই ভিডিও বিরাম.
আপনি যদি এটি একটি পড়তে দিন বাড়ীতে আপনি না হয় তাহলে
এইচটিএমএল বা JavaScript সঙ্গে পরিচিত
ঠিক আছে, তাই আমরা চলুন কি কি আমরা করতে যাচ্ছেন
প্রতিক্রিয়া ব্যবহার করে একটি খুব মৌলিক flashcard অ্যাপ্লিকেশন.
আমরা একটি flashcard আছে চলুন.
আপনি পিছনে কার্ড টুসকি পারেন.
আর আমরা উদাহরণ একটি তালিকা পাবেন আমরা যে সব কার্ড,
এবং আমরা বোধ করছি উচ্চাভিলাষী, আমরা হতে পারে
মধ্যে সুইচ করতে পারবেন তাদের উপর ক্লিক করে গাড়ির.
>> কিন্তু এই আপনার বেয়ার, হয় হাড়, একটি খুব সহজ অ্যাপ্লিকেশন প্রতিক্রিয়া.
আর তাই এই আসলে বাস্তবায়ন তুচ্ছ নয়,
কিন্তু আমরা যদি আপনি না, তা দেখানোর জন্য চলুন এই, এটা প্রসারিত খুব, খুব সহজ
এটি দিয়ে অন্য মানুষের সাহায্য করে.
তাই আমরা চার পদক্ষেপের মধ্য দিয়ে যেতে চলুন গোড়া থেকে শুরু এই নির্মাণ করতে.
>> ঠিক আছে, তাই চার ধাপ, আমরা করব প্রথম ধাপে দিয়ে শুরু করল.
প্রথম পদক্ষেপ হতে যাচ্ছে আপনার প্রথম কম্পোনেন্ট বিল্ডিং.
যেহেতু আমি আগে বলেন, একটি কম্পোনেন্ট প্রতিক্রিয়া স্টেরয়েড শুধু একটি HTML উপাদান.
এটা এইচটিএমএল নির্দিষ্ট করে এবং কিছু আচরণ, এবং এটা
কিভাবে মানুষ উল্লেখ করবে এটা কিভাবে সঙ্গে যোগাযোগ করতে পারবেন
এটা অভ্যন্তরীণ রাষ্ট্র হবে.
একটি বাটন কতগুলি মত জানতে হবে লেগেছে বার এটা উদাহরণস্বরূপ ক্লিক করা হয়েছে,
এবং এটি নিজেই খুঁজে রাখা কিভাবে জানতে হবে.
>> সুতরাং আসুন এগিয়ে যান এবং গড়ে তুলি আমাদের জাভাস্ক্রিপ্ট ব্যবহার করে প্রথম কম্পোনেন্ট.
সিনট্যাক্স অদ্ভুত দেখায়, তাই যদি, এটা কোন ধরনের হল এ কারণে যে.
সুতরাং, আবার, আমরা চলুন নামক একটি পরিবর্তনশীল করতে
অ্যাপ্লিকেশন শব্দ দিন ব্যবহার, যা একটি পরিবর্তনশীল তোলে,
অ্যাপ সমান React.createClass যাক.
>> প্রতিক্রিয়া একটি লাইব্রেরি ও আছে The বর্গ ফাংশন তৈরি.
এবং এই ফাংশন হয় কোড একটি বিট যে আপনি
একটি নতুন তৈরি করতে ব্যবহার করতে পারেন কম্পোনেন্ট প্রতিক্রিয়া টাইপ.
আর তাই React.createClass একটি কম্পোনেন্ট তোলে,
এবং এই কম্পোনেন্ট হবে স্টাফ কাজ করতে সক্ষম হবে.
এটা করতে পারেন মূল বিষয় রেন্ডার হয় কিছু একটি ফাংশন হিসাবে প্রদান.
>> আবার, এই সূচক সুস্পষ্ট নয় যদি আপনি, আমি আপনি বিড়ালের জন্য জাতীয় যেতে সুপারিশ
এবং এটি চেক আউট.
যে যথেষ্ট ভাল জুম ইন করা হয়?
কুল.
>> সুতরাং প্রতিটি কম্পোনেন্ট চাহিদা একটি রেন্ডার ফাংশন আছে.
রেন্ডার ফাংশন, বলেছেন আমি পর্দায় তা প্রিন্ট না?
কিন্তু উপাদান একটিও ভাষা ব্যবহারযোগ্য না হলে অনর্থক
তাই, পর্দায় কি প্রিন্ট জানেন আপনি একটি রেন্ডার ফাংশন থাকতে হবে.
>> , আপনি জিনিস রেন্ডার তাই শুধু কিছু এইচটিএমএল প্রত্যাবর্তন করতে হবে.
আর তা যে শীতল হয় নামক একটি জিনিস আছে
একটি এক্সটেনশন যা JSX, দ্বারা ব্যবহৃত হয় যে দয়া করে জাভাস্ক্রিপ্ট প্রতিক্রিয়া.
এটা আপনি ভিতরে এইচটিএমএল লিখুন আসুন আপনার জাভাস্ক্রিপ্ট, যা
যখন অদ্ভুত ধরনের শব্দ আপনাকে প্রথমে এটি সম্পর্কে মনে,
কিন্তু পরে এটি ধারণা অনেক তোলে.
সুতরাং আমরা এই কাজ করতে পারেন.
আপনি এইচটিএমএল এর সাথে পরিচিত হন, তাহলে আমি জানি আমরা একটি সাধারণ উদ্দেশ্য সঙ্গে একটি div আছে
স্টাফ জন্য ধারক.
আমরা ভিতরে একটি div আসতে, এবং পারেন এই div, আমরা কাপড় লাগাতে পারেন.
>> সুতরাং আসুন আমরা শুধু রেন্ডার করতে চান বলা যাক এখন জন্য একটি সরল-আপ flashcard রাখুন.
ফ্ল্যাশকার্ড, আমি বলতে চাই, একটি প্রশ্ন এবং উত্তর থাকবে.
সুতরাং এই div ভিতরে, এর দিন একটি অনুচ্ছেদ প্রিন্ট আউট
যে কি question-- বলেছেন জীবন থেকে চূড়ান্ত উত্তর, মহাবিশ্বের?
এবং তারপর উত্তর হয় 42, অবশ্যই, হতে যাচ্ছে.
>> যে সব সময়ে ভাল আসা পর্যন্ত করা হয়নি.
হ্যাঁ, তাই মূলত আপনি সত্যিই করতে পারেন আপনার জাভাস্ক্রিপ্ট ভিতরে এইচটিএমএল লিখুন.
আর এই হতে যাচ্ছে পর্দার মধ্যে আউট মুদ্রিত.
সুতরাং এটি চেষ্টা করা যাক.
>> তাই আমরা আমাদের কম্পোনেন্ট আছে.
আমরা করা প্রতিক্রিয়া বলা প্রয়োজন পর্দায় কম্পোনেন্ট
তাই React.render, তাই যে লক্ষ্য আমরা অন্য কোন উপাদান মত অ্যাপ্লিকেশন খাওয়াবো.
এটি একটি HTML উপাদান ছিল আমরা তা লিখুন.
পরিবর্তে img মত বলছে ভালো অনুচ্ছেদের জন্য ইমেজ বা P জন্য,
অ্যাপ যাতে আপনি অ্যাপ্লিকেশন লিখুন একটি HTML উপাদান মত চিকিত্সা.
যেহেতু আমি আগে বলেন, এটা স্টেরয়েড একটি উপাদান.
>> যাতে আপনি অ্যাপ্লিকেশন রেন্ডার, এবং আপনি এটা করা একটি জায়গা দিতে.
আর এই কিভাবে আপনি যা করতে পারেন কোথায় এটা করা তা বলুন.
আমি একটি সহজ div তৈরি হয়েছে পৃষ্ঠার একটি আইডি দিয়ে বলা পাতা,
এবং যে যেখানে উপাদান যেতে যাচ্ছে.
>> আর আমরা এইচটিএমএল সাথে চালানো যাচ্ছে না করছি.
মূলত এই পেতে যাচ্ছে এই পৃষ্ঠার উপাদান এর ভিতরে রাখা
আমরা পর্দা আছে.
সুতরাং এই কোড সঞ্চালিত হয়, এবং এটি এই স্বপক্ষে পর্দায় জিনিস, তাই আমরা এখানে হয়.
আমরা আমাদের প্রথম প্রতিক্রিয়া কম্পোনেন্ট করেছেন.
>> তাই শুধু একটি সংক্ষিপ্তবৃত্তি হিসাবে, আমরা আস্তে তৈরি কম্পোনেন্ট একটি নতুন ধরনের, ডান?
যে কি React.createClass এর.
আর যে কম্পোনেন্ট, আমরা এটা কি করা উচিত তা বলা.
যখনই এই কম্পোনেন্ট হয় পর্দা সম্মুখের প্রিন্ট করা,
এটা DIV সাথে প্রিন্ট আউট হবে এটি ভেতরে দুটি অনুচ্ছেদ.
>> আর আমরা কি, আমরা একটি নতুন অ্যাপ্লিকেশন তৈরি কোণ বন্ধনী অ্যাপ্লিকেশন নোটেশন ব্যবহার করে.
আমরা এটা করা তা বলা পৃষ্ঠার উপাদান ভিতরে.
আর তাই আমি কি, তা তৈরি যে ফর্মা থেকে একটি নতুন অ্যাপ্লিকেশন.
এবং তারপর আমি এটা রেন্ডার এটি বলা.
সুতরাং এটা, বলেন ঠিক আছে, অ্যাপ্লিকেশন, আমি কি আউট প্রিন্ট করা উচিত?
অ্যাপ, একটি div প্রিন্ট আউট যেতে বলছেন এটি ভেতরে দুটি অনুচ্ছেদের সঙ্গে.
এবং voila, সাথে আমাদের DIV আছে এটি ভেতরে দুটি অনুচ্ছেদ.
এ পর্যন্ত জানার?
>> সুতরাং, আবার, এর পুরো চ্যালেঞ্জ প্রতিক্রিয়া শুধু উপাদান করতে বুদ্ধিমান কিভাবে করা হয়.
কিভাবে উপাদান একসঙ্গে কাজ.
এখন আমরা আমাদের প্রথম তৈরি করেছি যে কম্পোনেন্ট, এর ফিরে যাই
এবং উপাদান স্বনির্ধারিত করতে.
তাই আপনি যদি HTML এ কি জানেন কিভাবে আপনি আপনার বোতাম শ্রেণীর দিতে পারেন?
আপনি আপনার নোঙ্গর href দিতে পারেন.
আপনি সঠিক, আপনার ইনপুট একটি টাইপ দিতে পারেন?
আপনি আরো কাস্টম দিতে পারেন আপনার সকল উপাদানে বৈশিষ্ট্য
এটা আরো আকর্ষণীয় করে তুলতে.
আমরা আসলে কি করতে পারেন সঠিক একই জিনিস.
>> সুতরাং আসুন আমরা সেটি যাক আমাদের অ্যাপ্লিকেশন কোনো কার্ড রেন্ডার যেতে.
এই মুহূর্তে আমরা শুধু একটি হার্ডকোডেড কার্ড অনুষ্ঠিত.
আমরা শুধুমাত্র একটি সময় আছে জানি কার্ড এটি করতে পারেন, তাই আমরা করছি
চেষ্টা করুন এবং তাই এখন এই পরিবর্তন করতে যাচ্ছেন আমরা শুধু এটা কিছু কার্ড দিতে পারেন যে.
এটা কার্ড প্রিন্ট আউট করব.
>> আপনি চেষ্টা এবং করা কর্তব্য আপনার উপাদান খুব সাধারণ উদ্দেশ্যে.
তাই এই ভাবে আমি ইমেইল পারে এই আমার বন্ধু এবং মত হতে,
আপনি যাই হোক না কেন, flashcard, শুধু এখানে সেটিকে ভোজন,
এবং এটি নিজে এটা করব.
আপনি অন্যান্য লাগাতে পারেন আপনার নিজস্ব অ্যাপ্লিকেশন মধ্যে কিছু.
>> কিন্তু প্রথম, এর এই বিরতি দিন দুটি উপাদান মধ্যে আপ,
কিন্তু আমরা কার্ড আলাদা করতে চান প্রকৃত অ্যাপ্লিকেশন অংশ থেকে ছাপানো অংশ.
তাই আমরা কি করতে পারি আমরা হয় অ্যাপ্লিকেশন থেকে এই পরিবর্তন করতে পারেন
CardView করতে, শুধু একটি app এর জন্য নতুন নাম,
এবং আমরা একটি নতুন করা যাবে কম্পোনেন্ট, অ্যাপ্লিকেশন বলা
পুরানো অ্যাপ্লিকেশন সঙ্গে বিভ্রান্ত করা যাবে না.
আমরা createClass পেয়েছেন, এবং HTML এ মত,
আপনি নীড় উপাদান প্রতিক্রিয়া হতে পারে একে অপরের ভিতর.
>> , এই রেন্ডার ফাংশন তাই ফাংশন প্রত্যাবর্তন CardView,
এবং এই সঠিক একই জিনিস.
এটা একই জিনিস কেন দেখতে?
পরিবর্তে শুধুমাত্র অ্যাপ্লিকেশন রেন্ডারিং যে , এটি ভেতরে div ও পেয়ারিং আছে
অ্যাপ্লিকেশন CardView উপস্থাপনা, এবং CardView div ও অনুচ্ছেদের উপস্থাপনা.
তাই এই নিয়ে আমাদের প্রথম উদাহরণ একে অপরের ভিতর পাখির উপাদান.
যে জানার জন্য?
সুতরাং, আবার, আমরা একটি CardView উপাদান আছে.
আমরা অ্যাপ্লিকেশন উপাদান আছে এটা চেয়ে বড় যে.
>> ঠিক আছে, তাই আমরা চাই আমাদের CardView-- আপনি যদি একটি ভাল CardView একটি নির্দিষ্ট কার্ড দিতে,
এটা ঠিক আছে, আপনার জন্য প্রিন্ট আউট করব?
সুতরাং প্রথম, আমরা একটি কার্ড তৈরি করতে হবে, তাই এর একটি কার্ড বস্তুর করা যাক.
সুতরাং আমার কার্ড বাতিল equal-- আপনি সব পরিচিত হন তাহলে,
এই মাত্র স্বরলিপি তৈরি হয় জাভাস্ক্রিপ্ট দিয়ে অবজেক্ট.
এটা একটি struct মত কোন ধরনের সি, তাই আমরা একটি কার্ড তৈরি
এবং তাই এখন আমরা এই কার্ড প্রেরণ করতে পারেন একটি সম্পত্তি বা HTML এ একটি বৈশিষ্ট্য হিসাবে
আমাদের অ্যাপ্লিকেশন পরিভাষা.
তাই আমরা এই অ্যাপ্লিকেশন, কি করতে পারেন কার্ড myCard সমান.
>> আপনি ইনপুট মধ্যে, আপনি কি জানেন কিভাবে ইনপুট টাইপ টেক্সট বা বাটন সমান
বর্গ বুটস্ট্র্যাপ জন্য বিটিএন সমান ,?
একই ধারণা, অ্যাপ্লিকেশন কার্ড সমান আপনি ধনুর্বন্ধনী করা পেয়েছেন এখানে
অ্যাপ কার্ড myCard সমান, তাই এই আমরা এই কার্ড বস্তুর আছে বলেছেন.
আমি একটি হিসাবে এটি পাস করতে যাচ্ছি অ্যাপ্লিকেশন কম্পোনেন্টের সম্পত্তি.
আর এই অ্যাপ্লিকেশন কম্পোনেন্ট হবে এটি অ্যাক্সেস করতে সক্ষম হতে হবে এবং না
এটি দিয়ে আকর্ষণীয় উপাদান.
>> সুতরাং আমাদের অ্যাপ্লিকেশন হতে যাচ্ছে একটি কার্ড দেওয়া, তাই এখন জন্য,
শুধু দিতে এর অ্যাপ্লিকেশন আছে যাক CardView কার্ড
নিজেই অ্যাপ্লিকেশন নয় মত কারণ এটা দিয়ে কি করতে হবে তা জানা যাচ্ছে,
তাই আমরা ঠিক CardView তা দিতে হবে.
সুতরাং আমরা এটা পাস করব একই ভাবে, কার্ড, সমান
এবং তাই প্রতিটি কম্পোনেন্ট ব্যবহার করতে পারবেন এটি দেওয়া হয়েছে যে জিনিস.
তারা বৈশিষ্ট্য অ্যাক্সেস করতে পারেন এটা দেওয়া হয়েছে
this.props.card, এই সিনট্যাক্স ব্যবহার.
>> তাই কি এখানে ঘটবে আপনি myCard বস্তুর আছে.
আপনি অ্যাপ্লিকেশন মধ্যে এটি পাস অ্যাপ কার্ড ব্যবহার myCard সমান.
যে কার্ড বস্তুর আপনার অ্যাপ্লিকেশন দেওয়া হয়.
app টি এটি অ্যাক্সেস করতে পারেন this.props.card হিসেবে.
এটি একটি ইমেজ মত কোন ধরনের এটা এর উৎস সম্পর্কে অবগত রয়েছেন.
>> এই app টি এটি কার্ড কি জানে হয়, এবং এটি সঙ্গে স্টাফ করতে পারেন.
এটা কম্পিউটেশন করতে পারেন.
এটা বন্ধ ভিত্তি করে সিদ্ধান্ত নিতে পারেন.
>> এখন জন্য, আমি পাস চালু ছিল CardView সম্মুখের this.props.card.
এ পর্যন্ত জানার?
এটা এখন আরো জানার জন্য করব.
>> ঠিক আছে, তাই এখন আমরা CardView এ আছেন.
কার্ড দেওয়া আমাদের CardView, উচিত তার প্রশ্ন ও উত্তর প্রিন্ট আউট.
এই মুহূর্তে আমরা শুধু প্রিন্ট আউট কিছু হার্ডকোডেড প্রশ্ন ও উত্তর.
আমরা প্রয়োজন out-- চিন্তা করা প্রয়োজন তারা আমাদের দিয়েছেন যে কার্ড জিজ্ঞাসা
কি প্রশ্ন ও উত্তর, এবং তারপর পর্দার মধ্যে এই প্রিন্ট আউট.
>> তাই আমরা এখানে এই কাজ করতে পারেন.
প্রথম সমান begin-- রেন্ডার.
তাই আমরা এখানে কি করছি আমরা জানি যে হয় কার্ড, একটি সম্পত্তি দেওয়া হয়
ঠিক আছে?
এটি একটি ইনপুট হিসাবে আমাদের দেওয়া হচ্ছে.
এটা প্রায় মত লেগেছে একটি ফাংশন আর্গুমেন্ট.
কার্ড একটি আর্গুমেন্ট প্রায় এই CardView করতে.
>> আমরা যে নিষ্কর্ষ, এবং করা হবে এটা পরিবর্তনশীল প্রশ্নের মধ্যে.
নিশ্চিত উত্তর গিয়েছিলাম করুন পরিবর্তনশীল এর উত্তর পাওয়া সম্ভব.
কার্ড উত্তর দিতে অনুরোধ জানানো হবে যে.
আর এখন আমরা এই আছে যে, পরিবর্তে যে টেক্সট প্রিন্ট আউট নিয়ে,
আমরা প্রিন্ট আউট চলুন যাই হোক না কেন তারা আমাদের দিয়েছেন.
>> সুতরাং এই তাই আমরা চলুন stuff-- প্রশ্ন উত্তর নিভিয়ে দিতে.
এই কাজ করে তাহলে চলুন দেখা যাক.
কুল, তাই এটি মাধ্যমে পইঠা দিন আরো এক সময় শুধু নিশ্চিত হতে.
>> সুতরাং আমার কার্ড কার্ড বস্তু, এবং আমরা অ্যাপ্লিকেশন যে কার্ড প্রদান করা হয়.
এবং অ্যাপ্লিকেশন নিতে যাচ্ছে কার্ড ও এটা CardView দিতে.
আর এই CardView আপনি যদি বলেন, আমার কোনো ফ্ল্যাশকার্ড বস্তু দিতে
আমি তার প্রশ্নের প্রিন্ট আউট করব এবং তার উত্তর, সঠিক?
>> তাই আমি কি করতে পারে আমি পারেন প্রথম এই কোড পাঠাতে
আমার বন্ধু আমার কোড 10 লাইন, মত.
তিনি এটা এম্বেড পারে তার নিজস্ব অ্যাপ্লিকেশন.
আর তিনি একই জিনিস করেছেন যতদিন, , CardView কার্ড এই সমান মত
তিনি CardView নির্মিত যতদিন এবং এটা সঠিক তথ্য দিয়েছেন,
তিনি তার নিজের কার্ড রেন্ডার করতে পারে.
আর তাই এই ভাবে, এটি একটি সত্যিই আপনি নির্মাণের জন্য শীতল উপায়
ঠিক আছে, একে অপরের ব্যবহার যে উপাদান?
এই কার্ড, আমি প্রকাশ করতে পারে ইন্টারনেটে এই CardView,
এবং মানুষ তা ব্যবহার করতে সক্ষম হবে.
তাই মূলত, এটা এক মত সি লাইব্রেরি স্ট্যান্ডার্ড ফাংশন.
>> এটি একটি ফাংশন কোথায় কেউ এটা লেখা হয়েছে.
আপনি একটি নির্দিষ্ট ইনপুট দিতে.
এটি একটি নির্দিষ্ট আউটপুট উত্পাদন করব.
আপনি এটা অন্ত কিভাবে কাজ করে না যত্ন.
যতদিন আপনি এটা সঠিক দিতে হিসেবে ইনপুট, এটা সঠিক আউটপুট করতে হবে.
>> আর একটি উপাদান হতে পারে একই ভাবে চিন্তা.
এই CardView ভালো হয় একটি লাইব্রেরি ফাংশন.
আপনি তা কিছু কার্ড দিতে হলে একটি সম্পত্তি হিসাবে, এটা করব
যে কার্ড বিষয়বস্তু প্রিন্ট আউট.
আমি আমার কার্ড পরিবর্তন হলে ভালো লেগেছে পরিবর্তে 5 প্লাস 37 কি মত হতে,
এটি অনুসারে আপডেট করতে হবে.
তাই শুধু ইনপুট পরিবর্তন করে, এটি একটি নির্দিষ্ট আউটপুট পায়.
তাই আপনি প্রায় উপাদান মনে করতে পারেন এই ভাবে ফাংশন, যা
আপনি একত্র করা যাবে.
আপনি এই CardView মত, ইনপুট পেতে ইনপুট হিসেবে, আপনি আউটপুট পেতে.
এই ক্ষেত্রে, আউটপুট এইচটিএমএল হয়.
এ পর্যন্ত জানার?
কুল, তাই আবার, বৈশিষ্ট্য আছে আপনি তথ্য প্রেরণ করতে পারেন কিভাবে
মধ্যে এবং উপাদান আউট.
>> ঠিক আছে, তাই এর এই না দেওয়া জিনিস ইন্টারেক্টিভ.
এই মুহূর্তে এটা বিরক্তিকর ধরনের.
[শ্রবণাতীত] কি?
আপনি, কিছু প্রিন্ট আউট করতে পারেন কিন্তু যে এটা করতে পারেন সব.
>> সুতরাং আসুন ফিরে যাই শুধু এখন জন্য পুরানো প্রশ্ন.
ঠিক আছে, তাই এই মুহূর্তে এই উপাদান সব তারা না কারণ বিরক্তিকর,
তারা ইনপুট পেতে.
তারা আউটপুট, ঠিক করতে?
যে বিরক্তিকর ধরনের.
আমরা আমাদের আছে চান উপাদান আছে পাবে
অভ্যন্তরীণ রাষ্ট্র কিছু, ভালো কিছু মনে.
>> একটি flashcard জন্য, জন্য রাষ্ট্র যেমন, কি ধরনের
আপনি চাইতে পারেন একটি flashcard জন্য মনে?
কি অস্থায়ী অবস্থা আপনি মনে রাখতে চাইবেন
একটি flashcard অ্যাপ্লিকেশন মধ্যে একটি flashcard জন্য?
শ্রোতা: এটা ফ্লিপ করা হয়েছে কিনা?
নীল মেহতা: আচ্ছা, ঠিক আছে.
তাই আপনি রাখতে চান হতে পারে ট্র্যাক আপনি আপ মুখোমুখি বা হয়
আপনি কার্ড নিচে সম্মুখীন.
ফেসবুকে, উদাহরণস্বরূপ, যদি আপনি would খবর ফিড, যেখানে মনে রাখতে চান
আপনি বা প্রফাইল যারা এর মত ডান এখন করছেন.
>> ম্যাসেঞ্জার, কি আপনি টেক্সট মত ঠিক আছে, ইনপুট বক্সে টাইপ?
আপনি পৃষ্ঠাটি রিফ্রেশ যদি, দূরে যায়.
কিন্তু আপনি কি সত্যিই গ্রাহ্য না.
এটা শুধু অস্থায়ী.
হ্যা?
>> শ্রোতা: [শ্রবণাতীত]
নীল মেহতা: একটি ফ্ল্যাশ মত কার্ড, আপনি দেখা যাবে মত
প্রশ্ন পাশ বা উত্তর দিকে?
>> শ্রোতা: ঠিক আছে.
>> নীল মেহতা: ভালো লেগেছে একটি ঠিক আছে, flashcard দ্বিভুজ?
হ্যাঁ, তাই আপনি চান এখন এই ধারণা আছে
আমি ইনপুট মত, যা বৈশিষ্ট্য আছে কিন্তু আহ, অস্থায়ী যা রাষ্ট্র,
আপনি পাতা হয় যেখানে, ডান?
আবার, আমি ফেসবুক এ বলেন রসূল, আমি যা ব্যক্তির মত আছে
আপনি ফেসবুক দেখছেন অথবা যারা ডান, প্রফাইলটি এর?
>> এই শুধুমাত্র অস্থায়ী.
এটি ব্যবহারকারীকে প্রদর্শন করা জরুরী কি ঘটছে, কিন্তু পৃষ্ঠাটি রিফ্রেশ হচ্ছে.
এটা কোন ব্যাপার না.
সুতরাং এটা, অস্থায়ী রাষ্ট্র তাই আমরা সব রাষ্ট্র.
>> সুতরাং, আবার রাষ্ট্র ও সাজসরঞ্জাম আছে.
সাজসরঞ্জাম ইনপুট দেওয়া হয় আপনার তথ্য উৎস থেকে.
রাজ্য শুধু ডিফল্ট ভালো হয়.
এটা শুধু কাপড় মত যে জিনিস ইন্টারেক্টিভ তোলে.
>> তাই আমাদের CardView-- এর দেওয়া আছে আমাদের CardView-- অনেক ভালো লাগত, তাই.
আমরা এখানে কাজ করতে যাচ্ছেন কি, আমরা চলুন CardView এবং শুধুমাত্র CardView স্পর্শ করতে.
আর তাই আমার বন্ধু এই তারা পেয়েছেন যারা কোনো পার্থক্য লক্ষ্য করা হবে.
তারা পরিবর্তন করতে হবে না তাদের নিজস্ব কোড কোন,
অথচ তারা কিছুই দেখতে চাই তাদের CardView আপ souped গিয়েছে.
যে উপাদান সম্পর্কে একটা চমৎকার অংশ.
>> ঠিক আছে, আমাদের CardView তাই, এর চেষ্টা করা যাক এবং আমরা আপ ফেজ কিনা ট্র্যাক রাখতে
অথবা নিচে সম্মুখীন.
প্রতিক্রিয়া আমরা প্রথম এই না প্রাথমিক অবস্থায় নির্দিষ্ট.
কোথায় কার্ড পেতে শুরু হয়েছে?
>> সুতরাং getInitialState নামক একটি ফাংশন হতে কাজ, এবং আমরা একটি বস্তু আসতে.
এই বস্তু, কিছু রাষ্ট্র রয়েছে এবং একটি রাষ্ট্র মাত্র একটি কি-মান জোড়া.
গুম হয়ে চান, তাহলে আপনি একটি কী এবং একটি আছে নাম একটি স্ট্রিং মত মান, আপনি.
>> এই ক্ষেত্রে, এর সামনে সত্য বলা যাক.
এই আমরা একটি রাষ্ট্র আছে বলে.
রাষ্ট্র এক কম্পোনেন্ট সামনে একটি বৈশিষ্ট্য বলা হয়.
[শ্রবণাতীত], ডিফল্টরূপে তাই, আমরা কার্ড সামনে করছি,
এবং আমরা এই পরিবর্তন করতে পারেন হিসাবে আমরা কার্ড টুসকি.
ধারণা তৈরী কর?
>> ঠিক আছে, তাই এ মুহূর্তে আমরা করছি, রেন্ডার প্রশ্ন ও উত্তর দেখাচ্ছে.
এখন আমাদের কি করা উচিত প্রশ্ন দেখা হয়
আমরা কার্ড সম্মুখে হন তাহলে তাই উত্তর কার্ড ফিরে জন্য.
আপনি সব করতে কেন কার্ড ইন্টারেক্টিভ.
সুতরাং আসুন এবং এই এখানে চেষ্টা করা যাক.
আচ্ছা, প্রথম শুধু একটি পরিবর্তনশীল.
আমরা this.state.front এখন অনুরোধ করতে পারেন.
আমরা একই আমরা রাষ্ট্র অ্যাক্সেস প্রবেশাধিকার সাজসরঞ্জাম, তাই this.state.front.
>> আমরা সামনে থাকেন, তাহলে টেক্সট this.props.card.question হয়.
আমরা সামনে করছি কার্ড, আমরা চেষ্টা এবং দখল চলুন
কার্ড থেকে প্রশ্ন.
অন্যথা, আমরা পিছনে হন তাহলে কার্ড, আমরা কি করব?
>> শ্রোতা: উত্তর?
>> নীল মেহতা: হাঁ, তাই টেক্সট this.props.card.answer সমান.
কিন্তু যদি আপনি বিজ্ঞপ্তি, আমরা ব্যবহার করছি রাষ্ট্র একটা সিদ্ধান্ত নেওয়া
এখন কম্পোনেন্ট কারণ বিভিন্ন দেখবে
এই এটিতে যোগাযোগ বন্ধ ভিত্তি.
সুতরাং পরিবর্তে এই আউট মুদ্রণ, আমরা শুধু টেক্সট প্রিন্ট আউট করব.
কুল, এখন তাই, আপনি দেখতে যেমন, আমরা শুধু প্রশ্ন দেখুন.
আর নিজে নিজে এখানে রাষ্ট্র পরিবর্তন হলে সামনে মিথ্যা আমরা 42 ফিরে পেতে.
>> সুতরাং, আবার, এই কম্পোনেন্ট নিজস্ব রাষ্ট্র আছে.
একটি বাটন কি না তা জানেন লেগেছে এটা, চাপা বা না হয়েছে
এই জিনিস কি জানেন সামনে বা পিছনে.
ডিফল্টরূপে, এটা সামনে পাওয়া যাবে.
এবং তারপর এটি সামনে যদি, আমরা প্রশ্ন প্রিন্ট আউট করব.
এটা পিছনে থাকে, আমরা কি করব উত্তর প্রিন্ট আউট.
সুতরাং, আবার তথ্য দেওয়া হয় একই.
এটা শুধু আলাদা দেখায় আপনি এটি প্রোগ্রাম কিভাবে উপর ভিত্তি করে.
সুতরাং, উদাহরণস্বরূপ, ফেসবুক মেসেঞ্জার, আপনি একই তথ্য উৎস পেতে, এমনকি যদি,
এটা ভিন্ন চেহারা হতে পারে রাষ্ট্র ভিন্ন কারণ.
আপনি একটি সময়ে খুঁজছেন বিভিন্ন ব্যক্তির বার্তা.
>> ঠিক আছে, তাই এই সব ঠিক থাকে এবং ভাল, কিন্তু এখন তা আসলে
কিনা, পরিবর্তন আমাদের পারবেন না আমাদের কার্ড সামনে বা পিছনে হয়.
আমরা একটি উল্টানো যোগ করে এই কাজ করতে পারে বাটন, কার্ড থেকে একটি বাটন যে
এটা [শ্রবণাতীত] যদি কার্ড টুসকি হবে.
সুতরাং আসুন এখানে, এই একটি বাটন যোগ দিন বাটন, আপনি এই বাটনটির উল্টানো বলবে.
>> আর তাই এই মুহূর্তে, এটা কিছু না.
এটা শুধু সুন্দর দেখায়.
আমরা কি কিছু করতে পারি আমরা একটি যুক্ত করতে পারেন ইভেন্ট হ্যান্ডলার সঠিক নয়, onClick, this.flip সমান
এবং আমরা পরবর্তী উল্টানো সংজ্ঞায়িত করব.
কিন্তু মূলত, onClick একটি ফাংশন যে
ব্যবহারকারী এটি ক্লিক করা হলে বলা হয়.
>> সুতরাং বাটন জানতে হবে এটি ক্লিক করা হয়েছে যখন.
এটি ক্লিক করা হয়েছে গিয়েছিলাম, এটা কার্ড টুসকি হবে.
এটা আপনার মত ধরনের পিজা ডেলিভারি লোক.
আপনি, ভালো ঠিক আছেন, যখনই কেউ ঠিক আছে, আমি পিজা বিলি করব, আমার কল?
>> আপনি এই শ্রোতা করো.
আপনি একটি ঘটনার জন্য শুনতে.
আপনি বলা হয়, এবং যখন আপনি পেতে ইভেন্ট আপনি কিছু করতে, এরকম.
আপনি পিজা পেতে.
এই ক্ষেত্রে, আপনি যখন আছেন ক্লিক, আপনি কার্ড টুসকি.
>> আর তাই আমরা একটি উল্লেখ করা প্রয়োজন কার্ড টুসকি করবে ফাংশন,
তাই আমরা ঠিক লিখতে হবে এখানে, ফাংশন টুসকি.
আর তাই আপনি উল্টানো করতে হবে কি মনে করেন?
আবার এই যখন বলা পরার আমরা উল্টানো বাটন ক্লিক করুন.
উল্টানো ফাংশন কি করা উচিৎ?
>> শ্রোতা: পরিবর্তন this.state.front সত্য থেকে সত্য মিথ্যা, মিথ্যা.
>> নীল মেহতা: হাঁ, তাই নিতে যাই হোক না কেন this.front সামনে রাষ্ট্র হচ্ছে ÑÑ.
তাহলে, সামনে রাষ্ট্র নিন এটা মিথ্যা, সত্য.
যদি এটা মিথ্যা, ঠিক আছে, এটা সত্য না?
তাই চেষ্টা করে দেখি.
>> আপনি রাষ্ট্র পরিবর্তন করতে পারবেন না শুধু this.state করে.
আপনি এই ব্যবহার করতে পারবেন না.
আপনি তা করতে পারবেন না.
আপনি একটি ফাংশন ব্যবহার করতে হবে this.setState বলা.
>> সুতরাং আপনি this.setState সামনে বলতে পারেন কোলন এই যেখানে, আবার বিস্ময়বোধক
পয়েন্ট বিপরীত মানে.
আমি এই অনুমান. state.front সত্য, এটা মিথ্যা চালু করব.
সুতরাং আমরা রাষ্ট্র সেট করব সত্য থেকে মিথ্যা.
যদি এটা মিথ্যা, আমরা করব সত্য এটা মিথ্যা সেট.
>> শুধু আমরা সেট এবং সামান্য পান যে বিজ্ঞপ্তি ভিন্নভাবে, এবং তাই আসুন এই চেষ্টা.
বাডা বিং, এই তাকান.
উল্টানো বাটন এখন হবে রাষ্ট্র সামনে পিছনে সুইচ.
>> আপনি একটি যেখানে এবং তাই এখানে প্রতিক্রিয়া জাদু অল্প.
আমরা এটা কখনও বলা ভালো লেগেছে এটা পুনরায় রেন্ডার.
আমরা এটা কিছু আঁকুন বলেনি.
আপনি যদি এই করছেন প্রতিক্রিয়া ছাড়া, আপনি চাই
যখন চাচ্ছি পছন্দ করেছেন উল্টানো বাটন ক্লিক করা হয়,
আপনাকে এটা জানাতে চাই নিজে ঠিক আছে, পুনরায় রেন্ডার?
>> সত্যিই শীতল প্রতিক্রিয়া যে আপনি যদি এটি একটি নির্দিষ্ট রাষ্ট্র ও সম্পদ প্রত্যার্পণ কর,
এটা সবসময় রেন্ডার হবে সঠিক একই জিনিস.
এবং তাই আমরা কখনও আমরা পরিবর্তন হলে রাষ্ট্র ও বৈশিষ্ট্য,
প্রতিক্রিয়া মাত্র গোটা ব্যাপারটাই পুনরায় উপস্থাপনা.
এটা একটা আছে যে জানে এক-এক চিঠিপত্রের
রাষ্ট্র এবং পরামিতি এবং এইচটিএমএল মধ্যে.
সুতরাং যখনই যারা হয় একটি সেট রাষ্ট্র মাধ্যমে দ্বারা পরিবর্তন,
এটি পরিবর্তন করতে হবে কিভাবে বেতন পুনরায় অনুষ্ঠিত হয়.
তাই মূলত প্রতিক্রিয়া ভালো হয় আপনি পরিবর্তন করার জন্য অপেক্ষা.
>> যখনই এটা কিছু পরিবর্তন, এটা সম্পূর্ণ পৃষ্ঠা পুনরায় রেন্ডার করব.
আর এটা অদক্ষ শোনায়, এটা হতে হবে, কারণ এটা,
কিন্তু প্রতিক্রিয়া একটা জিনিস ব্যবহার একটি ছায়া বলা DOM.
পরিবর্তে সরাসরি পৃষ্ঠা আঁকার, এটা স্মৃতিতে ভার্চুয়াল এইচটিএমএল বৃক্ষ রাখে.
>> আপনি জানেন, এইচটিএমএল একটি গাছ ভালো হয়, একটি হায়ারারকিকাল ডাটা স্ট্রাকচার মত.
এটা মেমরির মধ্যে একটি জাল গাছ রাখে এবং আপনি পৃষ্ঠা আপডেট যখনই
এটা আরেকটা নকল আঁকব বৃক্ষ, এবং তা নিরূপণ করব
কি এটা করা প্রয়োজন পরিবর্তন পাতা দুটি গাছ সমান করতে.
তাই মূলত, এটা কার্যত অনেক পুনরায় উপস্থাপনা.
এবং তারপর এটি শুধুমাত্র মত পরিবর্তন সামান্য tweaks মধ্যে পৃষ্ঠা হিসাবে প্রয়োজন,
তাই এটা খুব, খুব, খুব কার্যকর.
>> তাই মূলত প্রতিক্রিয়া যখনই আপনি কিছু পরিবর্তন,
এটা পুনরায় রেন্ডার কার্যত পাতা পাবেন.
এটা আমি কি প্রয়োজন চিন্তা করব বাস্তব পাতা প্রতিফলিত করতে পরিবর্তন
ভার্চুয়াল পাতা, এবং এটা যে কি করব.
যে ভার্চুয়াল DOM এর.
এটা সবচেয়ে বড় এক বৈশিষ্ট্য প্রতিক্রিয়া.
>> যে জানার জন্য?
কোন প্রশ্ন?
হ্যা?
>> শ্রোতা: কীভাবে MVC এখনও তুলনা
আমরা স্বপ্ন যে মত সম্পদ আগে.
>> নীল মেহতা: হাঁ, প্রশ্ন এটা MVC তুলনা কিভাবে হয়?
আপনি সম্পদ সম্পর্কে জিজ্ঞেস করলাম.
ওয়েল, এর এটা ফাংশন সে বিষয়ে কথা বলুন.
>> MVC ইন, আপনি মডেল আপডেট চাই.
এই ক্ষেত্রে আমরা একটি কার্ড মডেল আছে চাই.
ভিউ হবে উল্টানো বাটন, এবং নিয়ন্ত্রণ
উল্টানো ফাংশন হবে.
তাই দেখুন জানিয়ে দেবে নিয়ন্ত্রক উল্টানো টুসকি.
ফ্লিপ জানিয়ে দেবে পরিবর্তন করার জন্য মডেল, ডান?
>> এবং যাতে আপনি একটি MVC আপনি, না হলে মডেল পরিবর্তন করার জন্য শুনতে,
এবং আপনি পুনরায় রেন্ডার অনুযায়ী ভিউ.
অথবা আপনি ঠিক মত আছে নিয়ন্ত্রক আছে.
তারপর মডেল পরিবর্তন হওয়া পর্যন্ত অপেক্ষা করুন, এবং বাছাই এবং একটি জিনিস ভালো একটি অংশ নিন
পরিবর্তন করতে.
এখানে আমরা এক জিনিস আছে, কিন্তু একটি বড় অ্যাপ্লিকেশন,
আপনি কি মনে করতে চান আছে প্রতি একক জায়গায় পরিবর্তন
তাই এটা একটু বিরক্তিকর.
আর এত সুন্দর হয় প্রতিক্রিয়া এটি একটি ছায়া ডোম আছে, কারণ.
এটা ঠিক সামর্থ সমগ্র জিনিস পুনর্লিখন.
আপনি বেছে করতে হবে না ভালো আপডেট কি অনুমান.
>> ফেসবুকে যদি আপনি চান MVC মধ্যে, একটি নতুন বার্তা পেতে,
আপনি, মনে রাখা চাই ঠিক আছে, যদি কিছু পরিবর্তন
উপরের পাতা, বার্তা আইকন.
এছাড়াও নীচে একটি নতুন উইন্ডো পপ.
এছাড়াও যে উইন্ডোতে একটি নতুন জিনিস করতে.
এছাড়াও একটি শব্দ খেলা.
>> যে জিনিস অনেক একই সময়ে নিগমন.
এবং যদি আপনি না, তাই যদি একটি ছায়া ডোম আছে, আপনি চাই
যে নিজে কারণ যা করতে হবে আপনি পুরো পাতা পরিত্রাণ পেতে পারে না.
আপনি সামর্থ্য না পারে, তাই আপনি ম্যানুয়ালি প্রতিটি জিনিস পরিবর্তন করতে,
যা MVC মধ্যে সত্যিই বিরক্তিকর.
>> তাই যাতে হতে মিতব্যয়ী, তারা বেছে বেছে
যা, পৃষ্ঠা আপডেট দক্ষ, কিন্তু বিরক্তিকর.
কারণ শ্যাডো এর প্রতিক্রিয়া ডোম, আপনি বিনামূল্যে জন্য উভয় জিনিষ পেতে.
এটা দক্ষ কারণ Shadow DOM এর.
বোতলের পৃষ্ঠায় আপডেট করা হয়.
এটা গাছের ম্যানিপুলেশন করছেন না.
আপনি দক্ষতা পেতে.
এছাড়াও আপনি পাবেন ব্যবহারের স্বাচ্ছন্দ, কারণ পেতে আপনি শুধু সমগ্র পাতা পুনর্লিখন তাহলে,
কিন্তু আপনি শুধু আছে, ঠিক আছে, কিছু জানি কোথাও পৃষ্ঠায় হতে যাচ্ছি.
এটি একটি ভিন্ন স্থানে হতে পারে, কিন্তু পারে এটা ঠিক আছে, পাতায় হতে যাচ্ছে?
তাই আপনি শুধু পুনরায় অনুষ্ঠিত সমগ্র জিনিস কার্যত,
এবং আপনি একটি দম্পতি করা হতে পারে পাতা নিজেই পরিবর্তন.
>> সুতরাং, আবার, MVC আপনি চয়ন করতে হবে
ব্যবহার এবং দক্ষতা কর্মের মধ্যে, এবং আপনি উভয় পেতে প্রতিক্রিয়া.
তাই এটা ভাল.
ধারণা তৈরী কর?
সলিড.
>> ঠিক আছে, তাই এর এর কথা বলা যাক দেখতে দিন ধাপ 4 সম্পর্কে অল্প,
কীভাবে আমরা উপাদান এম্বেড করতে পারেন.
তাই আমরা এখন এই অধিকার আছে.
আমরা আমাদের শীতল সামান্য বাটন আছে.
আমরা এটা ফিরে টুসকি পারেন এবং ঘোষণা, এবং যে এটা আছে সব.
আসুন আমরা করতে চান বলে অন্য কম্পোনেন্ট আছে.
আসুন আমাদের flashcard অ্যাপ্লিকেশন উচিত বলে চলুন শুরু করা যাক সব কার্ডের একটি তালিকা ধারণ
আপনি আছে, তাই যে আমরা মানে যে অন্য উপাদান থাকতে হবে.
ওয়েল, হয়তো একটি তালিকা দেখুন কল.
এর একটি তালিকা দেখুন করা যাক যে CardView সঙ্গে coexists,
এবং এই তালিকা দেখুন এবং CardView একসঙ্গে কাজ পছন্দ করবেন.
এবং যদি আপনি তাদেরকে একত্রিত করতে পারেন আপনার জন্য আমাদের অ্যাপ্লিকেশন করা.
>> সুতরাং প্রথম, এর একটি করতে দিন দম্পতি আরো কার্ড অধিকার.
চলুন শুরু করা যাক, কি কার্ড?
আর ঠিক তাই আমি করতে হবে না এটা টাইপ সঙ্গে আপনি বিঁধ,
আমি শুধু এখানে থেকে কপি করা যাচ্ছে না.
আর তাই আমি না করতে যাচ্ছি এটা শুধু একটা কার্ড দিতে.
আমি এটা কার্ডের একটি অ্যারের দিতে যাচ্ছি.
সুতরাং প্রথম এপস এখন জন্য বিরতি যাচ্ছে.
ঠিক আছে, তাই আমরা করতে যাচ্ছেন এই সক্ষম একাধিক কার্ড হ্যান্ডেল.
সুতরাং প্রথম, আমরা তা দিতে না চলুন শুধু একটা কার্ড কিন্তু কার্ডের একটি অ্যারের,
কার্ডের একটি তালিকা মত.
এবং এই ক্ষেত্রে, আমরা তাদের তিনটি আছে.
>> ঠিক আছে, অ্যাপ্লিকেশন তাই একটি তালিকা কার্ড পেতে যাচ্ছে,
এবং এটা সিদ্ধান্ত নিতে যাচ্ছে, যা এক CardView দেখানোর জন্য.
CardView পারেন শুধুমাত্র এক কার্ড, কিন্তু অ্যাপ্লিকেশন রেন্ডার
ঠিক আছে, সব কার্ডের একটি তালিকা পায়?
>> তাই আপনি এক চিন্তা যখন কার্ড, CardView দিতে
যদি আপনি সক্ষম হতে পারে আন্দাজ করা যাবে কিভাবে একটি সিদ্ধান্ত নেওয়ার জন্য যা কার্ড সম্পর্কে
দেখানো?
আপনি একটা ইংগিত দিতে, এটা সাময়িকভাবে এর আপনি একটি নির্দিষ্ট কার্ড দেখার হবে.
আপনি পৃষ্ঠাটি রিফ্রেশ, তাহলে আপনি শুধু ফিরে প্রথম কার্ড যান.
এটা সাময়িক, কারণ এটা ঠিক আছে.
আমরা কি টেকনিক ব্যবহার করতে পারে?
>> শ্রোতা: আপনি একটি পরিবর্তনশীল করতে পারে তাই আপনি সামনে ছিল শুধু চাই.
এই সত্য হয়, আপনি পারা বর্তমান কার্ড 1 সমান আছে?
>> নীল মেহতা: হ্যা, আমরা তাই ঠিক আছে, রাষ্ট্র আছে চান?
আপনি রাষ্ট্র ব্যবহার হবে কম্পোনেন্ট জিনিসটা
যা কার্ড আমরা পেতে চান না.
ভালো লেগেছে আমরা একটি তালিকা আছে সব কার্ড, আমরা করব
জিনিসটা রাষ্ট্র ব্যবহার প্রথম কার্ড এক,
তাই দ্বিতীয় কার্ড, তৃতীয় কার্ড, এবং.
>> সুতরাং একটি অ্যাপ্লিকেশন তাই একটি অ্যাপ্লিকেশন একটি পাবেন , getInitialState ফাংশন আছে
getInitialState ফাংশন প্রত্যাবর্তন.
আর আমরা শুধু activeIndex 0 বলবো.
তাই এখন আমাদের অ্যাপ্লিকেশন এটা নিজস্ব রাষ্ট্র আছে.
>> আর তাই এখন জিনিসটা, রেন্ডার একটি কার্ড, এর মাত্র অ্যারে যেতে দিন
এবং যে সূচিতে জিনিস দখল.
নির্বাচন কার্ড সমান this.props.cards this.state.activeIndex.
আপনি এখানে দেখতে, তাই হিসাবে props এবং রাষ্ট্র আসলে একসাথে কাজ.
তাই এখন আমরা আমাদের activeCard আছে, আমরা, এটা activeCard ডাকবো
এবং এই কাজ করে তাহলে দেখা যাক.
[শ্রবণাতীত]
>> ওহ, যে একটি টেক্সট ত্রুটি ছিল.
অই.
>> কুল, হাঁ, তাই এখন আমরা ফিরে ছিল আমরা আগে ছিল যেখানে, ডান?
ছাড়া একই বয়সী প্রোগ্রাম এখন আমরা সমর্থন করতে পারে না
কার্ডের একটি তালিকা, না শুধু একটা কার্ড.
এবং এখন, আবার যদি আমরা পরিবর্তন activeIndex, আমরা 1 0 থেকে যেতে পারেন
এবং এখন যে দ্বিতীয় কার্ড, এবং তারপর আমরা 0 গিয়েছিলাম.
তাই এখানে একটি নতুন souped আপ আমাদের সংস্করণ.
>> ঠিক আছে, তাই এখন এর একটি তালিকা দেখুন আছে যাক যে আপনার প্রোগ্রামে সব কার্ড দেখায়
তাই আমরা একটি নতুন করা হবে কম্পোনেন্ট ListView বলা.
Listview react.createClass সমান যাক.
সুতরাং আমরা একটি unordered রেন্ডার করতে চান প্রতিটি কার্ডের জন্য একটি আইটেম তালিকা সঙ্গে তালিকা.
আর তাই আমরা কার্ডের একটি গুচ্ছ আছে.
আমরা এক তালিকা আইটেমটি চান প্রতিটি কার্ডের জন্য, ডান?
আমরা লুপ জন্য একটি কাজ করতে পারে বা কিছু একটি নতুন তালিকা আইটেম করতে.
কিন্তু উপায় যে আপনি এটা করতে প্রতিক্রিয়া, মানচিত্র নামক একটি জিনিস ব্যবহার.
মানচিত্র একটি টুল অথবা আপনি ব্যবহার একটি ফাংশন যে প্রতিটি আইটেমের জন্য, কিছু ফাংশন সঞ্চালিত হয়,
ফিরতি মূল্য লাগে, এবং আপনি যে ফিরে দেয়.
>> একটি উদাহরণ হিসাবে, আমরা অ্যারে আছে তাই 1, 2, 3.map ফাংশন এবং এই
একটি সাঁটে লেখার জন্য হয় ফাংশন X তীর X বার এক্স.
এই প্রতিটি সংখ্যার জন্য, বলেছেন 1, 2, 3, সময় লাগবে.
এটি বর্গাকার, এবং তা ফেরত দিতে.
তাই আপনি যদি 1 কি মনে করেন, 2, 3.map এক্স এক্স বার যায়
X আপনাকে ফেরত দেওয়া দেয় এই ফাংশন যে
যে অ্যারের প্রতিটি উপাদান চালানো.
>> শ্রোতা: 1, 4 9?
>> নীল মেহতা: হাঁ, 1, 4, 9 আপনি 1 বার 1 না কারণ.
তার মানে আপনি এক দেয়.
যে প্রথম উপাদান.
>> 2 বার 2 4 হয়.
যে একটি দ্বিতীয় উপাদান.
3 বার 3 9.
তৃতীয় যে উপাদান.
ধারণা তৈরী কর?
তাই মানচিত্র একটি কৌশল আপনি আছে ফাংশানাল প্রোগ্রামারদের মধ্যে ব্যবহার,
নতুন শৈলী কিছু করতে প্রোগ্রামিং
আপনার তালিকার প্রতিটি উপাদান.
আর তাই এই ধ্বনি পরিচিত.
আমরা কার্ডের একটি তালিকা আছে.
আমরা ভাষার জন্য একটি আইটেম তালিকা পেতে চান এক, তাই আমরা ঠিক এখানে মানচিত্র ব্যবহার করব.
আমরা তালিকায় সমান যাক, বলবো this.props, কার্ড, মানচিত্র.
>> আর তাই আমরা করছি, একটি কার্ড দেওয়া একটি আইটেম তালিকা উৎপন্ন যাচ্ছে
এটা যে কার্ড এর বিষয়বস্তু প্রান্তের সঙ্গে.
এর ঠিক আমরা খুঁজে দিতে চান বলে কার্ড যাতে card.question প্রশ্নে.
তাই এই তালিকায় রয়েছে একটি লি এর বা তালিকা চলছে অ্যারে
যেখানে এক তালিকায় আছে প্রতিটি কার্ডের জন্য আইটেমটি,
এবং যে কার্ড প্রশ্ন রয়েছে.
ধারণা তৈরী কর?
>> কুল, তাই এখন আসুন আসলে যে প্রিন্ট আউট.
সুতরাং আমরা একটি উল আসতে হবে.
যে unordered তালিকা ভিতরে, আমরা শুধু সম্পূর্ণ তালিকা বিদ্ধ করব
তারা আমাদের দিয়েছেন.
কুল.
>> ঠিক আছে, তাই এখন এই তালিকা দেখুন শুধু এটি কাজ.
তালিকা দেখুন সম্পর্কে কোন প্রশ্ন?
আপনি কার্ডের একটি গুচ্ছ আছে.
আপনি প্রতিটি কার্ডের জন্য একটি আইটেম তালিকা করতে.
এবং যদি আপনি একটি unordered ভিতরে তাদের করা তালিকায়, এবং আপনি তা ফেরত দিতে.
তাই এখন আমি কি তাই আমরা এম্বেড কাজ দিন আমাদের অ্যাপ্লিকেশন এই ভিতরে,
তাই আমরা, তালিকা দেখুন এটা করতে পারেন.
কি যুক্তি আমরা ভিউ তালিকায় পাস না?
কি বৈশিষ্ট্য আমরা তা দিতে না?
আপনি দিতে পারেন, মনে রাখবেন এটা কার্ডের একটি গুচ্ছ,
এটা তালিকা করা হবে ঐ কার্ডের জন্য.
তাই আমরা কি পাস হবে এখানে যুক্তি হিসেবে?
শ্রোতা: কার্ডের একটি তালিকা?
নীল মেহতা: হ্যা, কার্ড তাই ঠিক আছে, this.props.cards সমান?
আর তাই একমাত্র সমস্যা যে আপনি শুধুমাত্র পারেন হয়
, রেন্ডার এক শীর্ষ স্তরের উপাদান পরিণত তাই আপনি একটি div তা মোড়ানো পেয়েছেন.
এটা অদ্ভুত.
সুতরাং আসুন যে কিনা দেখতে দিন.
যে কাজ করে?
>> হাঁ, ঠিক আছে.
তাই এখন আমরা একটি তালিকা আছে নীচে কার্ডের,
এবং তারপর আমরা আমাদের আছে উপরে নিজেই CardView,
এবং যে মধ্যে টুসকি হবে কার্ড দুটি পক্ষের.
এখন আমি যে কিভাবে যে অনুভূতি আছে?
হ্যাঁ, তাই আবার, আমরা দুটি উপাদান আছে.
প্রথম কম্পোনেন্ট প্রিন্ট আউট তালিকার প্রতিটি কার্ডের.
যে তালিকা দৃশ্যের.
আর দ্বিতীয় কম্পোনেন্ট শুধু যে কার্ড ছাপে আউট.
আপনি এটি একটি নির্দিষ্ট কার্ড দাও, তবে তা হবে যে কার্ড সম্পর্কিত তথ্য প্রিন্ট আউট
এবং আপনি পিছনে টুসকি যাক.
>> আমরা চাই, তাহলে আমরা চেষ্টা এবং বলতে পারেন তাই এই কিছু নতুন বৈশিষ্ট্য যোগ করা সম্পর্কে.
অন্যথায় আমরা একটি বিট আরো কথা বলতে পারেন চুল্লী বেগ সম্পর্কে,
অথবা আমরা উত্তর দিতে পারেন প্রশ্ন আপনি থাকতে পারে
কারণ এই কোর যন্ত্রাংশ সব হয় আমি কথা বলতে চাই যে প্রতিক্রিয়া.
আমরা এগিয়ে যেতে পারেন.
আমরা প্রশ্নের উত্তর দিতে পারেন.
তুমি যা চাও.
>> শ্রোতা: আপনি ব্যবহার করতে পারেন স্বাভাবিক জাভাস্ক্রিপ্ট মধ্যে JSX?
অথবা এমন কিছু বিষয় যা [শ্রবণাতীত] নিয়ে এসেছেন?
>> নীল মেহতা: প্রশ্ন করতে পারেন আপনি স্বাভাবিক জাভাস্ক্রিপ্ট সঙ্গে JSX ব্যবহার?
উত্তর হ্যাঁ হয়.
JSX শুধু এটা একটি উপায় আপনার লাগে এটি ভেতরে এইচটিএমএল আছে দয়া করে জাভাস্ক্রিপ্ট,
এবং এটা দয়া করে জাভাস্ক্রিপ্ট মধ্যে প্রনয়ন এটি ভেতরে এইচটিএমএল নেই.
সুতরাং তাই এখানে লক্ষ্য করা কিন্তু যে লক্ষ্য.
আপনি DIV মত আছে মত এই দেখায় এবং আপনি এটি ভেতরে কাপড় আছে.
>> যে দয়া করে জাভাস্ক্রিপ্ট করতে প্রনয়ন মত একই জিনিস তৈরি করে.
আমি আমি যা বলছি তা যে অনুমান এটা মত JSX, শুধু একটি অন্বিত হয়
জাভাস্ক্রিপ্ট একটি preprocessor এবং অনেক পিএইচপি মত এইচটিএমএল জন্য এর preprocessor হয়.
জেএসসি একটি preprocessor হয় জাভাস্ক্রিপ্ট জন্য যে দেয়
আপনি আপনার দয়া করে জাভাস্ক্রিপ্ট ভেতরে এইচটিএমএল করা.
এবং যাতে আপনি সঠিক ট্রান্সফরমার আছে যা [শ্রবণাতীত] নামক একটি জিনিস,
যা রূপান্তরিত হবে.
ডান এর preprocessor, এটা আপনি যে কি জানাবো.
>> শ্রোতা: [শ্রবণাতীত]
নীল মেহতা: সাধারণত আপনি প্রয়োজন হবে না জাভাস্ক্রিপ্ট এর ভিতরে এইচটিএমএল করা
আপনার পক্ষ থেকে আপত্তিকর তবে প্রতিক্রিয়া.
কিন্তু আপনি যাহাই হউক না কেন এটা করতে পারেন.
হাঁ?
>> শ্রোতা: আমি আপনি কি মনে করেন প্রতিক্রিয়া বর্ণনা করেছে
একটি কার্যকরী প্রোগ্রামিংয়ের ভাষা হিসেবে.
আমরা CS50 মধ্যে সি শেখার করে থাকেন.
সি একটি কার্যকরী ভাষা কি?
নীল মেহতা: তাই প্রশ্ন ফাংশানাল সম্পর্কে
নামক আরেকটি জিনিস বনাম অনুজ্ঞাসূচক বা পদ্ধতিগত প্রোগ্রামিং.
জনপ্রিয় প্রোগ্রাম দুই ধরণের আছে.
এক, পদ্ধতিগত বলা হচ্ছে যা সব করছেন কমান্ডের মত সম্পর্কে
এবং এক যা সব হয়, কার্যকরী ফাংশন হচ্ছে এবং থাকার সম্পর্কে
ইনপুট এবং যারা আউটপুট.
প্রতিক্রিয়া একটি কার্যকরী দৃষ্টান্ত.
সি একটি খুব পদ্ধতিগত দৃষ্টান্ত.
>> এবং একটি উদাহরণ হিসাবে, উদাহরণস্বরূপ সি, আপনি এই ঘোষণামূলক উপায় কি না
প্রোগ্রাম তৈরীর, ডান?
আপনার কী বলার আছে, এই প্রিন্ট করা হবে.
এই তথ্য কাঠামো পরিবর্তন.
এই মুদ্রণ.
এটা সব কমান্ড সম্বন্ধে.
>> প্রতিক্রিয়া ইন, সেখানে না যে অনেক কমান্ড.
এটা হচ্ছে সব বিষয়ে উপাদান আপনি একত্রে.
তারা ফাংশন ভালো আছেন.
আপনি একটি ফাংশন মত আছে CardView বলা,
একটি ফাংশন যা যে, ইনপুট, আউটপুট আছে
এবং তাই প্রতিক্রিয়া সব হয় এই দর্শনের সম্পর্কে
আপনি তথ্য আছে having-- আমাদের.
বাটনটিতে ক্লিক করে এটি পাস অ্যালগরিদম, এবং এটা করব
আউটপুট এইচটিএমএল যে আপনি শুধু পাতা মুদ্রিত,
এবং তাই আপনাকে করতে হবে এটা টুকরা টুকরা দ্বারা নির্মাণ.
>> সুতরাং একটি রূপক আঁকা কি আমি আগে বলেন, আপনি কিভাবে জানেন
ফেসবুকে আপনি একটি বার্তা পান এবং আপনি আপডেট করতে কি অংশ নির্বাচন,
যে পদ্ধতিগত এর.
এটা ঠিক আছে, অনুজ্ঞাসূচক?
ঠিক আছে, আমি একটি বার্তা পেয়েছিলাম.
এর আছে একটি অ্যাকাউন্ট পরিবর্তন করা যাক.
>> এখানে একটা উইন্ডো পপ যাক.
এর আছে একটি অ্যাকাউন্ট পরিবর্তন করা যাক.
আসুন এখানে এই আঁকি.
একটি পদ্ধতিগত প্রয়াস.
>> যে, কৌণিক মত কি জিনিস বুস্ট, দাঁড়া, অন্যান্য অবকাঠামো ব্যবহার.
প্রতিক্রিয়া কার্যকরী হয়.
এটি একটি ভিন্ন উপায় এর জিনিস সম্পর্কে চিন্তা.
এটা আছে যাক এই ধারণা নেয় ফাংশন বা যে আপনি আলগোরিদিম
এটি তথ্য দিতে.
এটি থুতু করব কি এটা কম্পিউটার হতে, এবং উচিত
আউট ওজনের যত্ন নিতে হবে.
আপনি এটা নিজে হ্যান্ডেল না.
যে অর্থে একটি সামান্য বিট করতে হবে?
হ্যা?
>> শ্রোতা: একটি কার্যকরী ভাষা ইন, সবকিছু একযোগে ঘটবে?
>> নীল মেহতা থে, কিছু যাতে ঘটতে.
এখানে এখনো আছে অর্ডার, কিন্তু এটা না
মত অনুযায়ী ঘটতে , কমান্ড, কমান্ড প্রশংসা.
এটা যাতে ঘটবে ফাংশন আপনি আউটপুট দেয়.
আরেকটি ফাংশন পুরা.
অন্য পুরা ফাংশন, আরেকটি ফাংশন.
>> আপনি CS51 না, তাহলে আপনি ফাংশানাল প্রোগ্রাম শিখতে
এই সুযোগ নিয়ে একটু দূরে.
কিন্তু মূলত, কি করে তোলে প্রতিক্রিয়া শীতল না শুধুমাত্র হয়
একমুখী তথ্য প্রবাহ এবং ভার্চুয়াল ডোম,
কিন্তু এছাড়াও এই ধারণা ফাংশানাল প্রোগ্রামিং.
এবং কার্যকরী প্রোগ্রামিং খুব সহজ রচনা ও বাইরে শীতল স্টাফ করা,
এবং এটা মনে করা খুবই সহজ সম্পর্কে এবং কারণ.
তাই প্রতিক্রিয়া আরেকটি ভাল ড্র.
আর কোন প্রশ্ন?
হ্যা?
>> শ্রোতা: উম, আপনি কেন হবে Var উল্টোদিকে দিন ব্যবহার?
>> নীল মেহতা: তাই প্রশ্ন হল কেন আপনি পরিবর্তে Var এর দিন ব্যবহার করবেন?
এই নামে একটি জিনিস ES6 বা ECMAScript 6.
এটা দয়া করে জাভাস্ক্রিপ্ট এর নতুন সংস্করণ.
প্রযুক্তিগত কারণের একটি গুচ্ছ আছে, কিন্তু ধরা যাক Var একটি ভাল সংস্করণ.
>> আপনি ভেরিয়েবল ডিক্লেয়ার কিভাবে এটা.
আপনি দিন ব্যবহার করতে পারেন.
আপনি Var ব্যবহার করতে পারেন.
চলুন শুরু করা যাক প্রযুক্তিগত একটি গুচ্ছ আছে আপনি তাদের চেহারা পারেন reasons--
এটা ভাল কেন জন্য later-- আপ.
মূলত, ES6 কিছু চমৎকার হয়েছে নতুন বাক্য গঠন, কিছু নতুন বৈশিষ্ট্য
পুরানো জাভাস্ক্রিপ্ট উপরে.
>> তাই আমরা পাঁচ মিনিট মত আছে.
আমি শুধু আমার সাথে কথা বলতে চেয়েছিলেন আরও একটি জিনিস বাস্তব দ্রুত.
যদি আপনার কোন প্রশ্ন ছিল, এর এই পরে এটি সম্পর্কে কথা বলা যাক.
কিন্তু শুধু তাই এই পায় ক্যামেরা ধরা, আমি শুধু
আপনি কিভাবে সম্পর্কে একটু কথা বলতে চাই আসলে আপনার Apps প্রতিক্রিয়া ব্যবহার.
>> আপনি এখানে যান, Facebook.GitHub.IO/react,
এই প্রতিক্রিয়া জন্য হোম পেজে, এবং এটা আসলে আপনি ব্যবহার কিভাবে আপনি দেখাব
আপনার পেজ প্রতিক্রিয়া জানাতে পারে.
মূলত, এটি একটি সামান্য জটিল প্রতিক্রিয়া ইনস্টল করার চেষ্টা করুন.
আপনি শুধু ড্র্যাগ হিসাবে হিসাবে সহজ নয় এবং সেখানে একটি জাভাস্ক্রিপ্ট ড্রপ.
>> আপনি আপনার ট্রান্সফরমার আছে পূর্বের মত, যা হবে সেট আপ,
আপনার JSX চালু স্বাভাবিক জাভাস্ক্রিপ্ট.
আপনি যে পাবেন জিনিস আছে আপনি স্বাভাবিক ES6 সঙ্কলন.
জাভাস্ক্রিপ্ট চলন্ত অনেক আছে যন্ত্রাংশ আপনাকে যা করতে হবে, যাতে একটি জিনিস আছে
ইঔম্যান্, Yeoman.io বলা.
আর এই একটি কমান্ড লাইন টুল যে করব আপনি আপনার প্রতিক্রিয়া আউট ভারা সাহায্য
সহজেই প্রকল্প.
>> তাই আপনি যদি এই বিষয়ে পড়তে পারেন পরে, কিন্তু কিছু সরঞ্জাম আছে
ইঔম্যান্ প্রস্তাব.
তারা একটি প্রতিক্রিয়া আপনি তৈরি করতে দেব অন্তর্গঠিত সবকিছু সঙ্গে অ্যাপ্লিকেশন.
এটি নির্মিত হয়েছে করব উপাদান, ইন বিল্ট.
এটা আপনার ট্রান্সফরমার সালে নির্মিত হবে.
তারা শীতল অনেক আছে স্টাফ স্বয়ংক্রিয়ভাবে সালে নির্মিত
জেনারেটর নামক এই জিনিস ব্যবহার করে.
>> যদি আপনি চান তাই এই বিষয়ে পড়তে.
শুধু ইঔম্যান্, ওয়াই-ই-হে-এম-একটি-এন, ও যেতে আপনি এই মত জেনারেটর খুঁজে পেতে পারেন.
আর ভালো জেনারেটর সঙ্গে এই, আপনি ঠিক মত এক
কয়েক কমান্ড লাইন কমান্ড হয়.
এটি একটি আউট ভারা করব সমগ্র আপনার জন্য অ্যাপ্লিকেশন প্রতিক্রিয়া.
এটা সব ম্যানুয়াল বংশীধ্বনিতুল্য পাবেন, এবং ঘোঁৎ ঘোঁৎ কাজ, আপনার জন্য কাজ
এবং এই সময় আপনি শুধু ফোকাস কেন শুধু লেখা বিক্রিয়া.
>> তাই মূলত নির্মাণের একটি অ্যাপ্লিকেশন nontrivial প্রতিক্রিয়া জানায়.
এটা সব একসঙ্গে তারযুক্ত, কিন্তু ওখানে আপনার জন্য এটা করব যে সরঞ্জাম.
আপনি করতে চান তাহলে একটি প্রতিক্রিয়া তাই অ্যাপ্লিকেশন, এটা যে ভাবে করছেন চেষ্টা.
আপনি শুধু পরীক্ষা করতে চান তাহলে, আপনি এই CodePen চেষ্টা করে দেখতে পারেন
এই CodePen আছে, কারণ সব তারের প্রতিক্রিয়া.
আমি আপনার জন্য ইতিমধ্যে সব কাজ সম্পন্ন করেছি.
>> আপনি একটি ভালো করতে চান তাহলে উৎপাদন অ্যাপ্লিকেশন প্রতিক্রিয়া মুক্তি,
এই জেনারেটর এক চেষ্টা.
আপনি শুধু খেলতে চান কাছাকাছি, এটা প্রায়ই শুধু মূল্য
মত এখানে CodePen কাছাকাছি খেলার চেষ্টা করুন.
ভালো শুনাচ্ছে?
কুল.
>> সুতরাং যে আমি সব আছে.
আবার, সব কোড এবং উদাহরণ আছে এখানে এই ওয়েবসাইটে হতে যাচ্ছে.
সুতরাং, আবার, আমরা কথা বলতে পারে না সম্পর্কে প্রতিক্রিয়া অনেক বাক্য গঠন,
কিন্তু ঐ সমস্ত অনুসন্ধান করার একটু সিনট্যাক্স বিবরণ,
এটা সমস্ত উপলব্ধ হতে যাচ্ছে এখানে এই ওয়েবসাইটে.
>> তাই আমি ভালো বলতে চাই প্রথম পদক্ষেপ গ্রহণ করা.
আপনার CodePen মধ্যে রাখুন.
তৈরীর কাজ কর এটা দ্বিতীয় ধাপে.
এখন পর্যন্ত একটি চতুর্থ ধাপে, এবং শুধু আপনি যে থেকে পেতে যেখানে দেখতে.
>> কোন প্রশ্ন, পরীক্ষা অথবা যে পাতা খুঁজে আমাকে ইমেইল করুন.
যে আমার ইমেইল এর.
কিন্তু আমি কোনো সঙ্গে আপনি সাহায্য করতে ভালোবাসতাম আপনার সম্পর্কে থাকতে পারে প্রশ্ন প্রতিক্রিয়া.
সুতরাং, হাঁ, যে আমি সব আছে.
অনেক জন্য আপনি সমস্ত ধন্যবাদ পর্যবেক্ষক বা দোসর জন্য.
এবং আমি কোন প্রশ্ন নেব আপনি এখন এই পরে থাকতে পারে.
তাই দেখার জন্য আপনি সমস্ত ধন্যবাদ.