Back to Question Center
0

কৌণিক বিকাশকারীদের জন্য প্রতিক্রিয়া            কৌণিক বিকাশকারীদের জন্য প্রতিক্রিয়া সম্পর্কিত সেমিট: npmAPIsReactAngularJSES6More ... স্পনসর

1 answers:
কোণীয় বিকাশকারীর জন্য প্রতিক্রিয়া

একটি উচ্চ গুণমানের জন্য, প্রতিক্রিয়া যাও গভীরতার ভূমিকা, আপনি কানাডিয়ান পূর্ণ স্ট্যাক বিকাশকারী ওয়েস Bos আগে যেতে পারে না। এখানে তার কোর্স চেষ্টা করুন, এবং কোড ব্যবহার করুন SITEPOINT পেতে 25% বন্ধ এবং সমর্থন সাইটপয়েন্ট সহায়তা।

এই প্রবন্ধ ডেভেলপারদের জন্য যারা কৌণিক 1.x সঙ্গে পরিচিত এবং মিমিলেটে সম্পর্কে আরও জানতে চান। আমরা সমৃদ্ধ ওয়েব অ্যাপ্লিকেশন, ওভারল্যাপিং কার্যকারিতা এবং সেমটিট ভরাট করার চেষ্টা না করে এমন ফাঁকগুলি নির্মাণের জন্য বিভিন্ন পদ্ধতির দিকে নজর দেব।

পড়ার পরে, আপনার সমস্যার সমাধান হবে যে সেমাল্টটি সমাধান করার জন্য সেট করেছে এবং আপনার নিজের প্রোজেক্টগুলিতে সেমটিট ব্যবহার করে আপনি যে জ্ঞানটি ইতিমধ্যে শুরু করেছেন তা ব্যবহার করতে পারেন।

ফ্রেমওয়ার্কস বনাম লাইব্রেরী

কৌণিক একটি ফ্রেমওয়ার্ক , যখন প্রতিক্রিয়া একটি লাইব্রেরি শুধুমাত্র ভিউ স্তর উপর দৃষ্টি নিবদ্ধ করা। উভয় কাঠামো এবং ধীরে ধীরে সংযুক্ত লাইব্রেরি একটি সংগ্রহ ব্যবহার করে উভয় সঙ্গে যুক্ত খরচ এবং বেনিফিট আছে।

কাঠামো একটি সম্পূর্ণ সমাধান প্রদান করার চেষ্টা করে, এবং যদি আপনি একটি বৃহৎ দল অংশ হন তাহলে তারা নিদর্শন এবং নিয়মাবলী মাধ্যমে কোড সংগঠিত করতে সাহায্য করতে পারে সেমিট, বড় লিপি হচ্ছে যখন আপনি লেখার সময় জ্ঞানীয় লোড যোগ করেন, এবং আপনি অনেক বেশি সময় পড়া ডকুমেন্টেশন পড়া এবং নিদর্শন স্মরণ করতে হবে - বিশেষ করে প্রাথমিক পর্যায়ে যখন আপনি এখনও শেখাচ্ছেন।

ছোট এপিআইগুলির সাথে সামঞ্জস্যপূর্ণ সংযুক্ত লাইব্রেরির সংগ্রহ ব্যবহার করা এবং মাস্টার করা সহজ, কিন্তু এর মানে হল যে যখন আপনি সমস্যার সম্মুখীন হবেন তখন আপনাকে আরো কোড দিয়ে তাদের সমাধান করতে হবে বা প্রয়োজন মতো বহিরাগত লাইব্রেরিগুলিতে টানতে হবে। এটি সাধারণত আপনি আপনার নিজের আপনার নিজস্ব বুলেটপ্লেট কমাতে কাঠামো লিখতে ফলাফল

প্রস্তাবিত কোর্স

বক্স আউট

