آموزش ریکت(قسمت اول)

سلام. حدود دو سه ماهی هست که ریکت رو استارت زدم و اوایل با ویدیو جلو میرفتم. تا حدی جلو رفتم تا الان. الان میخوام برای عمیق شدن توی ریکت، برم سراغ خوندن داکیومنتش. مطمئنا میدونید که هیچ چیز مثل داکیومنت خوندن و پروژه زدن شما رو نمیتونه توی یه زبان، لایبرری یا فریموورک یا هر چیز دیگه ای عمیق کنه.

و من هم برای اولین بار تصمیم گرفتم جزوه برداری کنم از اطلاعاتی که دستگیرم میشه :))

با خودم گفتم چرا خلاصه چیز هایی که مینویسم رو جایی مثل ویرگول منتشر نکنم که کسایی که انگلیسیشون در حدی نیست که بتونن ویدیو انگلیسی ببینن یا داکیومنت بخونن یا اصلا حوصله داکیومنت خوندن ندارن بتونن ازش استفاده کنن؟ و این شد که الان دارم این قسمت رو مینویسم :)

و اینکه بهتره برای خوندن این سری از مقاله، تجربه قبلی برنامه نویسی داشته باشید(که به احتمال زیاد دارید). چون من نمیام مثلا بگم فلان اکستنشن رو نصب کنید واسه وی اس کد و...

ریکت چی هست؟

به نقل از خود سایت react.org، ریکت لایبرری ای برای توسعه یو آی وبسایت ها هست. بعضی جا ها به ریکت میگن فریموورک(که اشتباهه. خود تیمشون هم میگن لایبرری هست) به دلیل قدرت بالایی که داره.

فواید ریکت

شما با ریکت میتونید فرانت اند وبسایت ها رو خیلی راحت تر توسعه بدید. هر قسمت از یو آی وبسایتتون رو میتونید یه کامپوننت(در آینده ای نزدیک توضیح میدم کامپوننت چی هست) در نظر بگیرید و یو آیتون رو به قسمت ها کوچیکی به اسم کامپوننت بشکونید. و بعد همه اونا رو در کنار هم بزارید و یو آی وبسایتتون رو بسازید. این کار باعث میشه دیباگینگ برنامه شما خیلی راحت تر بشه. از طرفی خود ریکت هم واقعا دقیق ارور ها رو اعلام میکنه بهتون. سرعت ریکت، به شدت بالاست. سایت هایی مثل خود ویرگول، نتفلیکس و دراپ باکس و... یکی از دلایل لود شدن سریعشون استفاده از ریکت هست. شما با ریکت میتونید وبسایت های SPA(single page application) بسازید. یعنی اپلیکیشنی که جابه جایی بین صفحاتش بسیار سریع هست به طوری که هرکسی فکر میکنه داره از یه اپ موبایل یا دسکتاپ استفاده میکنه! و جالب تر اینکه url هم تغییر میکنه! چی ازین بهتر؟

پیشنیاز یادگیری ریکت

ریکت تنها پیشنیازش آشنا بودن با جاوا اسکریپت هست. همین! ولی نه آشنا بودن سطحی. باید خیلی خوب باهاش آشنا باشید که بتونید درکش کنید. پس اگر جاوا اسکریپتتون خوب نیست، خواهشا وقتتون رو روی یادگیری ریکت هدر ندید. چون واقعا ازش زده میشید و یه جاهاییش رو اصلا متوجه نمیشید و این ممکنه باعث بشه از یادگیری نه تنها ریکت، بلکه فریموورکا و لایبرریای دیگه جی اس زده بشید.

بهترین آی دی ای یا تکست ادیتور از نظر من برای کار با ریکت

از نظر من VSCode بهترین انتخاب برای کد نویسی ریکت هست. و پیشنهاد من استفاده از این تکست ادیتور هست. چون ارور های سطحی رو خیلی خوب پیدا میکنه و مینویسه که باید چه کنیم، وقتی یه کامپوننت رو میخوایم ازش استفاده کنیم نیازی نیست خودمون دستی ایمپورتش کنیم چون خود وی اس کد اتوماتیک اون رو ایمپورت میکنه و و و...

