استفاده از React همراه با JSX بدون Node.js

سلام،

محمد صفا کمالی، هستم و بلاخره بعد 2 سال اومدم تا یک یک چیزی که سعی کردم در موردش کنجکاوی کنم رو براتون بنویسم و با هم سعی کنیم ببینیم چطوری می تونیم از React.js بدون Node.js استفاده کنیم و همچنین بتونیم از JSX هم استفاده کنیم.

در ضمن عید 1403 رو هم بهتون تبریک میگم، امیدوارم سال خوبی رو داشته باشید. 😂

خوب، اول یک توضیحی در مورد React Js بدیم تا دوستانی که اطلاع ندارند با خبر بشن (البته اگر با طراحی وب و جاوا اسکریپت آشنا باشید، قطعا اسمش به گوشتون خورده و باهاش آشنا هستین و شایدم خیلی حرفه ای هستید ...)

ریکت (React) یک کتابخانه ی جاوااسکریپت فرانت اند برای جاوا اسکریپت هست که به ما کمک می کنه رابط کاربری های پویا و تعاملی بسازیم. و برای استفاده از ریکت نیاز به Node.JS داریم.

ولی ما اینجاییم که از Node.js استفاده نکنیم و خودمون رو به چالش بکشیم و ببینیم چه مشکلاتی برامون به وجود میاد.

خوب، ابتدا من ابتدا یک فایل index.html ساختم و خواستم لایبری React رو بهش اضافه کنم.
بعد از یکم تحقیق فهمیدم برای این کار باید دو لایبری react و react-dom رو به این فایل اضافه کنم، که لینک هاش این ها هستن:

https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js

با این تگ های اسکریپت اضافشون کردم:

<script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js&quot integrity=&quotsha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==&quot crossorigin=&quotanonymous&quot referrerpolicy=&quotno-referrer&quot>
<script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js&quot integrity=&quotsha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==&quot crossorigin=&quotanonymous&quot referrerpolicy=&quotno-referrer&quot>

خوب، در واقع ما هسته ی React رو اضافه کردیم. الان ما می تونیم کد React بنویسیم ولی نمی تونیم از سینتکس JSX استفاده کنیم و همچین چیزی داشته باشیم:

بدون JSX کار خیلی سخت میشه و خوانایی کد هم به شدن میاد پایین. ما نمی خوایم این بشه برای همین سعی می کنیم JSX رو هم به فایل Html سادمون اضافه کنیم. برای اضافه کردن JSX از Babel کمک می گیریم که لینکش رو تونستم گیر بیارم (خیلی کار مهمی کردم، باور کنید:). با این تگ اضافش می کنیم:

<script src=&quothttps://unpkg.com/@babel/standalone/babel.min.js&quot>

الان ما می تونیم کد React بنویسیم، فعلا یک تگ script به آخر صفحه اضافه می کنیم و همونطور می دونید برای نشون دادن یک یک کامپوننت یا المنت باید از ریکت بخوایم تا اون رو توی یک المنت توی صفحه نشون بده:

که نتیجش چیزی جز این نشد 😁

خب، به تظرتون ما کجا رو اشتباه کردیم؟ منم اول برام سوال شد ولی بعد که یک خورده توی Stackoverflow و ... گشتم فهمیدم ما باید به تگ اسکریپت بگیم که محتوی تو شامل JSX هم هست و باید با Babel اجرا بشی:

<script type=&quottext/babel&quot> ... 

بعد از انجام این کار حاصل رو مشاهده می کنیــــــــــــم:

خوب، همونطور که می دونید می ریم که یک خورده پروژه رو مرتب سازی کنیم،

من دارم از Flask برای بک اند پروژه استفاده می کنم، برای همین فولدر های static و template رو ایراد نگیرید.
بقیشم که توضیحی نمی خواد.

فقط لازم هست هر فایلی که می خوایم import کنیم رو توی index.html به صورت text/babel اضافه کنیم.
چون بدون node.js نمیشه از import استفاده کرد.

یک پروژه ساده توی این مخزن گیتهاب گذاشتم می تونید برید و نگاه کنید.

ممنون که تا اینجا همراه من بودید، انشالله بعدا این مطلب رو اپدیت می کنم و این پروژه ی بالا رو هم شرح میدم.