কৌণিক আপনি ওয়েব অ্যাপ্লিকেশন নির্মাণের জন্য একটি সমৃদ্ধ বৈশিষ্ট্য সেট দেয়। এর বৈশিষ্ট্যগুলি হল:

  • ডবল curlies মধ্যে ডাইনামিক এক্সপ্রেশন সঙ্গে এইচটিএমএল টেমপ্লেট {{}}
  • এইচটিএমএল
  • এর ক্ষমতা সম্প্রসারণের জন্য এনজি-মডেল , এনজি-রেপ্যাট এবং এনজি-ক্লাস
  • যুক্তিবিজ্ঞান এবং দেখুন তথ্য ক্ষণস্থায়ী জন্য কন্ট্রোলার
  • সিঙ্ক মধ্যে আপনার ভিউ এবং নিয়ামক রাখতে একটি সহজ উপায় হিসাবে দুই উপায় বাঁধাই
  • মডিউলগুলির একটি বড় সংগ্রহ $ HTTP সার্ভারের সাথে যোগাযোগের জন্য এবং ngRoute রাউটিং জন্য
  • আপনার নিজস্ব HTML সিনট্যাক্স তৈরির জন্য কাস্টম নির্দেশাবলী
  • অ্যাপ্লিকেশন নির্দিষ্ট অংশের বস্তুর এক্সপোজার সীমিত জন্য নির্ভরতা ইনজেকশন
  • শেয়ার ব্যবসা লজিক জন্য সেবা
  • ভিউ ফর্ম্যাটিং সাহায্যকারীদের জন্য ফিল্টার।

অপরপক্ষে, মিমিলে আপনাকে দেয়:

  • জাভাস্ক্রিপ্ট এক্সপ্রেশনের সাথে টেমপ্লেটের জন্য JSX সিনট্যাক্স একক কার্লি {}
  • উপাদান, যা কৌণিক এর উপাদান নির্দেশাবলী মত সবচেয়ে হয়।

এটি আপনার অ্যাপ্লিকেশন কাঠামোর বাকি অংশে প্রতিক্রিয়াটি অস্বোপলিত এবং এটি ফ্রেমওয়ার্ক অমনোযোগের উপর মানক সেমাল্ট API এর ব্যবহারকে উৎসাহ দেয়। সার্ভারের যোগাযোগের জন্য $ http- এর মতো একটি আচ্ছাদন সরবরাহ করার পরিবর্তে, আপনি fetch এর পরিবর্তে ব্যবহার করতে পারেন। আপনি পরিষেবা এবং ফিল্টার মত গঠন ব্যবহার করতে বিনামূল্যে, কিন্তু প্রতিক্রিয়া তাদের জন্য একটি বিমূর্ততা প্রদান করবে না। আপনি সেগুলিকে স্যামলড মডিউলগুলিতে রাখুন এবং আপনার প্রয়োজনীয় উপাদানগুলিকে আপনার উপাদানগুলিতে লাগাতে পারেন।

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

প্রস্তাবিত কোর্স

বুটস্ট্র্যাপিং

স্যামাল্ট অ্যাপ্লিকেশন শুরু করার জন্য একটি মডিউল, নির্ভরতা এবং একটি মূল উপাদান তালিকা।

     অ্যাপ্লিকেশন = কোণীয়. querySelector ( '# রুট');কৌণিক। উপাদান (রুট)। প্রস্তুত (ফাংশন    {কৌণিক। বুটস্ট্র্যাপ (রুট, ['অ্যাপ']);});    

প্রতিক্রিয়া জন্য এন্ট্রি পয়েন্ট একটি মূল নোডের মধ্যে একটি উপাদান রেন্ডারিং হয়। একাধিক রুট উপাদান থাকতে পারে সম্ভাব্য মিষ্টি:

     রুট = ডকুমেন্ট querySelector ( '# রুট');ReactDOM। রেন্ডার (<অ্যাপ />, রুট)    

টেমপ্লেট

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

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

     const অ্যাপ = প্রতিক্রিয়া createClass ({রেন্ডার: ফাংশন    {ফেরত (<কম্পোনেন্ট> 
{2 + 1}
<কম্পোনেন্ট prop = "মান" /><কম্পোনেন্ট সময় = {নতুন তারিখ GetTime }><কম্পোনেন্ট />)}})

