با سلام به همه دوستان من علیرضا شهابی هستم چند سالیه که برنامه نویسی رو به صورت حرفه ای دنبال میکنم و خودم رو یک Full Stack Javascript developer میدونم و این اولین پست من در زمینه توسعه سمت کاربر ( Front - end ) با چارچوب React ؛ پس اگه کمی و کاستی میبنید حتما حتما کامنت کنید تا منم بتونم پیشرفت بیشتری کنم و محتوای با کیفیت تری تولید کنم ?.
خوب بخش اول صرفا یه معرفی ساده از خودم بود ، حالا بریم که یک وب اپلیکیشن توی React ایجاد کنیم که البته من از typescript به عنوان زبان استفاده میکنم ( اگه با این زبان آشنایی ندارین و بخوام یه تعریف ساده بکنم Javascript + Typescript )
- قبل ازینکه بریم سراغ کد نویسی ممکنه برای شما سوال بشه که اصن Route محافظت شده یعنی چی ؟
+ یعنی درنظر بگیرید که شما میخواین از ورود کاربر به Route های مختلف جلوگیری کنید و یا به طور کلی میخواین دسترسی کاربر رو تو بخش های مختلف مدیریت کنید.
حالا نیاز مندی های پروژمون پکیج react-router-dom و یه دانش کلی از Typescript و آشنایی با چند تا keyword همین و بس !
برای شروع ابتدا از دستور خط npx استفاده میکنم .
npx create-react-app "YOUR_APP_NAME" --typescript
خوب با این شیوه اپلیکیشن شما ایجاد شده ( و اینکه این اپ هم از Js و Typescript پشتیبانی میکنه ).
خوب حالا میایم با دستور خط زیر React - Router را نصب میکنیم .
yarn add react-router-dom @types/react-router-dom
علتی که از types@ استفاده میکنیم اینه که میخوایم تحت Typescript کد بزنیم.
خب شروع میکنیم اولین چیزی که قراره درباره این اپ بدونید اینه که کلا دو تا Route داره یکی Public با مسیر "/" و اون یکی Private || Protected با مسیر "admin/" .
در ابتدا صفحه App.tsx رو به صورت زیر ایجاد میکنیم . یک Functional Component که داره Route های اصلی برنامه مارو بهمون بر میگردونه .
که حالا من اومدم ProtectedRoute رو نوشتم و ازش استفاده کردم.
- خوب بریم سراغ این سوال که اصن این ProtectedRoute که من ساختم اصن چی هست ؟
+ طبق قیافه ای که داره شبیه یک Component که prop های path و component رو میگیره و تحت یک شرایط خاصی که ما خودمون تعیین میکنیم اون رو render میکنه !
فک کنم تا اینجا نصف بیشتر مسئله رو باهم حل کردیم تنها کاری که باید بکنیم یک Component ایجاد کنیم که prop های path و component رو بگیره ؛ پس هرچه زود تر بریم تو کار کد نویسی این قسمت ?.
خب طبق عکس ما اومدیم و یک Functional Component ایجاد کردیم به نام ProtectedRoute و دو تا prop هایی که میخواستیم رو ازش میکشیم بیرون.
- خوب این سوال پیش میاد که این rest چی هست ؟
+ جواب اینکه این rest صرفا یک سری پارامتر هستن که برای ما path بود ولی شامل exact و ... هرچیز دیگه ای عشقت بکشه هم میشه و این یعنی هرچیزی که عشقت بکشه رو میتونی به Route به عنوان rest بفرستی !
و خب ما با استفاده از Route میایم و در بخش render یک تابع مینویسیم که به ما یک Component دیگه رو برمیگردونه.
حالا میگیم که اگر کاربر ما وارد شده بود ( میتونید از هرشیوه ای که دوست دارید این بخش رو پیاده سازی کنید ) میتونه به صفحه ادمین که در شکل - 1 روی مسیر "admin/" دسترسی داشته باشه به همین راحتی ?!
در انتها باید بگم اگر خیلی ریز به ریز و به جزییات براتون نزاشتم چون میخواستم هم زود تر بخونیش که حوصلت سر نره و هم اینکه صرفا بهت یک دید داده باشم تا بتونی مسئله رو خودت حل کنی و اعتماد به نفس بیشتری بدست بیاری و هم چنین از یادگیری لذت ببری .
فقط گفته باشم صرفا خوندن این مقاله کاری نمیتونه برات بکنه یادت نره که حتما دست به کد باشی ?.
اگر از خوندن این مقاله لذت بردی خیلی خوشحال میشم هم نظرتو بنویسی ( که با کدوم بخش یا چه ویژگی ازین مقاله حال کردی ) و هم اینکه به اشتراکش بزاری ممنون .