نصب و استفاده از ریکت

برای نصب ریکت شما هم میتونید از سی دی ان های اون استفاده کنید و هم میتونید اون رو از npm نصب کنید. راه اول رو اینجا نمیگم چون خیلی کم هستن ازش استفاده کنن و به پای راه دوم نمیرسه. بریم سراغ راه دوم.

قدم اول: برای اینکه لایبرری ریکت رو از npm نصب کنید، باید اول node js رو نصب کنید. اگر نصب ندارید node js رو، میتونید با یه سرچ ساده از سایت node js، اون رو نصب کنید. وقتی این رانتایم رو نصب کردید، npm هم همراهش نصب میشه. البته با یارن هم میتونید ولی من با نود جی اس بهتون میگم.

قدم دوم: برای نصب ریکت فقط کافیه ترمینالتون رو به آدرس فولدر مورد نظر باز کنید، و این دستور رو وارد کنید:

npx create-react-app <your-folder-name>

به جای <your-folder-name> اسم اون فولدری که میخواین ریکت توش نصب بشه یا میخواید ساخته بشه و بعد توش نصب بشه رو بنویسید. دقت کنید که شما با اجرای این دستور، در واقع دارید ریکت رو دانلود میکنید. با هر بار اجرای این دستور، ریکت از نو دانلود و نصب میشه. و بیشتر پیشنهاد میشه با این دستور ریکت رو نصب کنید که جدید ترین نسخه ریکت واستون نصب بشه.

شما با وارد کردن دستور npm start توی ترمینالی که آدرسش دایرکتوری پروژه ریکتتون هست، میتونید لوکال هاستتونو بسازید و سپس به صورت زنده تغییراتی که میدید رو از توی مرورگر ببینید.

برنامه hello world توی ریکت

اگر شما دستور npm start رو اجرا کرده باشید توی ترمینالتون، حتما بعد از ساخته شدن لوکال هاست و باز شدن صفحه وب پروژه تون، طرح آماده ای رو دیدید. خب ما اون رو نمیخوایم. برای حذف اون ها بیاید و فایل هایی که توی عکس مشخص کردم رو پاک کنید.

بعدش توی index.html فولدر public، کد هایی که دورش خط کشیدم رو پاک کنید. اگر دوست داشتید کامنت های پیشفرض فایل اچ تی ام ال رو هم پاک کنید.

برید توی فولدر src و سپس index.js رو باز کنید و سپس همه کد های موجود رو پاک کنید.

خب الان دیگه از شر کد های پیشفرض خلاص شدیم.

حالا بریم سراغ ساخت ساده ترین برنامه ای که میشه با ریکت ساخت:

توی index.js، اول کلاس ReactDOM از ماژول react-dom رو ایمپورت کنید. به این شکل:

import ReactDOM from &quotreact-dom&quot

بعدش از متد render کلاس ReactDOM استفاده باید بکنیم برای نمایش یه المنت توی تگ دیوی به آی دی root. به این شکل:

ReactDOM.render(<h1>hello world!</h1>, document.querySelector(&quot#root&quot));

این متد دو تا آرگومان اصلی میگیره: آرگومان اول کامپوننت یا تگی هست که میخواید نمایش داده بشه و آرگومان دوم آدرس جایی که میخواید اون کامپوننت یا تگی که توی آرگومان اول گفتید رندر بشه هست که باید با استفاده از document.getElementById یا document.querySelector اون آدرس مشخص کنید. آرگومان سومی هم در کار هست ولی ما نیازش نداریم در اینجا.

حالا اگر برید و مرورگرتون رو چک کنید، میبینید تگ h1 با مقدار hello world! به اچ تی ام التون اضافه شده! این احتمالا اولین و ساده ترین برنامه ریکتی شما هست :))

بریم سراغ جزئیات بیشتر...

همه چیز درباره JSX

جی اس ایکس چیست؟