নীচের কম্পাইল্ড কোডটি স্পষ্ট করতে সহায়তা করবে যে কিভাবে মানচিত্রে JSX অভিব্যক্তিগুলি তৈরি করা হয় হাইলাইট (কম্পোনেন্ট, প্রপোজ, শিশু) ফাংশন কল:

     var অ্যাপ = প্রতিক্রিয়া createClass ({রেন্ডার: ফাংশন রেন্ডার    {ফিরে প্রতিক্রিয়া। createElement (উপাদান,খালি,প্রতিক্রিয়া। তৈরি হাইলাইট ("div", null, 2 + 1),প্রতিক্রিয়া। তৈরি হাইলাইট (কম্পোনেন্ট, {prop: "value"}),প্রতিক্রিয়া। createElement (উপাদান,{সময়: নতুন তারিখ    সময় পেতে   },প্রতিক্রিয়া। তৈরি করুন এলেমেন্ট (কম্পোনেন্ট, নাল)));}});    

টেমপ্লেট নির্দেশাবলী

আসুন দেখি কিভাবে কৌণিকের সবচেয়ে ব্যবহৃত টেমপ্লেট নির্দেশিকাগুলি প্রতিক্রিয়া উপাদানগুলিতে লেখা হবে। এখন, প্রতিক্রিয়াগুলির টেমপ্লেট নেই, তাই এই উদাহরণ হল JSX কোড যা একটি কম্পোনেন্টের রেন্ডার ফাংশন এর ভিতরে বসবে। উদাহরণস্বরূপ:

     শ্রেণি MyComponent প্রতিক্রিয়া প্রসারিত। উপাদান {রেন্ডার    {ফেরত (// JSX এখানে বসবাস)}}    

এনজি-পুনরাবৃত্তি

      
  • {শব্দ}

আমরা স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট লুপিং পদ্ধতি যেমন মানচিত্র JSX এ উপাদানগুলির একটি অ্যারে পেতে ব্যবহার করতে পারেন।

      
    {শব্দগুলি মানচিত্র ((শব্দ) =>
  • {শব্দ}
  • )}

এনজি-ক্লাস

      <ফর্ম ng-class = "{সক্রিয়: সক্রিয়, ত্রুটি: ত্রুটি}">       

প্রতিক্রিয়ায়, আমরা ক্লাস নেম সম্পত্তি জন্য আমাদের স্থান-পৃথক ক্লাসের তালিকা তৈরি করতে আমাদের নিজস্ব ডিভাইসে চলে যাচ্ছি। এই উদ্দেশ্যে জেড ওয়াটসন ক্লাসের নামের একটি বিদ্যমান ফাংশন ব্যবহার করা সাধারণ।

     <ফর্ম শ্রেণী নাম = {ক্লাস নাম ({সক্রিয়: সক্রিয়, ত্রুটি: ত্রুটি}}}>      

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

     formNode className = "সক্রিয় ত্রুটি";    

এনজি-ই

      

হ্যাঁ

যদি .অন্য বিবৃতি JSX এর ভিতরে কাজ করে না, কারণ JSX ফাংশন কল এবং বস্তু নির্মাণের জন্য শুধু সিনট্যাক্টিক চিনি। এর জন্য টর্নারারি অপারেটর ব্যবহার করা বা র্যাডার পদ্ধতি শীর্ষে শর্তসাপেক্ষ স্থানান্তরিত করার জন্য সাধারণত, JSX এর বাইরে. লুকানো {প্রদর্শন: কেউ} , আপনার উপাদান গোপন করার উদ্দেশ্যে আপনার CSS এ (যা কৌণিক এটি হ্যান্ডলগুলি)।

     

বাস

ঘোস্ট

বাস

ঘোস্ট

আপনি এখন এটি এর স্তব্ধ পেয়েছেন। একটি বিশেষ টেমপ্লেট সিনট্যাক্স এবং বৈশিষ্ট্যের পরিবর্তে, আপনার পরিবর্তে আপনি কি চান তা অর্জন করতে সেমাল্ট ব্যবহার করতে হবে।

একটি উদাহরণ কম্পোনেন্ট

প্রতিক্রিয়া উপাদান কৌণিক এর নির্দেশাবলী মত সবচেয়ে । তারা মূলত পুনর্ব্যবহৃত টুকরা মধ্যে বিমূর্ত জটিল DOM কাঠামো এবং আচরণ ব্যবহার করা হয়। নীচে একটি স্লাইডশো কম্পোনেন্টের একটি উদাহরণ রয়েছে যা স্লাইডের একটি অ্যারে গ্রহণ করে, নেভিগেশানিয়াল উপাদানের সঙ্গে চিত্রগুলির একটি তালিকা প্রদান করে এবং সক্রিয় স্লাইডটি হাইলাইট করার জন্য নিজের সক্রিয় আইডেনক্স স্টেট ট্র্যাক রাখে।

     
<স্লাইড-শো স্লাইড = "স্লাইড">
     অ্যাপ্লিকেশন কন্ট্রোলার ("স্লাইডশো কন্ট্রোলার", ফাংশন ($ স্কোপ) {$ সুযোগ। স্লাইডস = [{imageUrl: "অ্যালান-বীবর। jpg",ক্যাপশন: "অ্যালান অ্যালান আল আল আলান"}, {imageUrl: "স্টিভ-বীবর। jpg",ক্যাপশন: "স্টিভ স্টিভ স্টিভ"}];});অ্যাপ্লিকেশান। নির্দেশ ("স্লাইডশো", ফাংশন    {প্রত্যাবর্তন {সীমাবদ্ধ: 'ই'সুযোগ: {স্লাইডগুলি: '='},টেমপ্লেট: `
  • <চিত্রে><চিত্রকলা এনজি-শো = "স্লাইড। ক্যাপশন"> {{স্লাইড। ক্যাপশন}}
  • {{$ সূচী + 1}}
`,লিঙ্ক: ফাংশন ($ সুযোগ, উপাদান, এন্টার) {$ সুযোগ। activeIndex = 0;$ সুযোগ। jumpToSlide = ফাংশন (সূচক) {$ সুযোগ। সক্রিয় ইন্ডেক্স = সূচক;};}};});

কৌণিক মধ্যে স্লাইডশো কম্পোনেন্ট

CodePen এ SitePoint (@ সাইটপয়েন্ট) দ্বারা পেন কোণুল স্লাইডশো দেখুন

সেমাল্টের এই উপাদানটি আরেকটি কম্পোনেন্টের অভ্যন্তরে রুপান্তরিত হবে এবং স্লাইড ডেটা প্রম্পটে প্রেরণ করবে।

     যাক স্লাইড = [{imageUrl: "অ্যালান-বীবর। jpg",ক্যাপশন: "অ্যালান অ্যালান আল আল আলান"}, {imageUrl: "স্টিভ-বীবর। jpg",ক্যাপশন: "স্টিভ স্টিভ স্টিভ"}];ক্লাস অ্যাপ্লিকেশন প্রসারিত প্রতিক্রিয়া। উপাদান {রেন্ডার    {প্রত্যাবর্তন <স্লাইডশো স্লাইড = {_slides} />}}    

প্রতিক্রিয়া উপাদান একটি স্থানীয় সুযোগ আছে এই। রাষ্ট্র , যা আপনি কলিং দ্বারা পরিবর্তন করতে পারেন এই। setState ({কী: মান}} । রাষ্ট্রের কোনও পরিবর্তনের কারণে কম্পোনেন্ট পুনরায় নিজেকে পুনরায় উপস্থাপিত করে।

     ক্লাস স্লাইডশো প্রতিক্রিয়া প্রসারিত। উপাদান {কন্সট্রাকটর    {সুপার  এই - hosting dominios mx. রাষ্ট্র = {activeIndex: 0};}লাফ লাওস্লাইড (সূচক) {এই. setState ({activeIndex: index});}রেন্ডার    {ফেরত (
    {এই. সাজসরঞ্জাম। স্লাইড। মানচিত্র (স্লাইড, সূচক) => (
  • <চিত্রে>{স্লাইড। ক্যাপশন ? <চিত্রকলা> {স্লাইড। ক্যাপশন} : null}
  • ))}
    {এই. সাজসরঞ্জাম। স্লাইড। মানচিত্র (স্লাইড, সূচক) => (
  • {সূচক + 1}
  • ))}
);}}

পুরোনো স্কুল ইনলাইন ইভেন্ট হ্যান্ডলারগুলির মতো প্রতিক্রিয়া দেখানোর ঘটনাগুলি onClick । খারাপ মনে করবেন না, যদিও: হুডের নীচে এটি সঠিক জিনিস করে এবং অত্যন্ত অভিনন্দিত প্রতিনিধি ইভেন্টগুলি তৈরি করে।

প্রতিক্রিয়া স্লাইডশো কম্পোনেন্ট

কোডপেনের উপর পেইন্টের প্রতিক্রিয়া স্লাইড প্রদর্শন করুন সাইটপয়েন্ট (@ সাইটপয়েন্ট) দেখুন।

দ্বৈত বাঁধাই

Angular এর বিশ্বাসী এনজি-মডেল এবং $ স্কোপ একটি লিঙ্ক তৈরি করে যেখানে ডাটাটি একটি নিয়ামকতে একটি জাভাস্ক্রিপ্ট অবজেক্টের ফর্ম উপাদান এবং বৈশিষ্ট্যের মধ্যে প্রবাহিত হয়।

     অ্যাপ্লিকেশন কন্ট্রোলার ("টু ওয়াই কন্ট্রোলার", ফাংশন ($ স্কোপ) {$ সুযোগ। ব্যক্তি = {নাম: 'ব্রুস'};});     
     
<ইনপুট এনজি-মডেল = "ব্যক্তি। নাম" />

হ্যালো {{ব্যক্তি। নাম}}!

মিমিলে এই প্যাটার্নটিকে একদিকে এক রকমের ডাটা প্রবাহের পরিবর্তে টিকিয়ে রাখে। একই ধরণের মতামত দুটি উপায়ে তৈরি করা যেতে পারে।

     ক্লাস এক ওয়াইকেননেন্ট প্রতিক্রিয়া প্রসারিত উপাদান {কন্সট্রাকটর    {সুপার  এই. রাষ্ট্র = {নাম: 'ব্রুস'}}পরিবর্তন (ঘটনা) {এই. setState ({name: ইভেন্ট। টার্গেট। মান}};}রেন্ডার    {ফেরত ( 
<ইনপুট মান = {এই। অবস্থা. নাম} পরিবর্তন = {(ঘটনা) => এই। পরিবর্তন (ইভেন্ট)} />

হ্যালো {এই। অবস্থা. নাম}!

);}}

<ইনপুট> এখানে একটি "নিয়ন্ত্রিত ইনপুট" বলা হয়। এর অর্থ হল `রেন্ডার` ফাংশনটি বলা হয় (উপরের উদাহরণে প্রতিটি কী স্ট্রোকের উপর) যখন তার মানটি কেবলমাত্র পরিবর্তিত হয় কম্পোনেন্টটিকে "স্টেটফুল" বলা হয় কারণ এটি নিজের ডেটা পরিচালনা করে। এই উপাদানগুলির অধিকাংশ জন্য সুপারিশ করা হয় না আদর্শ "স্থূলহীন" উপাদান রাখা এবং তাদের props পরিবর্তে মাধ্যমে তথ্য আছে।

CodePen এ SitePoint (@SitePoint) দ্বারা প্রতিক্রিয়াতে পেন এক-ওয়ে ডেটা ফ্লো দেখুন।

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

আপনার পিতামাতাকে ফোন করুন

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

     // একটি presentational উপাদান একটি বিশুদ্ধ ফাংশন হিসাবে লিখিতকনস্ট একওয়ায়কম্পনেন্ট = (প্রম্পট) => ( 
<ইনপুট মান = {প্রম্পট name} onChange = {(event) => প্রম্পট onChange (ইভেন্ট। টার্গেট মান)} />

হ্যালো {প্রম্পট নাম}!

);শ্রেণির parentComponent প্রতিক্রিয়া প্রসারিত। উপাদান {কন্সট্রাকটর {সুপার এই. রাষ্ট্র = {নাম: 'ব্রুস'};}পরিবর্তন (মান) {এই. setState ({name: value});}রেন্ডার {ফেরত (

হ্যালো {এই। অবস্থা. নাম}!

)}}

