{"componentChunkName":"component---src-templates-docs-js","path":"/docs/hello-world.html","result":{"data":{"markdownRemark":{"html":"<p>کوچکترین مثال ری‌اکت شبیه این است:</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\">ReactDOM<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Hello, world!</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">,</span>\n  document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'root'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>این مثال یک عنوان را روی صفحه نمایش می‌دهد که می‌گوید: “Hello, world!”</p>\n<p><strong><a href=\"/redirect-to-codepen/hello-world\" target=\"_blank\" rel=\"noreferrer\">روی CodePen امتحان کنید</a></strong></p>\n<p>روی لینک بالا کلیک کنید تا یک ویرایشگر آنلاین باز شود. هر تغییری که می‌خواهید اعمال کنید و تاثیر آن را بر خروجی مشاهده کنید. بیشتر صفحات در این راهنما، مثال‌های قابل ویرایشی مانند بالا دارند.</p>\n<h2 id=\"how-to-read-this-guide\"><a href=\"#how-to-read-this-guide\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>چگونه این راهنما را بخوانیم </h2>\n<p>در این راهنما، ما به بررسی اجزا سازنده برنامه‌های ری‌اکت یعنی: المنت‌ها و کامپوننت‌ها می‌پردازیم. زمانی که شما به آن‌ها مسلط شوید، می‌توانید برنامه‌های پیچیده را از تکه‌های کوچکتر با قابلیت استفاده مجدد بسازید.</p>\n<blockquote>\n<p>راهنما</p>\n<p>این راهنما برای افرادی طراحی شده‌است که ترجیح می‌دهند <strong>مفاهیم را گام‌به‌گام بیاموزند</strong>. اگر شما ترجیح می‌دهید به وسیله انجام‌دادن یاد بگیرید، به <a href=\"/tutorial/tutorial.html\">آموزش عملی</a> ما نگاهی بیاندازید. شاید این راهنما و آن آموزش برای شما مکمل یکدیگر باشند.</p>\n</blockquote>\n<p>این اولین فصل از راهنمای گام‌به‌گام درباره مفاهیم اصلی ری‌اکت است. شما می‌توانید لیستی از تمام سرفصل‌ها را در نوار کناری مشاهده‌ کنید. اگر با موبایل درحال خواندن این راهنما هستید، با زدن دکمه در گوشه پایین سمت چپ صفحه می‌توانید به منو دسترسی پیدا کنید.</p>\n<p>هر فصل در این راهنما براساس دانش معرفی‌شده در فصل‌های پیشین بنا می‌شود. <strong>شما می‌توانید بیشتر ری‌اکت را با مطالعه فصل‌های راهنمای “مفاهیم اصلی” به ترتیبی که در نوار کناری آورده‌‌ شده است، یاد بگیرید.</strong> برای مثال، <a href=\"/docs/introducing-jsx.html\">“مقدمه‌ای بر JSX”</a> فصل بعدی بعد از این فصل است.</p>\n<h2 id=\"knowledge-level-assumptions\"><a href=\"#knowledge-level-assumptions\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>فرض‌های سطح دانش </h2>\n<p>ری‌اکت یک کتابخانه جاوااسکریپت است، و بنابراین ما فرض می‌کنیم که شما درک پایه‌ای از زبان جاوااسکریپت دارید. <strong>اگر خیلی مطمئن نیستید، پیشنهاد می‌کنیم <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">یک آموزش جاوااسکریپت را طی کنید</a> تا سطح دانش خود را بررسی کنید</strong> و بتوانید این راهنما را بدون گمراهی دنبال کنید. این کار ممکن است برای شما بین ۳۰ دقیقه تا یک ساعت به طول بیانجامد، اما در نتیجه این حس را نخواهید داشت که [با خواندن این راهنما] ری‌اکت و جاوااسکریپت را همزمان یاد می‌گیرید.</p>\n<blockquote>\n<p>نکته</p>\n<p>این راهنما در اغلب مثال‌ها از نگارش جدید جاوااسکریپت استفاده می‌کند. اگر در چند سال اخیر با جاوااسکریپت کار نکرده‌اید، <a href=\"https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">این سه مورد</a> بیشتر موارد را به شما یاد می‌دهد.</p>\n</blockquote>\n<h2 id=\"lets-get-started\"><a href=\"#lets-get-started\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>بیایید شروع کنیم! </h2>\n<p>به پایین اسکرول کردن ادامه دهید و لینک <a href=\"/docs/introducing-jsx.html\">فصل بعدی این راهنما</a> را پیش از footer وبسایت پیدا می‌کنید.</p>","frontmatter":{"title":"سلام دنیا","next":"introducing-jsx.html","prev":"cdn-links.html"},"fields":{"path":"content/docs/hello-world.md","slug":"docs/hello-world.html"}}},"pageContext":{"slug":"docs/hello-world.html"}},"staticQueryHashes":[]}