اگه دقت کرده باشید، ما توی برنامه هلو وورلد، تگ h1مون رو با تگ اچ تی ام ال نوشتیم. اونم توی فایل جاوا اسکریپتی!!! باید بگم اون سینتکس، بهش میگن جی اس ایکس. جی اس ایکس خیلی شبیه به اچ تی ام ال و ایکس ام ال هست. ریکت اون سینتکس رو برای راحتی کار برنامه نویس ها فراهم کرده. نوشتن جی اس ایکس تا حد زیادی شبیه به نوشتن تگ های اچ تی ام ال هست. ولی خب یه سری تفاوت ها هم داره که جلو تر متوجه میشید.

چرا باید از جی اس ایکس استفاده کنیم؟

جی اس ایکس سینتکسی نیست که ریکت ما رو برای استفاده ازش اجبار کنه. ولی ریکت به ما پیشنهاد میده که از سینتکس جی اس ایکس استفاده کنیم. چرا؟ چون به شدت خوانایی کد ما رو بیشتر میکنه و ما دیگه نیازی نیست از روش دوم که پیچیدگیش خیلی بیشتره مخصوصا در مواقعی که المنتای تودرتو داریم استفاده کنیم.

دیگه سینتکسی که تا حد خیلی زیادی شبیه به اچ تی ام ال هست خوانایی نمیخواد که :))

و اینکه این سینتکس پیچیدگی کد ما رو کمتر میکنه. راحت ایونت هامونو اینلاین به المنتامون میدیم بدون اینکه بخوایم با متدی سر و کله بزنیم.(بهش میرسیم)

شما میتونید جی اس ایکس رو توی متغیر، آرایه، آبجکت یا... ذخیره کنید و ازون جاهای مختلف استفاد کنید. شما میتونید به صورت شرطی از جی اس ایکس استفاده کنید! مثلا توی یه فانکشن میتونید با ایف و الس بگید اگر متغیر کاربر null بود، تگ جی اس ایکسی P رو برگردون، اگه متغیر کاربر یه اسمی بود، تگ h6 رو برگردون.

فکر کنم قانع شدید چرا باید از جی اس ایکس استفاده کنید. واسه راحتی خودتون هم که شده از جی اس ایکس استفاده کنید.

چجوری میتونیم به تگ های جی اس ایکسیمون اتریبیوت بدیم؟

گفتم سینتکس جی اس ایکس تا حد خیلی زیادی شبیه به اچ تی ام ال و ایکس ام ال هست. توی اچ تی ام ال چطوری به تگ هاتون اتریبیوت میدادید؟ به صورت اینلاین توی بدنه تگ باز. اینجا هم دقیقا همینجوریه. ولی بعضی از اتریبیوت ها اسماشون تغییر کرده. مثلا توی اچ تی ام ال میخواستیم کلاس بدیم به یه تگ، توی بدنه تگ باز مینوشتیم "class="test ولی توی جی اس ایکس باید بنویسیم "className="test. به این شکل:

<div className=&quottest&quot></div>

یا مثلا توی جی اس ایکس اگه بخواید اینلاین به تگ هاتون استایل بدید، باید به این شکل عمل کنیم:

<div style={{marginTop: &quot20px&quot, backgroundColor: &quot#000&quot}}></div>

باید اول اتریبیوت style رو بنویسید، بعدش یه آبجکت رو بین دو تا آکولاد تعریف کنید و توی اون آبجکت اسسم استایلتونو رو به صورت کمل کیس وارد کنید و مقدارش هم استرینگ بدید. مثلا اگه میخواستید margin-bottom بدید، باید marginBottom بنویسید توی آبجکت بین آکولاد ها و مقدارتون رو به شکل استرینگ بهش پاس بدید. حالا چرا باید آبجکتون رو بین آکولاد تعریف کنیم؟ بهتون میگم.

به چه دلیل باید از {} برای پاس دادن بعضی از مقادیر استفاده کنیم؟

کلا وقتی شما میخواید یه مقدار مثل آبجکت، ایندکسی از آرایه، عدد و یا مقدار ریترن شده از یه فانکشن و یا... رو به عنوان اتریبیوت و یا فرزند پاس بدید به یه تگ، باید اون مقدار رو بین دو تا آکولاد بنویسید. مثلا شما میخواید از مقادیر یه متغیر، فانکشن و آبجکت به عنوان فرزند استفاده کنید. به این شکل باید عمل کنیم:

const C1 = &quotreact&quot

const C2 = [&quotvue&quot, &quotpixi js&quot, &quotjs&quot];

const C3 = { name: &quotangular js&quot };

ReactDOM.render(

<h1>

hello world! {C1} and {C2[0]} and {C3.name}

</h1>,

document.querySelector(&quot#root&quot)

);

و ما الان از این مقادیر داریم استفاده میکنیم به عنوان فرزند جی اس ایکس.

برای اتریبیوت ها هم دقیقا باید همین کار رو انجام بدید. برای مثال شما یکی از استایل هاتون رو توی یه آبجکت ذخیره کردید. یکی از کلاس هاتون رو توی یه متغیر ذخیره کردید. برای استفاده ازشون باید اینکارو کنید:

const myClassName = &quothello&quot

const myStyle = { marginBottom: &quot50px&quot };

ReactDOM.render(

<h1 className={myClassName} style={myStyle}>

hello world!

</h1>,

document.querySelector(&quot#root&quot)

);

به همین راحتی!

چجوری به تگ های جی اس ایکسی تگ فرزند اضافه کنیم؟

دقیقا مثل اچ تی ام ال که مطمئنم میدونید توی اچ تی ام ال چجوری تگ های تو در تو میسازیم و نیازی به توضیح اضافه نیست.

راه دوم ساخت تگ های اچ تی ام ال توی ریکت چی هست؟

استفاده از React.createElement. این روش بعید میدونم کسی ازش استفاده کنه ولی دونستن اینکه جی اس ایکس چجوری کار میکنه و راه دیگه ساخت تگ های اچ تی ام ال و... خالی از لطف نیست. ببینید شما چه بخواید با جی اس ایکس تگ های اچ تی ام ال رو تعریف کنید چه با استفاده از این متد، یه آبجکت دریافت خواهید کرد که ریکت با استفاده از این آبجکت ها تگ ها رو به اچ تی ام التون اضافه میکنه. پس خروجی هیچ فرقی با هم نداره.

برای ساخت تگ با React.createElement شما اول باید کلاس React رو از ماژول react ایمپورت کنید و سپس از createElement استفاده کنید.

متد createElement سه تا آرگومان میگیره.

آرگومان اول، اسم تگی هست که شما میخواید ساخته بشه، آرگومام دوم آبجکتی از پراپرتی های اون تگ هست مثل className و style و... و آرگومان سوم تگ های فرزند یا تکست کانتنت تگ هست. مثلا برای ساخت یه تگ h1 و نشون دادن اون باید به این شکل عمل کنید:

import React from &quotreact&quot

const myH1 = React.createElement(&quoth1&quot, null, &quotcreated by React.createElement&quot);

ReactDOM.render(myH1, document.querySelector(&quot#root&quot));

ما اینجا با استفاده از createElement تگ h1 با مقدار created by React.createElement ساختیم و اونو توی متغیر ذخیره و سپس رندرش کردیم. به همین سادگی. حالا مثلا اگه بخواید بهش کلاس و اینلاین استایل بدید، باید اینکار رو کنید:

import React from &quotreact&quot

const myH1 = React.createElement(

&quoth1&quot,

{ style: { color: &quotblue&quot, backgroundColor: &quotred&quot }, className: &quoth1&quot },

&quotcreated by React.createElement&quot

);

ReactDOM.render(myH1, document.querySelector(&quot#root&quot));

تازه اینجا داریم یه دونه تگ میسازیم... فرض کنید یه تگ داریم با ده تا تگ فرزند. خیلی سخت و پیچیده میشه ساختنش با React.createElement. ولی با jsx مثل اچ تی ام ال تگ های تودر تو رو مینویسیم.

حالا فرق jsx با React.createElement چی هست؟ هیچی! فقط سینتکس و یه سری چیزای جزعی! برای مشاهده دو تا تگ با ساختار مشابه و یکی رو با جی اس ایکس و یکی رو با createElement بسازید و اون رو لاگ بگیرید.

const myH1_1 = React.createElement(

&quoth1&quot,

{ style: { color: &quotblue&quot, backgroundColor: &quotred&quot }, className: &quoth1&quot },

&quotcreated by React.createElement&quot

);

const myH1_2 = (

<h1 style={{ color: &quotblue&quot, backgroundColor: &quotred&quot }} className=&quoth1&quot>

created with JSX

</h1>

);

console.log(myH1_1);

console.log(myH1_2);

خروجی این دو تا حد خیلی زیادی شبیه به هم هستن به غیر از یه سری جاهای کوچیک که مهم نیستن. پس به این نتیجه میرسیم که ما با نوشتن تگ با سینتکس جی اس ایکس، انگار داریم تگامونو با React.createElement میسازیم. پس چرا ما باید بیایم از راه ساخت استفاده کنیم؟ واقعا نمیدونم. توی ادامه آموزش و قسمت های دیگه من از جی اس ایکس استفاده خواهم کرد.

جی اس ایکس از حملاتی مثل XSS جلوگیری میکنه!

حملات xss یا cross site scripting چی هست؟ خیلی ساده میگم. بعضی موقه ها هکر میاد و کاری میکنه توی سایت که وقتی یک کاربر، حالا هر کاربری، اومد و برای مثال روی یه دکمه کلیک کرد، یک سری اسکریپت های مخرب روی سیستمش اجرا بشه. این حمله روش های مختلفی هم داره. مثلا اینطوری که شما یه اینپوت تکست دارید، و کاربر باید اسمشو وارد کنه. اینجا به جای اینکه اسمشو وارد کنه، میاد و یه اسکریپت مخرب وارد میکنه. خیلی ساده گفتم.

حالا جی اس ایکس، اینجوری هست که میاد هر چیزی که توی بدنه اش هست رو اول به استرینگ تبدیل میکنه، بعدش میزاره توی دام. برای مثال اگه هکر بیاد و توی اون اینپوت یه تگ اسکریپت که اسکریپتای مخرب رو لود میکنه بزاره و وبسایت ریکتی شما هم اون مقدار به حساب اسم کاربر رو لود بکنه، اون تگ اسکریپت اول تبدیل به رشته میشه و بعدش به دام افزوده میشه! یعنی اینجوری نیست که بیاد و خود اون تگ اسکریپت رو اد کنه به دام. میتونید این رو تست هم بکنید. یه متغیر تعریف بکنید و توش به صورت استرینگ یه تگ اسکریپت بنویسید. بعدش از مقدار اون متغیر توی جی اس ایکستون استفاده کنید. مقدار به صورت استرینگ نمایش داده میشه! هر چند این پیشگیری ای که جی اس ایکس میکنه اینجوری نیست که همه خطرات رو رفع کنه. هکر هنوز هم میتونه ازینکار ها انجام بده که همش بستگی به مدیریت خودتون داره. برای مثال شما اگه اسم کاربر رو از طریق اتریبیوت dangerouslySetInnerHTML که همون innerHtml جاوا اسکریپت هست و ریکت از عمد تغییرش داده به این اسم، نمایش بدید، اگر یه وقت کاربر تگ اسکریپت به جای اسمش وارد کرد، اون تگ به دام افزوده میشه! برای مثال:

ReactDOM.render(

<h1

style={{ color: &quotblue&quot, backgroundColor: &quotred&quot }}

dangerouslySetInnerHTML={{ __html: &quot<h3>dont do this!</h3>&quot }}

className=&quoth1&quot

></h1>,

document.querySelector(&quot#root&quot)

);

در اینجا من به راحتی تگ h3 رو به بدنع تگ h1 اضافه کردم! پس ریکت الکی و از رو شوخی اسم این پراپرتی رو نزاشته dangerouslySetInnerHTML. چون واقعا خطرناک هست.

خب این هم از این مقاله. امیدوارم خوشتون اومده باشه. منتظر قسمت دوم باشید :)

اگه دوست داشتید لایک کنید مقاله مو. اگه دوست داشتید دنبال کنید من رو. اگه دوست داشتید یه کامنت مثبت و یا انتقاد منطقی بزارید واسم. خلاصه هرکاری دوست داشتید توی زندگیتون انجام بدید؛ هرکاری که به کسی آسیب نزنه و یا غمگینش نکنه :)