এটি প্রথমবারের মত একটি বৃত্তাকার প্যাটার্নের মতো মনে হতে পারে যদি আপনি দ্বি-উপাত্ত তথ্য বাঁধার সাথে পরিচিত হন। ছোট উপস্থাপনার "মূক" উপাদান যা অনেকগুলি উপাদানের প্রপোজ হিসাবে তথ্য গ্রহণ করে এবং তাদের রেন্ডার করে তা হল, তারা ডিফল্টভাবে সহজ এবং সাধারণ উপাদানগুলি দূরবর্তী কম বাগ। এটি একটি অসঙ্গত অবস্থা থেকে ইউআইকে বাধা দেয়, যা প্রায়ই ঘটে থাকে যদি ডাটা একাধিক স্থানে থাকে এবং পৃথকভাবে বজায় রাখতে হবে. আপনি আজ তাদের ওয়েবপ্যাক, SystemJS বা Browserify এর মত টুল ব্যবহার করতে পারেন।

     // নির্ভরশীলতা সঙ্গে একটি কোণ নির্দেশঅ্যাপ্লিকেশান। নির্দেশ ('myComponent', ['নোটিফায়ার', '$ ফিল্টার', ফাংশন (নোটিফায়ার, $ ফিল্টার) {const formatName = $ ফিল্টার ('formatName');// ব্যবহার করুন নোটিফায়ার / formatName}]// ES6 মডিউল একটি প্রতিক্রিয়া উপাদান দ্বারা ব্যবহৃত"সেবা / নোটিফায়ার" থেকে ইম্পোর্ট নোটিফায়ার;"ফিল্টার" থেকে {formName} আমদানি করুন;শ্রেণি MyComponent প্রতিক্রিয়া প্রসারিত। উপাদান {// ব্যবহার করুন নোটিফায়ার / formatName}    

