কাজ করার সময় আমার মনে খুব বিভ্রান্তিকর কিছু পাওয়া যায় React।
ইন্টারনেটে প্রচুর উদাহরণ পাওয়া যায় যা .jsপ্রতিক্রিয়া সহ ফাইলগুলি ব্যবহার করে তবে অনেকেই .jsxফাইল ব্যবহার করেন ।
আমি .jsxফাইলগুলি সম্পর্কে পড়েছি এবং আমার বোধগম্যতা হল তারা আপনাকে কেবল নিজের মধ্যে এইচটিএমএল ট্যাগ লিখতে দেয় javascript। তবে একই জিনিস .jsফাইলগুলিতেও লেখা যেতে পারে ।
সুতরাং এই দুটি এক্সটেনশন .jsএবং এর মধ্যে আসল পার্থক্য .jsxকী?
উত্তর:
ফাইল এক্সটেনশনের ক্ষেত্রে এটির কোনওটি নেই। আপনার বান্ডিলার / ট্রান্সপোর্টার / যা কিছু ফাইলের বিষয়বস্তু রয়েছে তা সমাধান করার জন্য যত্ন নেয় takes
ফাইল .jsবা .jsxটাইপের ক্ষেত্রে কী রাখবেন তা সিদ্ধান্ত নেওয়ার সময় অন্য কিছু বিবেচনা রয়েছে । জেএসএক্স স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট যেহেতু যে কেউ "প্লেইন" জাভাস্ক্রিপ্ট নয় তা তার নিজের এক্সটেনশনে যেমন, .jsxজেএসএক্সের .tsজন্য এবং টাইপস্ক্রিপ্টের জন্য উদাহরণস্বরূপ যুক্তিযুক্ত হতে পারে gue
এখানে একটি ভাল আলোচনা পড়ার জন্য উপলব্ধ
.jsxপ্রয়োজন না হলেও
বেশিরভাগ ক্ষেত্রে এটি কেবল ট্রান্সপনার / বান্ডিলারের প্রয়োজন, যা জেএসএক্স ফাইলগুলির সাথে কাজ করার জন্য কনফিগার করা নাও হতে পারে, তবে জেএসের সাথে! সুতরাং আপনি জেএসএক্সের পরিবর্তে জেএস ফাইলগুলি ব্যবহার করতে বাধ্য হন।
এবং যেহেতু প্রতিক্রিয়া জাভাস্ক্রিপ্টের জন্য কেবল একটি গ্রন্থাগার, তাই আপনার পক্ষে জেএসএক্স বা জেএস এর মধ্যে নির্বাচন করা কোনও তাত্পর্যপূর্ণ করে না। তারা পুরোপুরি বিনিময়যোগ্য!
কিছু ক্ষেত্রে ব্যবহারকারী / বিকাশকারীরা কোড হাইলাইট করার কারণে জেএসএক্সের চেয়েও জেএসএক্স বেছে নিতে পারে, তবে বেশিরভাগ নবীন সম্পাদকরাও জেএস ফাইলগুলিতে সঠিকভাবে প্রতিক্রিয়া বাক্য গঠন দেখছেন।
জেএসএক্স ট্যাগগুলি ( <Component/>) স্পষ্টভাবে স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট নয় এবং <script>উদাহরণস্বরূপ যদি আপনি তাদের একটি নগ্ন ট্যাগের মধ্যে রাখেন তবে এর কোনও বিশেষ অর্থ নেই । সুতরাং সেগুলিতে থাকা সমস্ত প্রতিক্রিয়া ফাইলগুলি জেএসএক্স এবং জেএস নয়।
কনভেনশন দ্বারা, একটি প্রতিক্রিয়া প্রয়োগের প্রবেশের বিন্দুটি সাধারণত .jsx এর পরিবর্তে .js হয় যদিও এতে প্রতিক্রিয়া উপাদান রয়েছে। এটি পাশাপাশি .jsxও হতে পারে। অন্য কোনও জেএসএক্স ফাইলের সাধারণত .jsx এক্সটেনশান থাকে।
যে কোনও ক্ষেত্রে, দ্ব্যর্থতা থাকার কারণ হ'ল শেষ পর্যন্ত এক্সটেনশনটি খুব বেশি গুরুত্ব দেয় না যেহেতু ট্রান্সপ্লেলারটি খুশিভাবে যে কোনও ধরণের ফাইলগুলি জেএসএক্স হিসাবে ম্যানচে করে।
আমার পরামর্শটি হবে: এটি সম্পর্কে চিন্তা করবেন না।
var elem = <div>Text</div>;কোনও মানক এইচটিএমএল উপাদান নয়; এটা সমর্থন করে না appendChild, classListএবং সম্ভবত অন্যান্য এইচটিএমএল বৈশিষ্ট্য। আপনি যদি সরাসরি জাভাস্ক্রিপ্টে এইচটিএমএল ট্যাগগুলি চান তবে টেমপ্লেটের আক্ষরিক (ব্যাকটিক `) একসাথে innerHtmlবা ব্যবহার করা ভাল outerHtml।
জেএসএক্স ট্যাগগুলি স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট নয়, উল্লিখিত সত্য ছাড়াও আমি .jsx এক্সটেনশনটি ব্যবহার করার কারণটি এটির সাথে এমমেট এখনও সম্পাদকের কাজ করে - আপনি জানেন যে এই দরকারী প্লাগইনটি এইচটিএমএল কোড প্রসারিত করে, উদাহরণস্বরূপ উল> লি
<ul>
<li></li>
</ul>"emmet.includeLanguages": { "javascript": "javascriptreact" }সেটিংস.জসনগুলিতে নিম্নলিখিতগুলি যুক্ত করে ভিজ্যুয়াল স্টুডিও কোডে .js ফাইলগুলির জন্য এমমেট ব্যবহার করা সম্ভব: তবে হ্যাঁ, আমি সম্মত হই যে সম্ভব হলে জেএসএক্স কোডটি .jsx এক্সটেনশনটি ব্যবহার করা উচিত।
অন্যান্য উল্লিখিত হিসাবে JSXএকটি মান জাভাস্ক্রিপ্ট এক্সটেনশন নয়। .jsবাকী উপাদানগুলির উপর ভিত্তি করে এবং আপনার প্রয়োগের প্রবেশের নামটির নাম দেওয়া ভাল , আপনি ব্যবহার করতে পারেন .jsx।
আমি কেন .JSXসমস্ত উপাদানগুলির ফাইলের নামের জন্য ব্যবহার করছি তার একটি গুরুত্বপূর্ণ কারণ আমার আছে । প্রকৃতপক্ষে, বিশাল আকারের কোড সহ একটি বৃহত আকারের প্রকল্পে, আমরা যদি .jsxএক্সটেনশনের সাথে সমস্ত প্রতিক্রিয়ার উপাদান নির্ধারণ করি, তবে প্রকল্পের বিভিন্ন জাভাস্ক্রিপ্ট ফাইলগুলিতে নেভিগেট করা সহজ হবে (যেমন সাহায্যকারী, মিডলওয়্যার ইত্যাদি) এবং আপনি জানেন যে এটি একটি প্রতিক্রিয়া সামগ্রী এবং জাভাস্ক্রিপ্ট ফাইলের অন্য ধরণের নয়।
জেএসএক্স স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট নয়, এয়ারবিএনবি স্টাইল গাইড 'এসলিন্ট' এর ভিত্তিতে এই প্যাটার্নটি বিবেচনা করতে পারে
// filename: MyComponent.js
function MyComponent() {
return <div />;
}একটি সতর্কতা হিসাবে, আপনি নিজের ফাইলটির নাম MyComp घटक.jsx রাখলে এটি পাস হয়ে যাবে, আপনি যদি এসলিন্ট নিয়মটি সম্পাদনা না করেন তবে আপনি এখানে স্টাইল গাইডটি পরীক্ষা করতে পারবেন