اگر به یادگیری علاقه دارید Reactjs اما نمی دانم از کجا شروع کنم، این راهنمای گام به گام برای تو است. در این پست وبلاگ، Reactjs را تجزیه می‌کنم و یک آموزش جامع ارائه می‌دهم که به شما کمک می‌کند اولین برنامه React خود را بسازید.
اما قبل از غواصی، بیایید به سرعت به خود یادآوری کنیم که React چیست.
بخش 1: Reactjs چیست؟
برای درک ساده این موضوع، می خواهم از تعریف ویکی پدیا استفاده کنم. می گوید:
> React (که Reactjs نیز نامیده می شود) یک کتابخانه جاوا اسکریپت front-end رایگان و منبع باز برای ساخت رابط های کاربری بر اساس کامپوننت ها است.
اجازه دهید آن را بیشتر تجزیه کنم.
Reactjs توسط تیم متا، که قبلاً فیسبوک بود، ایجاد شده و به صورت رایگان برای عموم منتشر شده است. برای ساختن قسمت رو به روی کاربر یک برنامه وب استفاده می شود.
یعنی می توان از آن برای ساخت هر اپلیکیشن frontend استفاده کرد.
مهم است که توجه داشته باشید که Reactjs بر روی جاوا اسکریپت ساخته شده است. به عنوان یک مبتدی، لازم است دانش اولیه جاوا اسکریپت را داشته باشید، اگرچه نیازی به متخصص بودن ندارید.
همچنین لازم به ذکر است که Reactjs یک کتابخانه است نه یک چارچوب. اگر می‌خواهید تفاوت‌های بین چارچوب و کتابخانه را بدانید، این پست وبلاگ @tacomanick را بخوانید.
اکنون که می دانیم چه چیزی را یاد می گیریم، بیایید در مورد الزامات شروع یادگیری آن صحبت کنیم.
بخش 2: الزامات یادگیری Reactjs
اگر قصد دارید یک توسعه دهنده وب شوید، یادگیری آن ضروری است HTML، CSS، و جاوا اسکریپت. این سه زبان پایه و اساس توسعه وب هستند و بدون آنها ساختن یک برنامه وب غیرممکن است.
HTML اسکلت برنامه وب شما است، در حالی که از CSS برای استایل دادن به وب سایت ها استفاده می شود. جاوا اسکریپت یک زبان برنامه نویسی چند منظوره است که وب را قدرتمند می کند. بر اساس ویکی پدیا، 98 درصد از وب سایت ها در سراسر جهان از جاوا اسکریپت استفاده می کنند.
قبل از فرو رفتن در Reactjs، داشتن دانش اولیه از جاوا اسکریپت بسیار مهم است. شما نیازی به تسلط بر جاوا اسکریپت ندارید، اما باید مفاهیم اولیه، از جمله انواع داده، عملگرهای ریاضی، روش‌های آرایه، توابع جاوا اسکریپت، شرایط، و واژه‌های قالب را بدانید.
جدا از وب، همانطور که قبلاً گفتم جاوا اسکریپت یک زبان برنامه نویسی چند منظوره است، می توانید از آن برای ساخت برنامه های موبایل، بازی ها، ابزارهای هوش مصنوعی و غیره استفاده کنید.
آنقدر اجباری است که قبل از اینکه وارد reactjs شوید، این 3 زبان را یاد بگیرید.
اما تا چه حد باید جاوا اسکریپت را قبل از یادگیری Reactjs بدانید؟
بخش 3: مبانی جاوا اسکریپت که باید قبل از Reactjs یاد بگیرید
در اینجا موارد مهمی وجود دارد که باید یاد بگیرید:
I. انواع داده ها
شما باید بتوانید بین رشته، شناور، عدد صحیح، enum و غیره تفاوت قائل شوید. همانطور که در حرفه خود رشد می کنید، تایپ اسکریپت را یاد خواهید گرفت که زیرمجموعه جالبی از جاوا اسکریپت است.
II. اپراتورهای ریاضی
این فقط ریاضیات پایه ای است که در مدرسه ابتدایی یاد گرفتید… چگونه از “+”، “-“، “÷”، “%” و سایر عملگرهای ریاضی استفاده می کنید؟
III. روش های آرایه
این بسیار مهم است، زیرا در طول زندگی خود به عنوان یک مهندس نرم افزار، به خصوص یک توسعه دهنده frontend، روی مجموعه ای از داده ها کار خواهید کرد.
شما قرار است استفاده کنید map روش بسیار زیادی دارید، پس برای یادگیری روش های آرایه وقت بگذارید.
IV. توابع جاوا اسکریپت
شما باید بدانید که چگونه از تابع arrow و دستور تابع اولیه استفاده کنید.
به عنوان مثال
function myprogress() {
// do something
}
و
const myProgress = () => {
// do something
}
این دو بلوک کد یکسان هستند، اما شما باید قبل از انتخاب یک نحو، تفاوت ها را یاد بگیرید.
V. شرایط
درست همانطور که در زندگی روزمره خود تصمیم می گیریم، هنگام ساخت وب سایت یا چیزی با زبان برنامه نویسی نیز باید تصمیم بگیریم و اینجاست که عبارات شرطی می درخشند.
ما روش های مختلفی برای تصمیم گیری در جاوا اسکریپت داریم که عبارتند از:
بیانیه در غیر این صورت
function myLife(me) {
if(me === "jobless") {
return "find a job";
} else {
return "Travel to Dubai";
}
}
عملیات سه تایی
const myLife = (me) => {
{me === "jobless" ? "find a job" : "Travel to Dubai"}
}
بیانیه سوئیچ
const myLife = (me) => {
switch(me) {
case "jobless":
return "find a job";
break;
default:
return "Travel to Dubai"
}
}
این 3 بلوک کد روش های مختلفی برای تصمیم گیری در جاوا اسکریپت هستند، شما باید بدانید که چگونه از هر یک از آنها استفاده کنید و چه زمانی از آنها استفاده کنید.
VI. Template literal: این کار شما را از استرس الحاق طولانی و غیر ضروری نجات می دهد.
به عنوان مثال، بلوک های کد زیر را مقایسه کنید:
بلوک A:
const myProgress = () => {
const languages = "HTML, CSS and JavaScript"
const status = "Beginner"
const myProfile = "My name is Stephen. I'm a" + " " + status + " ", + "and I've learned" + " " + languages
console.log(myProfile) // My name is Stephen. I'm a Beginner and I've learned HTML, CSS and JavaScript.
}
تا زمانی که این کار کاملاً کار کند، آیا متوجه آن هستید + " " + تکرار می شود؟ اگر اینطور عمل نکنیم، نتیجه مورد انتظار را نخواهیم گرفت.
اما نحو زشت و وقت گیر است، به همین دلیل است که ما برای رفع آن، قالب های واقعی داریم. این بلوک کد زیر را در نظر بگیرید:
myProfile = `My name is Stephen. I'm a ${status} and I've learned ${languages} `
console.log(myProfile) // My name is Stephen. I'm a Beginner and I've learned HTML, CSS and JavaScript.
آیا متوجه شده اید که این بلوک کد دوم تمیزتر و سریعتر است؟ این مزیت به معنای واقعی کلمه است.
نحو ساده است، رشته خود را با این علامت بپیچید (کلید را قبل از 1 روی صفحه کلید خود فشار دهید).
به عنوان مثال.:
const action = `I am going`
console.log(action) // I am going.
و اگر نیاز به استفاده از یک رشته ذخیره شده یا پویا دارید، مانند زبان هایی که در تابع خود در بالا ذخیره کردیم، از علامت دلار و به دنبال آن براکت های فرفری استفاده خواهید کرد. مثل این:
const action = `I am learning ${languages}` // I am learning HTML, CSS and JavaScript
به همین سادگی.
اگر این موارد را در جاوا اسکریپت یاد گرفته اید، پس می توانید ادامه دهید.
اکنون آمدن به اکوسیستم Reactjs ممکن است در مقایسه با نوشتن کد با HTML و CSS متفاوت به نظر برسد زیرا React دارای دستوری به نام JSX است.
معنی آن این است که می توانید HTML، CSS و جاوا اسکریپت را در یک فایل بدون هیچ خطایی بنویسید.
یک مثال این است:
const Profile = () => {
const name = “Stephen”
return (
<div>
<tag style=”color: red; fontWeight: bold”>My name is ${name}</tag>
</div>
)
}
توجه داشته باشید که من از 3 زبان، HTML، CSS و جاوا اسکریپت در اینجا استفاده می کنم. این یک جزء ساده ReactJs است و شما با بسیاری از آن کار خواهید کرد.
نتیجه گیری: آموزش Reactjs برای مبتدیان (بخش 1)
در نتیجه، Reactjs یک کتابخانه ضروری برای توسعه frontend است. برای شروع یادگیری Reactjs، داشتن دانش اولیه از HTML، CSS و جاوا اسکریپت بسیار مهم است. در این آموزش اصول اولیه جاوا اسکریپت را که باید قبل از غواصی در Reactjs بدانید را توضیح دادیم.
منتظر قسمت 2 این آموزش باشید، جایی که ما عمیق تر به Reactjs می پردازیم و اولین برنامه React خود را می سازیم. برای اینکه در صورت افت آن مطلع شوید، لطفاً من را دنبال کنید و این را با دیگران به اشتراک بگذارید.
> می توانید با من در ارتباط باشید توییتر یا لینکدین – من همچنین برای نقش نویسندگی مهندسی و فنی Frontend باز هستم.