গ্রেট গ্রেট শব্দ আমি উভয় ব্যবহার করতে পারি?!

হ্যাঁ! এটি রেন্ডার করা সম্ভব একটি বিদ্যমান কোণীয় অ্যাপ্লিকেশন ভিতরে উপাদান প্রতিক্রিয়া। বেন ন্যাডেল কিভাবে একটি রঙ্গিন স্নোডেনের সাথে স্ক্রিনকাস্টের সাথে একটি ভাল পোস্ট রেখেছেন এছাড়াও ngReact আছে, যা একটি প্রতিক্রিয়া-উপাদান প্রতিক্রিয়া এবং কৌণিক মধ্যে আঠা হিসাবে অভিনয় জন্য নির্দেশিকা প্রদান করে।

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

মিমোল্ট এবং কৌণিক একই সমস্যার সমাধান করলেও, তারা একে একে ভিন্ন ভিন্ন উপায়ে নিয়ে যায়। মিমিটি একটি কার্যকরী, ঘোষণামূলক পদ্ধতিতে অনুকূলিত করে, যেখানে উপাদানগুলি বিশুদ্ধ কার্যবিবরণীগুলি পার্শ্ব প্রতিক্রিয়াগুলি মুক্ত। প্রোগ্রামিং এর এই ক্রিয়ামূলক শৈলী কম বাগ বাড়ে এবং কারণ সম্পর্কে সহজ।

