سلام دنیا

کوچکترین مثال ری‌اکت شبیه این است:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

این مثال یک عنوان را روی صفحه نمایش می‌دهد که می‌گوید: “Hello, world!”

روی CodePen امتحان کنید

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

چگونه این راهنما را بخوانیم

در این راهنما، ما به بررسی اجزا سازنده برنامه‌های ری‌اکت یعنی: المنت‌ها و کامپوننت‌ها می‌پردازیم. زمانی که شما به آن‌ها مسلط شوید، می‌توانید برنامه‌های پیچیده را از تکه‌های کوچکتر با قابلیت استفاده مجدد بسازید.

راهنما

این راهنما برای افرادی طراحی شده‌است که ترجیح می‌دهند مفاهیم را گام‌به‌گام بیاموزند. اگر شما ترجیح می‌دهید به وسیله انجام‌دادن یاد بگیرید، به آموزش عملی ما نگاهی بیاندازید. شاید این راهنما و آن آموزش برای شما مکمل یکدیگر باشند.

این اولین فصل از راهنمای گام‌به‌گام درباره مفاهیم اصلی ری‌اکت است. شما می‌توانید لیستی از تمام سرفصل‌ها را در نوار کناری مشاهده‌ کنید. اگر با موبایل درحال خواندن این راهنما هستید، با زدن دکمه در گوشه پایین سمت چپ صفحه می‌توانید به منو دسترسی پیدا کنید.

هر فصل در این راهنما براساس دانش معرفی‌شده در فصل‌های پیشین بنا می‌شود. شما می‌توانید بیشتر ری‌اکت را با مطالعه فصل‌های راهنمای “مفاهیم اصلی” به ترتیبی که در نوار کناری آورده‌‌ شده است، یاد بگیرید. برای مثال، “مقدمه‌ای بر JSX” فصل بعدی بعد از این فصل است.

فرض‌های سطح دانش

ری‌اکت یک کتابخانه جاوااسکریپت است، و بنابراین ما فرض می‌کنیم که شما درک پایه‌ای از زبان جاوااسکریپت دارید. اگر خیلی مطمئن نیستید، پیشنهاد می‌کنیم یک آموزش جاوااسکریپت را طی کنید تا سطح دانش خود را بررسی کنید و بتوانید این راهنما را بدون گمراهی دنبال کنید. این کار ممکن است برای شما بین ۳۰ دقیقه تا یک ساعت به طول بیانجامد، اما در نتیجه این حس را نخواهید داشت که [با خواندن این راهنما] ری‌اکت و جاوااسکریپت را همزمان یاد می‌گیرید.

نکته

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

بیایید شروع کنیم!

به پایین اسکرول کردن ادامه دهید و لینک فصل بعدی این راهنما را پیش از footer وبسایت پیدا می‌کنید.