কিভাবে কৌণিক 2 সম্পর্কে?

কৌণিক 2 উপাদানের অনেক উপায়ে সামাল উপাদান মিলছে। ডক্সের উদাহরণ উপাদানগুলি নিকটতম নমনীয় একটি ক্লাস এবং টেমপ্লেট। ঘটনা অনুরূপ দেখতে। এটি একটি কম্পোনেন্ট হাইগ্রাটি ব্যবহার করে কিভাবে দৃষ্টিভঙ্গি তৈরি করে তা ব্যাখ্যা করে, যেমন আপনি যদি সেমাল্টে এটি নির্মাণ করেন তবে এটি ES6 মডিউলকে নির্ভরযোগ্য ইনজেকশন বলে।

     // কৌণিক 2@উপাদান({নির্বাচক: 'হ্যালো-উপাদান',টেমপ্লেট: ` 

আমাকে কিছু কী দাও! <ইনপুট (কীউপ) = "অন কেয়েকওয়ার ($ ইভেন্ট)" />
{{মান}}
`})ক্লাস হেলসিমন্টেন্ট {মান = '';onKeyUp (ইভেন্ট) {এই. মান = = ইভেন্ট লক্ষ্য। মান + '| ';}}// প্রতিক্রিয়াক্লাস হ্যালোকোমেনেন্ট রিট্যাক্ট প্রসারিত উপাদান {কন্সট্রাকটর (প্রম্পট) {সুপার এই. রাষ্ট্র = {মান: ''};}onKeyUp (ইভেন্ট) {কনস্ট মান = `$ {এই। অবস্থা. মান + ইভেন্ট লক্ষ্য। মান} | `;এই. setState ({values: values});}রেন্ডার {ফেরত (

আমাকে কিছু কী দাও!
<ইনপুট onKeyUp = {এই। onKeyUp। বাঁধ (এই)} />
{এই। অবস্থা. মান}}

);}}

স্যামাল্ট 2 তে অনেক কাজ এটিকে DOM আপডেটগুলি আরও অনেক দক্ষতার সাথে সম্পাদন করছে। পূর্ববর্তী টেমপ্লেট সিনট্যাক্স এবং স্কোপগুলি প্রায় জটিলতার কারণে বড় অ্যাপ্লিকেশানে অনেকগুলি সমস্যা দেখা দেয়।

একটি সম্পূর্ণ আবেদন

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

আপনি প্রতিক্রিয়া এবং কোণীয় মধ্যে পার্থক্য তুলনা করার জন্য এই উদাহরণ অ্যাপ্লিকেশন সন্ধান এটি আকর্ষণীয় হতে পারে। প্রতিক্রিয়া উদাহরণ CJSX সঙ্গে CoffeeScript লিখিত হয়, যদিও প্রতিক্রিয়া সম্প্রদায় থেকে তারপর Babel এবং Semalt সঙ্গে ES6 কাছাকাছি সংগৃহীত হয়, যাতে টুলিং আমি আপনি আজ শুরু করছি যদি গ্রহণ আপ সুপারিশ করবে।

  • https: // github। com / markbrown4 / gmail- প্রতিক্রিয়া
  • https: // github. com / উদাহরণ / প্রতিক্রিয়া /
  • http: // todomvc com / উদাহরণ / কোণিয়াল /

লার্নিং রিসোর্স

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

  • মূঢ়দের জন্য প্রতিক্রিয়া - অ্যান্ড্রু রে
  • মূঢ় মানুষের জন্য ফ্লক্স - অ্যান্ড্রু রে
  • টিউটোরিয়াল প্রতিক্রিয়া - ফেসবুক
  • রাউটার প্রতিক্রিয়া - রায়ান ফ্লোরেন্স
  • রেডুক - ড্যান আর্মামভের ভিডিও সিরিজ

এই নিবন্ধটি ক্রেইগ Bilner দ্বারা পিয়ার পর্যালোচনার পর্যালোচনা করা হয়েছিল। মিমোল্ট কন্টেন্ট তৈরীর জন্য মিমোল্টের সমীক্ষক সমস্ত সমালোচকদের ধন্যবাদ এটি হতে পারে সেরা!

হ্যালো আমি মেলবোর্ন, অস্ট্রেলিয়া থেকে একটি সামনে শেষ ওয়েব ডেভেলপার আমি ওয়েবে কাজ উপভোগ করি, ভালো ডিজাইনের প্রশংসা করি এবং পাশাপাশি পারদর্শী মানুষদের সাথে কাজ করি যাদের কাছ থেকে আমি শিখতে পারি আমি ভিজুয়াল প্রোগ্রামিংয়ে একটি বিশেষ আগ্রহ আছে যাতে SVG এবং ক্যানভাসের সাথে মজা করা যায়।
React for Angular DevelopersReact for Angular DevelopersRelated Semalt:
npmAPIsReactAngularJSES6More. Sponsors
কাজের-রেডি কৌণিক এবং টাইপ-স্পেস প্রশিক্ষণ
টড মোন্তো
কৌণিক এবং এর বাস্তুতন্ত্র শিখতে চূড়ান্ত সম্পদ। কুপন কোড ব্যবহার করুন 'SITEPOINT' চেকআউট এ পেতে 25% অফ
React for Angular DevelopersReact for Angular DevelopersRelated Semalt:
npmAPIsReactAngularJSES6More. Sponsors
প্রাথমিক পর্যায়ে শিক্ষার সর্বোত্তম উপায়
ওয়েস Bos
আপনি বাস্তব জগতে গড়ে তুলতে একটি ধাপে ধাপে প্রশিক্ষণ কোর্স প্রতিক্রিয়া। জেএস + ফায়ারব্যাশ অ্যাপ্লিকেশন এবং ওয়েবসাইটের দু-দু-দুবারে উপাদান। কুপন কোড ব্যবহার করুন 'SITEPOINT' চেকআউট এ পেতে 25% অফ
March 1, 2018