https://virgool.io/feed/@learnreact ما ترجمه مستندات React js رو به زبان فارسی میذاریم تا شما به راحتی یاد بگیرید و پیشرفت کنید.خوشحال میشیم بعد خوندن مطالب ما نظرت رو به ما بگی:) learnreactapp.com fa 2026-06-10 15:23:52 https://files.virgool.io/upload/users/90268/avatar/2atSC7.png?height=120&width=120 https://virgool.io/@learnreact https://virgool.io/@learnreact/%D9%87%D8%B1-%DA%86%D9%87-%D8%AA%D8%A7-%DA%A9%D9%86%D9%88%D9%86-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-react17-%DA%AF%D9%81%D8%AA%D9%87-%D8%A7%D9%86%D8%AF-azduw3kliyqu React v17.0 کاندیدای انتشار: هیچ ویژگی جدیدی نداریدامروز انتشار اولین نامزد نسخه React 17. را منتشر می کنیم. دو سال و نیم از انتشار نسخه اصلی قبلی React می گذرد ، که حتی با توجه به استانداردهای ما مدت زمان طولانی است! در این پست وبلاگ ، ما نقش این نسخه اصلی را شرح می دهیم ، چه تغییراتی می توانید در آن انتظار داشته باشید ، و چگونه می توانید این نسخه را امتحان کنید.هیچ ویژگی جدیدنسخه React 17 غیرمعمول است زیرا هیچ ویژگی جدیدی را برای توسعه دهنده اضافه نمی کند. در عوض ، این نسخه در درجه اول در آسانتر کردن به روزرسانی خود React متمرکز است.ما به طور جدی روی ویژگی های جدید React کار می کنیم ، اما آنها جزئی از این نسخه نیستند. نسخه React 17 بخش مهمی از استراتژی ما برای بیرون کشیدن آنها بدون ترک کسی است.به طور خاص ، React 17 نسخه ای از “سنگ پله” است که باعث می شود درختکاری که توسط یک نسخه از React در داخل یک درخت اداره می شود با نسخه دیگری از React ، امن تر کند.ارتقاء تدریجیبرای هفت سال گذشته ، به روز رسانی های React “all-or-nothing ” بوده اند. یا در نسخه قدیمی بمانید ، یا کل برنامه خود را به نسخه جدید ارتقا می دهید. هیچ تفاوتی بین هم وجود نداشت.این کار تاکنون به نتیجه رسیده است ، اما ما در حال محدود کردن استراتژی ارتقاء “all-or-nothing” هستیم. بعنوان مثال ، برخی از تغییرات API ، با استرداد legacy context API ، به روش اتوماتیک غیرممکن هستند. حتی اگر اکثر برنامه هایی که امروز نوشته شده اند هرگز از آنها استفاده نمی کنند ، ما هنوز هم در React از آنها پشتیبانی می کنیم. ما باید بین پشتیبانی از آنها در React نامحدود تصمیم بگیریم یا برخی از برنامه ها را در نسخه قدیمی React پشت سر بگذاریم. هر دو گزینه عالی نیستند.بنابراین ما می خواستیم گزینه دیگری ارائه دهیم.React 17 ارتقاء تدریجی React را فعال می کند. وقتی از React 15 به ۱۶ ارتقا می دهید (یا به زودی ، از React 16 به ۱۷) ، معمولاً کل برنامه خود را یک باره ارتقا می دهید. این برای بسیاری از برنامه ها خوب کار می کند. اما اگر پایه کد بیش از چند سال پیش نوشته شده باشد و به طور فعال حفظ نشود ، می تواند به طور فزاینده ای چالش برانگیز باشد. و در حالی که می توان از دو نسخه React در صفحه استفاده کرد ، تا React 17 این شکننده بوده و باعث بروز مشکلاتی در رویدادها شده است.ما بسیاری از این مشکلات را با React 17. برطرف می کنیم. این بدان معنی است که وقتی React 18 و نسخه های بعدی بعدی بیرون بیایند ، اکنون گزینه های بیشتری خواهید داشت. اولین گزینه این خواهد بود که مانند قبل از این ، کل برنامه خود را به طور همزمان آپدیت کنید. اما شما همچنین می توانید گزینه ارتقاء برنامه خود را به صورت تکه داشته باشید. به عنوان مثال ، شما ممکن است تصمیم بگیرید که بیشتر برنامه خود را به React 18 منتقل کنید ، اما برخی lazy-loaded dialog یا زیربنایی را در React 17 نگه دارید.این بدان معنا نیست که باید ارتقاء تدریجی را انجام دهید. برای اکثر برنامه ها ، بروزرسانی همه به یکباره هنوز بهترین راه حل است. بارگیری دو نسخه React – حتی اگر یکی از آنها به تنهایی بارگیری شود – هنوز ایده آل نیست. با این حال ، برای برنامه های بزرگتر که به طور فعال نگهداری نمی شوند ، ممکن است این گزینه در نظر گرفته شود و React 17 این برنامه ها را قادر می سازد از کار خود عقب نمانند.برای فعال کردن به روزرسانی های تدریجی ، ما نیاز به تغییراتی در سیستم رویداد React داریم. React 17 یک نسخه اصلی است زیرا این تغییرات به طور بالقوه در حال شکستن است. در عمل ، ما فقط از ۱۰۰۰۰۰+ فقط باید بیست مؤلفه را تغییر دهیم ، بنابراین انتظار داریم اکثر برنامه ها بدون مشکل خیلی زیاد بتوانند به React 17 ارتقا دهند. اگر مشکلی پیش آمد ، به ما بگویید.Demo of Gradual Upgradesنسخه ی نمایشی ارتقاء تدریجیما یک example repository را آماده کرده ایم که نشان می دهد چگونه لزوم بارگذاری نسخه قدیمی React در صورت لزوم را بارگیری کنیم. این نسخه ی نمایشی از Creat React App استفاده می کند ، اما باید با هر ابزار دیگری روش مشابهی را دنبال کرد. ما از نسخه های نمایشی با استفاده از ابزارهای دیگر به عنوان درخواست های کشش استقبال می کنیم.توجه داشته باشیدما تغییرات دیگر را به بعد از React 17. موکول کرده ایم. اگر ارتقاء به React 17 بسیار دشوار بود ، هدف خود را از دست می داد.Changes to Event Delegationاز نظر فنی ، همواره می توان برنامه های تولید شده با نسخه های مختلف React را developed کرد. با این حال ، به دلیل نحوه عملکرد سیستم رویداد React بسیار شکننده بود.در components های React ، معمولاً event handlers را بصورت خطی می نویسید:<button ={handleClick}>معادل DOM وانیل با این کد چیزی شبیه به:myButton.addEventListener('click', handleClick);با این حال ، برای اکثر رویدادها ، React در واقع آنها را به DOM nodes که شما آنها را اعلام می کنید متصل نمکند. درعوض ، React به هر نوع رویداد به طور مستقیم در document node متصل می شود. به این هیئت رویداد گفته می شود. علاوه بر مزایای عملکرد آن در درختان برنامه های بزرگ ، افزودن ویژگی های جدید مانند پخش مجدد رویدادها را نیز آسان تر می کند.React از نخستین فعالیت خود به طور خودکار event delegation را انجام می دهد. هنگامی که یک رویداد DOM روی document انجام می گیرد ، در مورد اینکه کدام component را فراخوانی کنید ، و سپس React event “bubbles” به سمت بالا از طریق components شما. اما در پشت صحنه ، در native event قبلاً در سطح document جبران نشده است ، جایی که React event handlers خود را نصب می کند.با این حال ، این یک مشکل برای ارتقاء تدریجی است.اگر چندین نسخه React در صفحه دارید ، همه آنها در بالای صفحه event handlers را ثبت می کنند. این ()breaks e.stopPropagation : اگر یک درخت تو در تو متوقف شود انتشار یک رویداد ، درخت بیرونی هنوز آن را دریافت می کند. این امر nest نسخه های مختلف React را دشوار کرده است. این نگرانی فرضی نیست – به عنوان مثال ، ویرایشگر Atom به این چهار سال پیش رسید.به همین دلیل در حال تغییر دادن چگونگی اتصال React به DOM در زیر hood هستیم.در React 17 ، React دیگر مجریان رویداد را در سطح سند پیوست نمی کند. در عوض ، آنها را به ظرف DOM ریشه ای که درخت React شما در آن قرار دارد متصل می کند:const rootNode = document.getElementById('root'); ReactDOM.render(<App />, rootNode);در React 16 و قبل از آن ، React برای اکثر رویدادها () dokument.addEventListener را انجام می دهد. در عوض React 17 به جای ()rootNode.addEventListener در زیر hood قرار خواهد گرفت.sandbox را ببینید.No Event PoolingReact 17 بهینه سازی ” event pooling” را از React حذف می کند. این کار باعث بهبود عملکرد در مرورگرهای مدرن نمی شود و حتی کاربران با تجربه React را گیج می کند:function handleChange(e) { setData(data => ({ ...data, // This crashes in React 16 and earlier: text: e.target.value })); }این امر به این دلیل است که React برای عملکرد در مرورگرهای قدیمی از event objects بین رویدادهای مختلف استفاده مجدد کرده و همه زمینه های رویداد را تنظیم می کند تا بین آنها خنثی شود. برای استفاده صحیح از این رویداد ، با React 16 و قبل از آن ، باید با ()e.persist ارتباط بگیرید یا property مورد نیاز خود را زودتر بخوانید.در React 17 ، این کد همانطور که انتظار دارید کار می کند. بهینه سازی جمع آوری رویداد قدیمی کاملاً از بین رفته است ، بنابراین می توانید event fields را هر زمان که بخواهید بخوانید.این یک تغییر behavior است ، به همین دلیل ما آن را به عنوان breaking علامت گذاری می کنیم ، اما در عمل شاهد آن نبودیم که در فیس بوک چیزی خراب کند. (شاید حتی برخی از اشکالات را برطرف کند!) توجه داشته باشید که ()e.persist هنوز هم در مورد رویداد React موجود است ، اما اکنون کاری انجام نمی دهد.Effect Cleanup Timingما زمان تابع پاکسازی useEffect را بیشتر می کنیم.useEffect(() => { // This is the effect itself. return () => { // This is its cleanup. }; });بیشتر جلوه ها نیازی به تأخیر در بروزرسانی های صفحه ندارند ، بنابراین React به زودی پس از نمایش به روزرسانی روی صفحه ، آنها را به صورت غیرهماهنگ اجرا می کند. (برای موارد نادری که برای مسدود کردن رنگ به جلوه ای نیاز دارید ، به عنوان مثال برای اندازه گیری و قرار دادن یک ابزار ابزار ، استفاده از LayoutEffect را ترجیح دهید.)با این حال ، عملکرد effect cleanup ، هنگامی که وجود دارد ، استفاده می شود به صورت همزمان در React 16. ما متوجه شده ایم که ، مشابه با componentWillUnmount در کلاسها همزمان است ، این برای برنامه های بزرگتر ایده آل نیست زیرا باعث کاهش سرعت صفحه بزرگ می شود (به عنوان مثال switching tabs).در React 17 ، عملکرد effect cleanup نیز به صورت غیر همزمان انجام می شود – به عنوان مثال ، اگر component برداشته شود ، پس از به روزرسانی صفحه ، پاکسازی اجرا می شود.این نشان دهنده چگونگی نزدیک تر effects های خود است. در موارد نادری که ممکن است بخواهید به اجرای همزمان متکی شوید ، به جای آن می توانید به useLayoutEffect تغییر دهید.توجه داشته باشیدممکن است از شما سؤال شود که آیا این بدان معنی است که اکنون نمی توانید هشدارهای مربوط به setState را در مورد unmounted components برطرف کنید. نگران نباشید – به طور خاص برای این مورد بررسی کنید و هشدارهای setState را در فاصله کوتاهی بین برچیدن و پاکسازی فراخوانی نکنید. بنابراین درخواست ها یا بازه های لغو کد تقریباً همیشه یکسان هستند.علاوه بر این ، React 17 با توجه به موقعیت آنها در درخت ، توابع پاکسازی را به همان ترتیب اثرات انجام می دهد. پیش از این ، این سفارش گاها متفاوت بود.Potential Issuesما فقط دیده ایم که چند components با این تغییر و تحول شکسته اند ، اگرچه ممکن است کتابخانه های قابل استفاده مجدد برای آزمایش دقیق تر آن نیاز داشته باشند. یک نمونه از کد مشکل دار ممکن است به صورت زیر باشد:useEffect(() => { someRef.current.someSetupMethod(); return () => { someRef.current.someCleanupMethod(); }; });مشکل این است که برخی از Ref.current قابل تغییر است ، بنابراین تا زمانی که عملکرد پاک سازی اجرا شود ، ممکن است تنظیم null باشد. راه حل این است که هر مقدار قابل تغییر در effect را capture کنید:useEffect(() => { const instance = someRef.current; instance.someSetupMethod(); return () => { instance.someCleanupMethod(); }; });ما انتظار نداریم که این یک مشکل شایع باشد زیرا ما eslint-plugin-react-hooks/exhaustive-deps قانون lint (مطمئن شوید که از آن استفاده می کنید!) همیشه درباره این موضوع هشدار داده است.Consistent Errors for Returning Undefinedدر React 16 و قبل از آن ، بازگشت undefined همیشه خطایی بوده است:function Button() { return; // Error: Nothing was returned from render }این تا حدودی به این دلیل است که بازگشت undefined آسان است:function Button() { // We forgot to write return, so this component returns undefined. // React surfaces this as an error instead of ignoring it. <button />; }پیش از این ، React این کار را فقط برای کلاس ها و function components ها انجام داد است، اما return مقادیر forwardRef و memo کامپوننت ها را بررسی نکرده بود. این به دلیل یک خطای کد نویسی بود.در React 17 ، رفتار برای forwardRef و memo های پیش زمینه با function منظم و class components سازگار است. بازگشت نامشخص از آنها خطایی است.let Button = forwardRef(() => { // We forgot to write return, so this component returns undefined. // React 17 surfaces this as an error instead of ignoring it. <button />; }); let Button = memo(() => { // We forgot to write return, so this component returns undefined. // React 17 surfaces this as an error instead of ignoring it. <button />; });برای مواردی که می خواهید عمداً چیزی را ارائه ندهید ، به جای آن null شوید.Native Component Stacksوقتی خطایی را در مرورگر پرتاب می کنید ، مرورگر اثری از stack را با نام عملکرد JavaScript و locations آنها به شما می دهد. با این حال ، stack های JavaScript اغلب برای تشخیص مشکل کافی نیستند زیرا سلسله مراتب درخت React می تواند به همان اندازه مهم باشد. شما می خواهید بدانید نه تنها یک Button خطایی را ایجاد کرده است ، بلکه در کجای درخت React آن Button قرار دارد.برای حل این مشکل ، React 16 هنگام خطا چاپ ” component stacks” را شروع کرد. با این وجود ، آنها قبلاً نسبت به stacks های جاوا اسکریپت native پایین نبودند. به ویژه ، آنها در کنسول قابل کلیک نیستند زیرا React نمی دانست که عملکرد در کد منبع کجا اعلام شده است. علاوه بر این ، آنها عمدتا در تولید بی فایده بودند. بر خلاف stacks های معمولی جاوا اسکریپت که به طور خودکار می توانند به اسامی کارکرد اصلی با یک برگه اصلی برگردانده شوند ، با React component stacks باید بین stacks های تولید و اندازه بسته نرم افزاری را انتخاب کند.در React 17 ، stacks کامپوننت ها را با استفاده از مکانیسم متفاوتی ایجاد می شوند که آنها را از stacks های معمولی JavaScript بطور کامل متصل می کند. با این کار می توانید ردپاهای کاملاً نمادی React component stack را در یک محیط تولید به دست آورد.نحوه اجرای React تا حدودی غیرقابل توصیف است. در حال حاضر ، مرورگرها راهی برای به دست آوردن قاب stack یک تابع (source file and location) ارائه نمی دهند. بنابراین هنگامی که React خطایی را به خود جلب کند ، اکنون می توانید component stack خود را با throwing (و catching ) خطای موقتی از داخل هر یک از components های بالا ، هنگامی که امکان پذیر باشد ، بازسازی کنید. این یک جریمه عملکرد کوچک برای تصادفات اضافه می کند ، اما فقط یک بار در هر نوع component اتفاق می افتد.اگر کنجکاو هستید ، می توانید جزئیات بیشتری را در این درخواست کشش بخوانید ، اما بیشتر این مکانیسم دقیق نباید روی کد شما تأثیر بگذارد. از دید شما ، ویژگی جدید این است که component stacks اکنون قابل کلیک هستند (زیرا آنها به stack frames مرورگر native تکیه می کنند) ، و این که شما می توانید مانند خطاهای JavaScript معمولی ، آنها را در تولید رمزگشایی کنید.بخشی که تغییر مهمی را ایجاد می کند این است که برای این کار ، React قسمت هایی از برخی از React functions و constructors کلاس React را در stack پس از گرفتن خطا مجدداً اجرا می کند. از آنجا که عملکردهای رندر و constructors کلاس نباید عوارض جانبی داشته باشند (که این نیز برای ارائه سرور مهم است) ، این نباید مشکلی عملی ایجاد کند.Removing Private Exportsسرانجام ، آخرین تغییر مهم قابل توجه این است که ما تعدادی از داخلی های React را که قبلاً در معرض سایر پروژه ها قرار داشتند حذف کرده ایم. به طور خاص ، React Native برای وب به بعضی از داخلی های سیستم event وابسته بود ، اما این وابستگی شکننده بود و برای شکستن استفاده می شد.در React 17 ، این exports خصوصی حذف شده است. تا آنجا که ما آگاه هستیم ، React Native for Web تنها پروژه ای بود که از آنها استفاده می کرد و آنها قبلاً مهاجرت را به رویکرد دیگری انجام داده اند که به این exports خصوصی بستگی ندارد.این بدان معنی است که نسخه های قدیمی تر React Native برای وب با React 17 سازگار نیستند ، اما نسخه های جدیدتر با آن کار خواهند کرد. در عمل ، این تغییر چندانی نمی کند زیرا React Native برای وب مجبور بود نسخه های جدیدی را منتشر کند تا به هر حال با تغییرات داخلی React سازگار شود.علاوه بر این ، ما روش های کمکی ReactTestUtils.SimulateNative را حذف کرده ایم. آنها هرگز مستند نشده اند ، دقیقاً آنچه را که نام آنها نشان می دهد انجام نداده اند ، و با تغییراتی که ما در سیستم رویداد ایجاد کرده ایم کار نکردند. اگر می خواهید یک روش مناسب برای آتش زدن حوادث مرورگر بومی (fire native browser events )در تست ها باشید ، به جای آن ، از کتابخانه React Test استفاده کنید.Installationما شما را تشویق می کنیم تا به زودی سعی کنید نامزد کاندیدای React 17.0 را منتشر کنید و مشکلات دیگری را که ممکن است در هنگام مهاجرت با آنها روبرو شوید مطرح کنید. بخاطر داشته باشید که یک نامزد انتشار احتمالاً دارای اشکالات نسبت به یک نسخه پایدار است ، بنابراین هنوز آن را به production منتقل نکنید.برای نصب React 17 RC با npm ، اجرا کنید:npm install react@17.0.0-rc.0 react-dom@17.0.0-rc.0برای نصب React 17 RC با Yarn ، اجرا کنید:yarn add react@17.0.0-rc.0 react-dom@17.0.0-rc.0ما همچنین از طریق CDN ساخت React از UMD را ارائه می دهیم:<script crossorigin src=&quothttps://unpkg.com/react@17.0.0-rc.0/umd/react.production.min.js&quot> <script crossorigin src=&quothttps://unpkg.com/react-dom@17.0.0-rc.0/umd/react-dom.production.min.js&quot>برای راهنمایی های دقیق نصب ، به اسناد مراجعه کنید.ChangelogReactاضاافه کردن react/jsx-runtime و react/jsx-dev-runtime را برای تبدیل JSX جدید. (lunaruan@ در شماره #۱۸۲۹۹ )ساخت component stacks را از native error frames (sebmarkbage در شماره ۱۸۵۶۱#)دسترسی به مشخص کردن نام DisplayName در context برای improved stacks ها بهبود یافته است. (@ eps1lon در شماره ۱۸۲۲۴#)React DOMبه جای document ، events ها را به roots بزنید. (trueadm در شماره ۱۸۱۹۵ و دیگران)قبل از اجرای هر effects بعدی ، همه effects را تمیز می شود. (bvaughn در شماره ۱۷۹۴۷#)توابع پاکسازی useEffect را بصورت غیر همزمان اجرا می شود. (bvaughn در شماره ۱۷۹۲۵#)از focusin و focusout مرورگر برای و استفاده کنید. (trueadm در شماره ۱۹۱۸۶#)از همه Capture events استفاده کنید و از مرحله browser capture استفاده کنید. (trueadm در شماره ۱۹۲۲۱#)bubbling از event را تقلید نکنید. (gaearon در # ۱۹۴۶۴)اگر forwardRef یا memo component نامعلوم (undefined)برمی گردد ، پرتاب کنید. (gaearon در # ۱۹۵۵۰)حذف event pooling. (trueadm در شماره # ۱۸۹۶۹)جلوی exposing داخلی ها را بگیرید که توسط React Native Web نیازی به آن نخواهید داشت. (necolas در شماره ۱۸۴۸۳#)غیرفعال کردن console در render دوم رندر حالت DEV دو render. (sebmarkbage در # ۱۸۵۴۷)Deprecate شدن undocumented و misleading در SimulateNative و ای پی ها . (gaearon در شماره ۱۳۴۰۷)تغییر نام private field و نام مورد استفاده داخلی (gaearon در شماره ۱۸۳۷۷#)در حال توسعه با API Timing کاربر ارتباط نگیرید. (gaearon در شماره ۱۸۴۱۷#)غیرفعال کردن console در طول رندر تکراری در Strict Mode. (sebmarkbage در # ۱۸۵۴۷)در Strict Mode ، کامپوننت double-render را نیز بدون Hooks نیز ارائه می دهند. (@ eps1lon در شماره ۱۸۴۳۰#)در طی lifecycle methods با flushSync ارتباط برقرار کنید (اما هشدار دهید). (sebmarkbage در شماره ۱۸۷۵۹)code property را به event objects صفحه کلید اضافه شد. (@ bl00mber در شماره ۱۸۲۸۷#)ویژگی عناصر disableRemotePlayback را برای video elements اضافه شد. (tombrowndev در شماره ۱۸۶۱۹#)enterKeyHint property را برای input elements اضافه شد. (@ eps1lon در شماره ۱۸۶۳۴#)هنگامی که هیچ value به <Context.Provider> ارائه نشده است هشدار می دهید. (@ charlie1404 در شماره ۱۹۰۵۴#)هشدارچه موقعه memo یا forwardRef components برمی گرداند undefined . (bvaughn در ۱۹۵۵۰#)پیام خطا را برای به روزرسانی های نامعتبر بهبود یافته است. (JoviDeCroock در شماره ۱۸۳۱۶#)forwardRef و memo را از stack frames جدا شده است. (sebmarkbage در شماره ۱۸۵۵۹#)هنگام جابجایی بین ورودی های کنترل شده و کنترل نشده ، پیام خطا را بهبود بخشیده است. (vcarl در شماره ۱۷۰۷۰#)Fix setState در حال توسعه در داخل یک iframe بسته. (gaearon در شماره ۱۹۲۲۰#)Fix rendering کمکی برای lazy components با defaultProps رفع شده. (jddxf در شماره ۱۸۵۳۹#)فیکس یک غلط مثبت هشدار dangerouslySetInnerHTML که undefined است (@ eps1lon در شماره ۱۸۶۷۶#)رفع وسایل تست با غیر استاندارد require به اجرای دارد. (@ just-boris در شماره ۱۸۶۳۲#)رفع گزارش onBeforeInput از type نادرست. (@ eps1lon در # ۱۹۵۶۱)برای رویدادهای و از delegation استفاده کنید. (gaearon در # ۱۹۳۳۳)استفاده از memory را بهبود بخشیده شده است. (trueadm در شماره ۱۸۹۷۰#)React DOM Serverساخت useCallback مطابق با رفتار useMemo برای server renderer ایجاد شده است. (alexmckenley در شماره ۱۸۷۸۳#)رفع state leaking هنگام پرتاب یک function component . (pmaccart در شماره # ۱۹۲۱۲)React Test Rendererپیام خطای findByType را بهبود بخشید شد. (henryqdineen در شماره ۱۷۴۳۹#)منبع ترجمهما در سایتمون آموزش React js به زبان فارسی قراردادیم خوشحال میشیم به سایت سر بزنی و نظرت رو بگی:) learnreact learnreact Thu, 20 Aug 2020 20:12:39 +0430 https://virgool.io/@learnreact/state-and-lifecycle-in-react-js-hi5qdak3ryl9 در این صفحه مفهوم  state و lifecycle در یک component React معرفی می شود.مثال ساعت را از بخش های قبلی درنظر بگیرید. در Rendering Elements، ما فقط یک راه برای بروز رسانی UI آموختیم. ما برای تغییر در خروجی رندر شده با ()ReactDOM.render ارتباط می گیریم :function tick() {const element = (<div><h1>Hello, world!</h1><h2>It is {new Date().toLocaleTimeString()}.</h2></div>);ReactDOM.render(element,document.getElementById('root'));}​setInterval(tick, 1000);کد را در CodePen امتحان کنید.در این بخش، ما یاد خواهیم گرفت که چگونه کامپوننت Clock را واقعا قابل استفاده مجدد و محصور کنیم. تایمر خود را تنظیم می کند و هر ثانیه خود را بروز می کند.ما می توانیم از این که چگونه ساعت به نظر می رسد شروع کنیم:function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(tick, 1000);کد را در CodePen امتحان کنید.با این حال، این  یک نیاز اساسی را از دست می دهد: این واقعیت که Clock یک تایمر تنظیم می کند و UI را در هر ثانیه به روز می کند ، باید جزئیات اجرای Clock باشد.درحالت ایده آل می خواهیم یک بار بنویسید و خود Clock به روز رسانی را داشته باشد:ReactDOM.render( <Clock />, document.getElementById('root') );برای پیاده سازی این، باید “state” را به Clock component اضافه کنیم.State شبیه به prop ها هستند، اما خصوصی (private) است و کاملا توسط آن کنترل می شود.تبدیل یک فانکشنال کامپوننت  به کلاس کامپوننت | Converting a Function to a Class in react jsمی توانید یک function component مانند Clock را در پنج مرحله به class component تبدیل کنید:یک کلاس ES6 با همان نام ایجاد کنید، که از Reqact.Component گسترش (extends) می دهد.یک متد ()render خالی اضافه کنید .بدنه function را به متد ()render منتقل کنید.Props ها را با this.props در بدنه ()render جایگزین کنید.باقی function مانده خالی را حذف کنید.class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.props.date.toLocaleTimeString()}.</h2> </div> ); } }کد را در CodePen امتحان کنید.حالا Clock را به عنوان یک class تعریف شده نه یک functionدر هر بار که یک  بروز رسانی اتفاق می افتد متد render فرار خوانده می شود، اما تا زمانی که render کنیم <Clock /> با همان DOM node ، فقط یک نمونه از کلاس Clock استفاده خواهد شد.این به ما امکان می دهد از ویژگی های اضافه مانند local state و lifecycle methods استفاده کنیم.اضافه کردن Local State به کلاس کامپوننت | Adding Local State to a Classما date را از props به state در سه مرحله انتقال می دهیم:جایگزین this.props.date با this.state.date در متد ()render.class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }به کلاس یک constructor اضافه کنید که this.state اولیه را اختصاص دهید:class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }توجه کنید که چگونه props را به constructor می دهیم:constructor(props) { super(props); this.state = {date: new Date()}; }Class component ها همیشه باید با constructor و props در ارتباط باشد.Date را حذف prop از </Clock> المنت:ReactDOM.render( <Clock />, document.getElementById('root') );بعدا کد تایمر را به خود component اضافه خواهیم کرد.نتیجه به نظر می رسد:class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') );کد را در CodePen امتحان کنید.در مرحله بعد، ما Clock  را تنظیم خواهیم کرد که هر ثانیه خود را به روز می کنیم.اضافه کردن متدهای Lifecycle به یک کلاس کامپوننت | Adding Lifecycle Methods to a Class componentدر برنامه ها بسیاری از component ها، آزاد کردن منابع که توسط component ها هنگام حذف شدن گرفته می شود بسیار مهم است.هروقت که Clock برای بار اولین بار در DOM رندر می شود می خواهیم یک تایمر تنظیم کنیم. در react به “mounting” گفته می شود.ما همچنین می خواهیم هر زمان که DOM تولید شده توسط Clock براشته شد، این تایمر را پاک کنیم. در React این را “unmounting” گفته می شود.ما می توانیم متدهای ویژه ای را درclass component  برای اجرای برخی کدها هنگام mounts و unmounts در کامپوننت اجرا کنیم :class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { } componentWillUnmount() { } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }این متدها “lifecycle methods” نامیده می شوند.متد ()componentDidMount بعد از رندر خروجی component در DOM اجرار می شود. این مکان مناسب برای تنظیم تایمر است :componentDidMount() { this.timerID = setInterval( () => this.tick(), ۱۰۰۰ ); }توجه کنید که چگونه timer ID را درست در this  مورد ذخیره می کنیم (this.timerID) .درحالی که this.props توسط خود React  تنظیم شده اند و this.state معنای خواصی دارد، اگر نیاز به ذخیره چیزی دارید که در جریان داده ها مشارکت نداشته باشد (مانند شناسه تایمر) می توانید زمینه های (fields) اضافی را به صورت دستی به کلاس اضافه کنید.ما تایمر را به ()componentWillUnmount متدی از lifecycle ترکیب می کنیم:componentWillUnmount() { clearInterval(this.timerID); }سرانجام،  ما متد ()tick را اجرا خواهیم کرد که کامپوننت Clock هر ثانیه اجرا می شود.از ()this.setState برای برنامه ریزی بروز رسانی های  local state کامپوننت استفاده خواهیم کرد:class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), ۱۰۰۰ ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') );این کد را در CodePen امتحان کنید.حالا هر ثاینه ساعت تیک تاک می کند.بیایید سریعاً آنچه را که اتفاق می افتد و نظمی که methods ها خوانده می شوند را دوباره یادآوری کنیم:وقتی < / Clock> به ()render منتقل شد، React کامپوننت سازنده Clock را فراخوانی می کند. از آنجا که Clock باید زمان فعلی را نشان دهد، این this.state را با یک object از جمله زمان فعلی آغاز می کند. بعداً این حالت را به روز خواهیم کرد.سپس React با متد ()render کامپوننت Clock ارتباط می گیرد. اینگونه است که React متوجه می شود چه باید روی صفحه نمایش داده شود. React سپس DOM بروز می کند تا مطابق با خروجی رندر Clock باشد.هنگامی که خروجی Clock در DOM درج می شود ، React از ()componentDidMount متد lifecycle  استفاده می کند.در داخل آن ، کامپوننت Clock از مرورگر می خواهد یک تایمر تنظیم کند تا یک بار در ثانیه با فراخوانی متد کامپوننت ()tick ارتباط برقرار کند.در هر ثانیه مرورگر از متد ()tick استفاده می کند. در داخل آن، Clock component با فراخوانی ()setState با یک object حاوی زمان فعلی، یک بروز رسانی UI را برنامه ریزی می کند. باتشکر از ارتباط با setState()، React می داند  که state تغییر کرده است و دوباره متد ()render را فرا می خواند تا متوجه شود چه چیزی باید روی صفحه باشد. این بار، this.state.date در متد ()render خواهد بود، بنابر این خروجی render شامل زمان بروز می شود. بنا بر این  React بروز رسانی می کند.اگر Clock component از DOM حذف شود، React را با استفاده از ()componentWillUnmount متد lifecycle فراخوانی می کند تا تایمر متوقف شود.استفاده درست از Using State Correctly | Stateسه مورد وجود دارد که باید درباره ()setState بدانید.State را به طور مستقیم ویرایش نکنید | Do Not Modify State Directlyبه عنوان مثال، این یک component را دوباره render نمی دهد:// Wrong this.state.comment = 'Hello';در عوض، از ()setState استفاده کنید:// Correct this.setState({comment: 'Hello'});تنها جای که می توانید ورودی اختصاص دهید به this.state در constructor است.بروزسانی های State ممکن است ناهمزمان باشد | State Updates May Be AsynchronousReact ممکن است چندین فراخوانی ()setState برای عملکرد بروز کند.چون this.Props و this.state ممکن است به صورت غیر همزمان بروز شود، برای محاسبات بعدی نباید به مقادیر آنها عتماد کنید.به عنوان مثال، این کد ممکن است در بروز رسانی counter به مشکل بربخورد :// Wrong this.setState({ counter: this.state.counter + this.props.increment, });برای رفع آن، از فرم دوم ()setState استفاده کنید که یک function را به جای object می پذیرد. این function حالت قبلی (previous state ) را به عنوان اولین argument در یافت می کند، و props ها در زمان بروز رسانی به عنوان argument دوم اعمال می شود :// Correct this.setState((state, props) => ({ counter: state.counter + props.increment }));ما از arrow function در بالا استفاده کردیم، اما با function های معمولی نیز کار می کند:// Correct this.setState(function(state, props) { return { counter: state.counter + props.increment }; });بروزرسانی های State ترکیب می شوند  | State Updates are Mergedوقتی با ()setState ارتباط می گیرید، React آبجکتی را که در state فعلی ارائه می دهد ادغام می شود.به عنوان مثال، state شما ممکن است شامل چندین variables مستقل باشد:constructor(props) { super(props); this.state = { posts: [], comments: [] }; }سپس می توانید با ارتباط های جداگانه ()setState  آنها را به صورت جدا بروز کنید :componentDidMount() { fetchPosts().then(response => { this.setState({ posts: response.posts }); }); fetchComments().then(response => { this.setState({ comments: response.comments }); }); }ادغام کم عمق است ، بنابراین ({this.setState({comments برگها this.state.posts دست نخورده، اما کاملاً جایگزین this.state.comments است.داده ها پایین می رود | The Data Flows Downهیچکدام از component های parent و child نمی تواند بدانند که آیا component خاصی دارای حالت ویا بدون stateless است، و نباید اهمیت دهند که آیا به عنوان یک function  یا یک class تعریف شده است.به همین دلیل است که state معمولا محلی یا محصور نامیده می شود. در دسترس هیچ component غیر از component نیست که آن را در اختیار داشته باشد و آن را تنظیم کند.در یک component ممکن است که state خود را به عنوان props به child خود منتقل کند:<h2>It is {this.state.date.toLocaleTimeString()}.</h2>همچنین برای components های تعریف شده توسط کاربر کار می کند:<FormattedDate date={this.state.date} />کامپوننت FormattedDate تاریخ را در props دریافت می کند و نمی داند که آیا آن از نظر state Clock’s آمده است، از Clock’s props با دست تایپ شد:function FormattedDate(props) { return <h2>It is {props.date.toLocaleTimeString()}.</h2>; }این کد را در CodePen امتحان کنید.این معمولا یک جریان داده “از بالا به پایین” (top-down ) یا “یک طرفه” ( unidirectional ) نامیده می شود. هر state همیشه متعلق به یک component خا ص است، و هر داده یا UI حاصل از آن می تواند بر state “زیر” ( below ) درخت تاثیر بگذارد.اگر یک  component را به عنوان یک درخت و props را به عنوان یک آبشار  کنید، state هر component’s مانند یک آب اضافی است که در یک نقطه دلخواه به آن می پیوندد، بلکه به پایین جریان می یابد.برای نشان دادن اینکه همه component ها واقعاً جدا هستند ، ما می توانیم یک App component ایجاد کنیم که سه <Clock> را ارائه می دهد:function App() { return ( <div> <Clock /> <Clock /> <Clock /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') );این کد را در CodePen امتحان کنید.هر Clock  تایمر خود را تنظیم می کند و به طور مستقل به روز می شود.در برنامه های React ، این که آیا یک component  حالت پذیر یا بی تابعیت است (stateful or stateless )  ، جزئیات اجرای component  است که ممکن است با گذشت زمان تغییر کند. می توانید از components  بدون تابش (stateless ) در داخل components   های حالت پذیر (stateful ) استفاده کنید ، و برعکس.منبع ترجمهما در سایتمون آموزش React js به زبان فارسی قراردادیم خوشحال میشیم به سایت سر بزنی و نظرت رو بگی:) learnreact learnreact Sun, 14 Jun 2020 18:34:57 +0430 https://virgool.io/@learnreact/components-and-props-in-react-js-wmstoeae2317 Components به شما اجازه می دهد UI را به صورت مستقل تقسیم کنید، درمورد هر Components به قطعات قابل استفاده مجدد و هرقطعه جدا شده فکر کنید. این صفحه مقدمه ای برای ایده components ارائه شده است.از نظر مفهومی، components مانند functions ها در JavaScript هستند. آنها ورودی های دلخواه (بنام  “props”) را می پذیرند و return می کنند React elements و توصیف  می کند آنچه باید روی صفحه ظاهر شود.کامپوننت های فانکشنی و کلاسی | Function and Class Componentsساده ترین روش برای تعریف یک component نوشتن JavaScript function است:function Welcome(props) {return <h1>Hello, {props.name}</h1>;}این function یک React component معتبر است زیرا یک آرگومان “object  “props (که مخفف ویژگی properties است) را با داده می پذیرد و یک React element را برمی گرداند. ما چنین components  های را “function components” می نامیم زیرا آنها به معنای واقعی کلمه JavaScript functions هستند.همچنین می توانید از کلاس ES6 برای تعریف یک component استفاده کنید:class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }دو components بالا از نظر React معادل است.کامپونت های فانکشن و کلاسی هردو ویژگی های دیگری دارند که در بخش های بعدی به آنها خواهیم پرداخت.رندر یک کامپونت | Rendering a Componentپیش از این، ما فقط با  React elements مواجه شدیم که نشانگر DOM tags هستند:const element = <div />;با این حال، elements  همچنین می توانند components تعریف شده توسط کاربر را نمایندگی کنند:const element = <Welcome name=&quotSara&quot />;وقتی React element یک component تعریف شده توسط کاربر را نشان می دهد،  attribute ها و فرزندان JSX را به عنوان یک object به این component منتقل می کند. ما این object را “props” می نامیم.به عنوان مثال، این کد “Hello, Sara” را در صفحه رندر می کند:function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name=&quotSara&quot />; ReactDOM.render( element, document.getElementById('root') );این کد را در CodePen امتحان کنید.بیایید انچه در این مثال اتفاق می افتد را مرور کنیم:ما در ()render المنت < /”Welcome name=”Sara> را صدا زده ایم.React با کامپوننت Welcome با {name: ‘Sara’} به عنوان props ارتباط می گیرد.کامپوننت Welcome یک المنت <h1>Hello, Sara</h1> به عنوان نتیجه return می کنند.React DOM به طور موثر DOM را بروز می کند تا مطابقت داشته باشد با<h1>Hello, Sara</h1>توجه : همیشه نام component را با یک حرف بزرگ شروع کنید.React با component های حروف کوچک به عنوان تگ های DOM شروع می کند. به عنوان مثال، <div /> نشانگر یک تگ div در HTML، اما <Welcome /> یک component را نشان می دهد و Welcome نیاز به بودن در scope دارد.برای کسب اطاعات بیشتر درمورد استدلال این کنواسیون، لطفا JSX را در JSX Depth مطالعه کنید.درست کردن Components Composing | ComponentsComponent ها می تواند به Component دیگری در خروجی  خود مراجعه کنند. این به ما این امکان را می دهد از هر component انتزاعی (abstraction) برای هر سطح استفاده کنیم. یک دکمه، یک فرم، یک صفحه نمایش: در برنامه های React، همه این موارد معمولا به عنوان components بیان می شوند.به عنوان مثال، می توانیم یک component برنامه ایجاد کنیم که بارها Welcome رندر می شود :function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name=&quotSara&quot /> <Welcome name=&quotCahal&quot /> <Welcome name=&quotEdite&quot /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') );این کد را در CodePen امتحان کنید.به طور معمول، برنامه های جدید React دارای یک component برنامه در بالا هستند. با این حال، اگر React را در یک برنامه موجود ادغام کنید، ممکن است از پایین به بالا با یک component کوچک مانند دکمه شروع کنید و به تدریج راه خود را به بالای سلسله مراتب نما کار کنید.استخراج Extracting Components | Componentاز تقسیم component ها به اجزای کوچکتر نترسید.به عنوان مثال، این کامپوننت Comment در نظر بگیرید:function Comment(props) { return ( <div className=&quotComment&quot> <div className=&quotUserInfo&quot> <img className=&quotAvatar&quot src={props.author.avatarUrl} alt={props.author.name} /> <div className=&quotUserInfo-name&quot> {props.author.name} </div> </div> <div className=&quotComment-text&quot> {props.text} </div> <div className=&quotComment-date&quot> {formatDate(props.date)} </div> </div> ); }این کد را در CodePen امتحان کنید.این author ( یک آبجکت)، text (یک string) و date ( یک date) به عنوان props می پذیرد و comment را در یک وب سایت رسانه اجتماعی توصیف می کند.این component به دلیل تودرتویی  می تواند مشکل باشد و استفاده مجدد از قسمت های مختلف آن نیز دشوار است. بیایید چند component از آن استخراج کنیم.اول، Avatar را خارج می کنیم :function Avatar(props) { return ( <img className=&quotAvatar&quot src={props.user.avatarUrl} alt={props.user.name} /> ); }نیازی نیست که Avatar  بداند که در داخل یک Comment ارائه می شود. به همین دلیل است که ما به آن به یک نام عمومی تر گفته ایم: کاربر (user )  و نه نویسنده (author).توصیه می کنیم نام گذاری props از نظر خود component ها انجام دهید نه از نظر متنی که در آن استفاده می شود.اکنون می توانیم Comment کوچک را توضیح دهیم :function Comment(props) { return ( <div className=&quotComment&quot> <div className=&quotUserInfo&quot> <Avatar user={props.author} /> <div className=&quotUserInfo-name&quot> {props.author.name} </div> </div> <div className=&quotComment-text&quot> {props.text} </div> <div className=&quotComment-date&quot> {formatDate(props.date)} </div> </div> ); }در مرحله بعد، ما یک کامپوننت UserInfo را خارج می کنیم  که یک Avatar را درکنار user’s name ارائه می دهد:function UserInfo(props) { return ( <div className=&quotUserInfo&quot> <Avatar user={props.user} /> <div className=&quotUserInfo-name&quot> {props.user.name} </div> </div> ); }این به ما امکان ساده تر کردن Comment را می دهد:function Comment(props) { return ( <div className=&quotComment&quot> <UserInfo user={props.author} /> <div className=&quotComment-text&quot> {props.text} </div> <div className=&quotComment-date&quot> {formatDate(props.date)} </div> </div> ); }این کد را در CodePen امتحان کنید.خارج کردن component ها ممکن است در ابتدا کار ناراحت کننده به نظر برسند، اما داشتن یک palette از کامپوننت  های قابل استفاده مجدد در برنامه های بزرگتر جبران می کند.یک قانون خوب این است که اگر بخشی از رابط کاربری شما چندین بار استفاده می شود (Button, Panel, Avatar) ، یا به تنهایی به اندازه کافی پیچیده است (App, FeedStory, Comment) ، گزینه خوبی است که یک component قابل استفاده مجدد باشد. .Props فقط خواندنی است | Props are Read-Onlyاین که آیا شما یک component  را به عنوان یک function یا یک class تعیین می کنید ، هرگز نباید props خود را اصلاح کند. این function sum را در نظر بگیرید:function sum(a, b) { return a + b; }چنین کارکردهایی را ” pure” خوانده می شوند، زیرا آنها سعی در تغییر ورودی های خود ندارند، و همیشه همان نتیجه را برای ورودی های مشابه رندر می کند.در مقابل ، این function  ناخالص است زیرا ورودی خود را تغییر می دهد:function withdraw(account, amount) { account.total -= amount; }React بسیار انعطاف پذیر است اما یک قانون دقیق و سخت دارد:همه components  های React باید با توجه به props خود مانند فانکشن های خالص (pure) عمل کنند.البته ، رابط کاربر برنامه کاربردی dynamic  بوده و با گذشت زمان تغییر می کند. در بخش بعدی ، مفهوم جدیدی از ” state” را معرفی خواهیم کرد. State  به React components اجازه می دهد تا در واکنش به اقدامات کاربر ، پاسخ های شبکه و هر چیز دیگری ، بدون نقض این قانون ، خروجی خود را تغییر دهند.منبع ترجمه ما در سایت learnreactapp ترجمه مستندات ReactJS رو قرار میدیم خوشحال میشیم به سایت ما سر بزنی و نظرت ورد درمورد مطالب ما بگی:) learnreact learnreact Thu, 04 Jun 2020 12:44:36 +0430 https://virgool.io/@learnreact/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-introducing-jsx-jsx-okjjrhlunbhm این variable را در نظر بگیرید:const element = <h1>Hello, world!</h1>;این نوشتن تگ نه string نه HTML است.به این JSX کفته می شود، ویک syntax در JavaScript است.توصیه می کنیم ازآن در ui برنامه React استفاده کنید. JSX ممکن است یک زبان الگو را به شما یادآوری کند، اما با قدرت کامل JavaScript همراه است.JSX در React یک المنت (elements) تولید می کند. دربخش بعدی نحوه ارائه آنها به DOM را بررسی می کنیم. در زیر می توانید اصول اولیه JSX را برای شروع کار پیدا کنید.چرا JSX ؟ | ?Why JSXReact منطق را در رندر قبول می کند و منطق ui همراه است: نحوه هندل ایونت ها، چگونه state با گذشت زمان تغییر می کند، و نحوه تغییر داده ها برای نمایش.به جای جدا کردن منطق ها و تکنولژی ها با قرار دادن نشانه گذاری  در فایل های جداگانه، react علاقه به مجزا کردن با اتصال آزادانه واحدهای به نام “components” که شامل هردو است. ما در بخش دیگری به components ها برمی گردیم، اما اگر هنوز این طوری نیست قرار دادن نشان گذاری در JS ، در غیر این صورت ممکن است این صحبت شما را متقاعد کند.React نیازی به استفاده از JSX ندارد، اما بیشتر افراد هنگام کار با UI دردرون کد JavaScript آن را به عنوان یک کمک مفید می دانند. همچنین به React امکان نمایش خطاهای و پیام های هشدار دهنده را می دهد.بیایید با این کار شروع کنیم!قرار دادن عبارت در Embedding Expressions in JSX | JSXدر مثال زیر، یک متغییر به نام name تعرف می کنیم و سپس آن را داخل brace قرار داد و در JSX استفاده کرده ایم:const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );می توانید هر عبارت یا متغییر جاوا اسکریپتی را در داخل braces در JSX قرار دهید. به عنوان مثال : ۲+۲ ، (user.firstName ، formatName(user  که همه عبارات متعبر  JavaScript هستند.در مثال زیر، ما نتیجه فراخوانی یک JavaScript function به اسم (formatName(user در یک المنت <h1> قرار داده ایم.function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> ); ReactDOM.render( element, document.getElementById('root') );این کد را در CodePen امتحان کنیدما برای خوانی JSX را در چندین خط تقسیم می کنیم. درحالی که لازم نیست، در هنگام انجام این کار، ما همچنین توصیه می کنیم آن را در داخل پرانتز بذارید تا از خطاهای درج تصادفی جلوگیری کنید.JSX بیش تر از یک Expression است | JSX is an Expression Tooپس از پایان، JSX تبدیل به ارتباط معمولی JavaScript می شوند و به ابجکت جاوااسکریپت تبیدل می شوند.این بدان معنا است که می توانید JSX را در داخل عبارات  (statements) وبرای حلقه ها (loops) استفاده کنید، به متغییر ها (variables) اختصاص دهید، به عنوان آرگمان (arguments) بپذیرید، و return  کنید  از فانکشن ها (functions).function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }مشخص کردن اتریبیوت ها با  Specifying Attributes with JSX | JSXشمامی توانید از عبارات ها به عنوان اتریبیوت رشته مشخص استفاده کنید:const element = <div tabIndex=&quot0&quot></div>;همچنین می توانید از braces برای قرار دادن یک عبارت JavaScript در یک اتریبیوت استفاده کنید.const element = <img src={user.avatarUrl}></img>;هنگام قرار دادن یک عبارت جاوا اسکریپت دریک اتریبیوت پرانتز ها را مجدد قرار ندهید.شما باید از عبارات استفاده کنید (برای مقادیر رشته) یا از براکت (برای عبارات)، اما هر دو در یک  اتریبیوت نیستند.هشدار:از آنجا که JSX به JavaScript نزدیکتر از HTML است ،  React DOM از کنوانسیون نامگذاری ویژگی CamelCase به جای نام attribute  های HTML استفاده می کند.به عنوان مثال ، class  در JSX به className تبدیل می شود و tabindex تبدیل به tabIndex می شود.مشخص کردن فرزند در  Specifying Children with JSX| JSXاگر تگ خالی است، می توانید بلا فاصله آن را با /> مانند XML ببندید:const element = <img src={user.avatarUrl} />;تگ های JSX ممکن است شامل فرزند باشند:const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );JSX از حملات جلوگیری می کند | JSX Prevents Injection Attacksقرار دادن  ورودی کاربران در JSX بی خطر است:const title = response.potentiallyMaliciousInput; // This is safe: const element = <h1>{title}</h1>;به طور پیش فرض، REACT DOM  از مقادیر قرار داده شده در JSX قبل از رندر آنها فرار می کند. بنابر این تضمین می کند شما هرگز نمی توانید چیزی را که به واضح نوشته نشده است را در اپلیکشن خود عمال کنید. قبل از اینکه رندر شود ، همه چیز به یک رشته تبدیل می شود. این کمک می کند تا از حملات (cross-site-scripting(XSS جلوگیری کنید.JSX نمایش دهنده Objects است | JSX Represents Objectsبابل JSX را به ارتباط های ()React.createElement تبدیل می کند.این دو مثال یکسان هستند:const element = ( <h1 className=&quotgreeting&quot> Hello, world! </h1> );const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );()React.createElement چند چک انجام می دهد که شما کد بون اشکال بنویسید اما در اصل یک object  مانند این ایجاد می کند:// Note: this structure is simplified const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } };به این ابجکت “React elements” گفته می شود. می توانید از آنها به عنوان توصیف آنچه می خواهید در صفحه مشاهد کنید بی اندیشید. React این objects  را می خواند و از آنها برای ساخت DOM و به روز نگه داشتن آنها استفاده می کند.ما در بخش بعدی رندر عناصر React را به DOM بررسی خواهیم کرد.نکته:توصیه می کنیم از ویرایشگر زبان “Babel “ برای ویرایشگر مورد نظر خود استفاده کنید تا کد ES6 و JSX به درستی برجسته شود.منبعما در سایتمون ترجمعه مستندات React js به فارسی قرار میدیم خوشحال میشیم نظرت رو درمورد مقاله های ما بگی learnreact learnreact Sun, 17 May 2020 17:57:12 +0430 https://virgool.io/@learnreact/%D8%B3%D8%A7%D8%AE%D8%AA-%D8%B3%D9%84%D8%A7%D9%85-%D8%AF%D9%86%DB%8C%D8%A7-hello-world-%D8%AF%D8%B1-react-js-kct5rfdl6gxj کوچکترین مثال React به نظر می سد:این یک heading با عنوان  “!Hello, world” در صفحه نمایش می دهد.آن را در CodePen امتحان کنید.برای باز کردن ویرایشگر آنلاین روی لینک بالا کلیک کنید. درصورت ایجاد تغییر راحت باشید و ببنید که چگونه بروی خروجی تاثیر می گذارند. بیشتر صفحات این راهنما نمونه های قابل ویرایش این صفحه را دارند.نحوه خواندن این راهنما | How to Read This Guideدراین راهنما، ما ساختار برنامه های React را بررسی خواهیم کرد: المنت ها و کامپونت ها (elements and components) . پس از تسلط بر آنها، می توانید برنامه های پیجیده را از قطعات کوچک قابل استفاده مجدد ایجاد کنید.نکتهاین راهنما برای افرادی طراحی شده است که مفاهیم یادگیری را به صورت مرحله به مرحله (step by step) ترجیح می دهند. اگر ترجیح می دهید با انجام یادگیری یاد بگیرید، آموزش علمی ما بررسی کنید. ممکن است این راهنما و آموزش مکمل یکدیگر باشید.این اولین فصل در یک راهنمای گام به گام در مورد مفاهیم اصلی React است. لیستی از تمام فصل های آن را می توانید در نوار کناری پیدا کنید. اگر این مورد را از دستگاه تلفن همراه می بیبنید ، می توانید با فشار دادن دکمه در گوشه سمت راست بالا صفحه ، دسترسی پیدا کنید.هر فصل از این راهنما بر دانش معرفی شده در فصل های قبلی استوار است. شما می توانید بسیاری از React را با خواندن فصل های راهنمای “مفاهیم اصلی” به ترتیب نمایش در ستون کناری یاد بگیرید. شما می توانید بسیاری از مفهایم React را با خواندن فصل های راهنمای “مفاهیم اصلی” به ترتیب نمایش در ستون کناری یاد بگیرید. به عنوان مثال ، “معرفی JSX ”  فصل بعد از این مقاله است.پیش فرض سطح دانش | Knowledge Level AssumptionsReact یک کتابخانه JavaScript است ، بنابراین فرض خواهیم کرد که شما یک درک اساسی از زبان JavaScript داشته باشید. اگرمطمئن نیستید، توصیه می کنیم از یک آموزش جاوا اسکریپت برای خود استفاده کنید و این کار را ما برای شما کرده ایم که بودن نیاز به گشتن این آدرس را دنبال کنید. ممکن ایت تا یک ساعت طول بکشد، اما لازم نیست متمرکزشوید همزمان با react  می توانید JavaScript را یاد می گیرید.نکتهاین راهنما گاهی از برخی ویژگی های جدید JavaScript در مثالها استفاده می کند. اگر در چند سال گذشته با جاوا اسکریپت کار نکرده اید،  این سه نکته  بیشتر از همه به شما کمک کند.بیایید شروع کنیم | Let’s Get Started!منبع ترجمه learnreact learnreact Sun, 10 May 2020 09:39:44 +0430 https://virgool.io/@learnreact/%DB%8C%DA%A9-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-react-%D8%AC%D8%AF%DB%8C%D8%AF-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DA%A9%D9%86%DB%8C%D8%AF-w78ybvbbrnjx برای داشتن تجربه بهتر کاربری و توسعه دهنده از یک ابزار دستی استفاده کنید.در این صفحه چند راهنمای از ابزار های محبوب React توضیج داده شده است که کار های مانند :اسکلینگ (Scaling) بسیاری از فایل ها و components هااستفاده از کتابحانه های npmتشخص زود اشتباهات مشترکویرایش زنده css و JS درزمان توسعهبهینه سازی خروجی برای خورجی نهاییبرای ابزار های که توصیه شده نیازی به پیکربندی برای شروع ندارید.ممکن است شما به یک بزار دستی احتیاج نداشته باشیداگر شما مشکلات ذکر شده بالا را تجربه نمی کنید یا با استفاده از ابزار های JavaScript هنوز احساس راحتی ندارید، React را به عنوان تگ ساده &lt;script&gt; در صفحه HTML ، اختیاری با JSX در نظربگیرید.این ساده ترین راه برای کار با React در یک وب سایت است. همیشه می توانید یک ابزار بزرگتر اضافه کنید اگر فکر می کنید کمک کنده است!ابزار های پیشنهادی | Recommended Toolchainsتیم React در درجه اول این راه حل ها را توصیه می کند:اگر در حال یادگیری React یا ایجاد یک برنامه تک صفحه ای(single-page app) جدید هستید، از React app استفاده کنید.اگر در حال ساخت وب سایت در سرور js هستید، Next.js را امتحان کنید.اگر در حال ایجاد یک وب سایت محتوا محور استاتیک هستید، Gatsby را امتحان کنید.اگردر حال ساخت یک component کتابخانه هستید و یا یکپارچه سازی کد های موجود، ابزارهای انعطاف پذیرتری را امتحان کنید.ایجاد Create React App | ReactCreate React App یک محیط راحت برای یادگیری React است، بهترین راه برای شروع ساختن یک برنامه تک صفحه ای جدید در React است.این محیط توسعه شما را تنظیم می کند تا از جدیدترین ویژگی های JavaScript استفاده کنید، یک تجربه خوب برای توسعه دهنده و برنامه شما را بهینه می کند. شما باید Node &gt;= 8.10 و npm &gt;= 5.6 روی سیستم خود داشته باشید. برای ایجاد یک پروژه ، اجرا کنید:نکتهNpx در خط اول یک typo نیست – این یک package runner tool است که با npm 5.2+ ارائه می شود.Create React App از منطق بک اند (backend logic) و پایگاه داده ها (databases) پشتیبانی نمی کند. این فقط برای ساخت فرات اند (frontend) است، بنابر این می توانید بک اندی (backend) که می خواهید استفاده کنید. در زیر این پوشش،   از Babel و Webpack استفاده می کند ، اما لازم نیست چیزی در مورد آنها بدانید.هنگامی که آماده پایان کار هستید، دستور npm run build باعث ایجاد نسخه بهینه سازی (optimized) از برنامه شما در پوشه build خواهد شد اسفاده کنید. می توانید اطلاعات بیشتری را درباره Create React App از README و راهنمای کاربر کسب کنید.Next.jsNext.js یک framework  محبوب و سبک برای برنامه های استاتیک و server‑rendered که با React  ساخته شده اند. این شامل routing solutions out طراحی شده و فرض کنید از Node.js به عنوان محیط سرور استفاده می کنید.Next.js را از راهنمای رسمی آن بیاموزید.GatsbyGatsby بهترین راه برای ایجاد وب سایت های استاتیک با React است. این امکان را به شما می دهد تا از React components استفاده کنید، اما HTML و CSS را از قبل ارائه شده برای تضمین سریعترین زمان بار ، خارج می کند.Gatsby  را از راهنمای رسمی آن و یک gallery of starter kits  بیاموزید.ابزار انعطاف پذیر تر | More Flexible Toolchainsمجموعه های ابزار زیر انعطاف پذیری و انتخاب بیشتری دارند. ما آنها را به کاربران با تجربه توصیه می کنیم:Neutrino کامباینی (combines) قدرت گرفته از webpack با سادگی از پیش تنظیم شده، و از تنظیمات از پیش تعیین شده ای برای برنامه React و React components ها استفاده می کند.Parcel سریع است، کتنفیگ صفر برنامه های تحت وب (web application bundle) که با React کار می کند.Razzle یک framework ارائه server-rendering است که نیازی به پیکربندی نیست، اما انعطاف بیشتری نسب به next.js دارد.ایجاد یک زنجیره ابزار از ابتدایک JavaScript به طور معمول برای ساخت شامل موارد زیر است:یک پکیج منیجر، مانند Yarn یا npm. به شما امکان می دهد از مزیت های یک اکو سیستم گسترده third-party پکیج ها استفاده کنید، و به راحتی آنها را نصب یا بروز کنید.یک bundler، مانند webpack یا Parcel ، این امکان را به شما می دهد که کد modular بنویسید و باهم را در بسته های کوچک ( small packages) برای بهینه سازی زمان لود سایت استفاده کنید.یک compiler مانند Babel . این امکان را به شما می دهد تا کد های بروز JavaScript بنویسید که در مرورگر های قدیمی کارمی کند.اگر ترجیح می دهید زنجیره ابزار JavaScript خود را تنظیم کنید، این راهنما را بررسی کنید که برخی از قابلیت های Create React App را دوباره ایجاد می کند.فراموش نکنید که اطمینان حاصل کنید که زنجیره ابزار دستی شما برای تولید درست تنظیم شده باشد.منبع این مطلب در سایت React js ما است .که مستندات رسمی React را ترجمه کردیم ارائه شده خوشحال میشیم نظرتو ن رو با به اشتراک بگذارید. learnreact learnreact Tue, 28 Apr 2020 10:04:52 +0430 https://virgool.io/@learnreact/%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-react-%D8%A8%D9%87-%D9%88%D8%A8%D8%B3%D8%A7%DB%8C%D8%AA-add-react-to-a-website-exj5uui6v5yp Reactاز ابتدا برای اضافه کردن تدریجی طراحی شده است، می توانید به همان میزان کم یا به اندازه نیاز از React استفاده کنید.شاید شما بخواهید برخی از قسمت های تعاملی ( sprinkles of interactivity) را به صفحه اضافه کنید. کامپونت های ری اکت یک روش عالی برای این کار هستند.اکثر وب سای ها یک برنامه تک صفحه ای (single-page apps) نیستند و لازم نیست که باشند. با چند خط کد و بدون هیچ ایزاری، React را دربخش کوچکی از وبسایت خود امتحان کنید. سپس می توانید به تدریج گسترش دهید، یا آنرا در چند ابزارک پویا (dynamic) نگه دارید.React را در یک دقیقه اضافه کنیداختیاری : امتحان React با JSX ( بسته نرم افزاری لازم نیست!)React را در یک دقیقه اضافه کنید | Add React in One Minuteدر این بخش نحوه اضافه کردن React را به یک صفحه HTML موجود نشان خواهیم داد. می توانید به همراه سایت خود دنبال کنید، یا یک HTML خالی برای تمرین ایجاد کنید.هیچ ابزار پیچیده ای یا نصبی وجود ندارد _ برای تکمیل این بخش، فقط به اتصال اینترنت و یک دقیقه وقت نیاز دارید.اختیاری : نمونه کامل را دانلود کنید (KB zipped2)مرحله اول : یک DOM Container به HTML اضافه کنید.ابتدا صفحه HTML مورد نظر را در ویرایشگر باز کنید. یک تگ <div> خالی اضافه کنید تاجای که می خواهید با React نشان دهید، علامت گذاری کنید.مثلا :ما به این <div> یک id یونیک (HTML (HTML attribute دادیم. این به ما این امکان را می دهد که بعدا آنرا ازطریق JavaScript پیداکنیم و یک component React را در داخل آن نمایش دهیم.نکتهمی توانید یک <container” <div” مانند این را هرکجا داخل تگ <body> قرار دهید.شما ممکن است به تعداد مورد نیاز DOM containers مستقل در یک صفحه داشته باشید. آنها معمولاً خالی هستند – React جایگزین محتوای موجود درDOM containers می شود.مرحله دوم : تگ اسکریپت اضافه کنیدبعد سه تگ را درست قبل بسته شدن تگ <body/> در صفحه HTML اضاقه کنید:دوتگ اول React را لود می کند. تگ سوم کد component شما را بارگیری می شود.مرحله سوم : یک کامپونت React ایجاد کنیدفایلی نام like_button.js در کنار صفحه HTML ایجاد کنید.این بخش را باز کنید و کد آن را درون فایلی که ایجاد کرده اید کپی کنید.نکتهاین کد یک React component به نام LikeButton را تعریف می کند.اگر هنوز در نمی کنید نگران نباشید – ما بعدا در راهنمای آموزشی (tutorial) و راهنمای مفاهیم پایه (main) ساختار react را پوشش خواهیم داد.در حال حاضر، بیاید فقط روی صفحه نمایش دهیم!بعد اجرای کد، دوخط پاین را به like_button.js اضافه کنید:این دوخط کد <div> که در مرحله اول اضافه کردیم را پیدا می کند وسپس دکمه “Like” را که در داخل کامپونت React است نمایش می دهد.خودشه | That’s It!مرحله چهارمی وجود ندارد. شما اولین React component را به سایت خود اضافه کرده اید.برای راهنمایی های بیشتر در مورد استفاده از React به بخش های بعدی مراجعه کنید.نمونه کامل کد را مشاهد کنیدنمونه کامل را دانلود کنید. (KB zipped2)نکته : از یک کامپونت مجدد استفاده کنید.معمولا ممکن است بخواهید کامپونت های React را در چندین مکان در صفحه HTML نشان دهید.در اینجا مثالی وجود دارد که دکمه “Like” را سه بار نمایش داده و برخی از داده ها را به آن منتقل می کند:نمونه کامل کد را مشاهد کنیدنمونه کامل را دانلود کنید. (KB zipped2)نکتهاین استراژی بیشتر اوقات مفید است درحالی که قسمت های React-powered بخش های از صفحه که از یکدیگر جدا شده اند.در داخل کد React ، راحت تر است که به جای آن از ترکیب component استفاده کنید.نکته : کمتر از JavaScript استفاده کنید| Minify JavaScript for Productionقبل گسترش سایت شما به محصول نهایی، توجه داشته باشید که JavaScript ناشناس (unminified) به طور قابل توجهی می تواند صفحه کاربران شما کند کند.اگر اسکریپت های برنامه خود را از قبل کوچک کرده اید، سایت شما آماده استفاده خواهد بود اگراطمینان حاصل کنید که HTML ورژن های react خاتمه یافته به production.min.js را بارگیری می کند:اگر یک مرحله برای کوچک سازی (minification) اسکریپت های خود ندارید، در اینجا یک راه برای تنظیم آن وجود دارد.اختیاری : react با JSX امتحان کنید | Try React with JSXدر مثالهای بالا، ما فقط از ویژگی های که توسط مروگر پشتیبانی می شود استفاده کرده ایم. به همین دلیل ما از صدا زدن JavaScript function استفاده کردیم تا بگوییم React چه چیزی نشان می دهد :با این حال، React گزینه ای برای استفاده ازJSX به جای آن ارائه می دهد:این دوقطعه کد معادل هستند. درحالی که JSX کاملا اختیاری است، بسیاری از افراد آن را برای نوشتن کد UI مفید می دانند – هم با React هم با سایر کتابخانه ها.با استفاده از این مبدل (converter) آنلاین می توانید با JSX بازی کنید.سریع JSX را امتحان کنید | Quickly Try JSXسریعترین راه برای امتحان کردن JSX در پروژه ، اضافه کردن این تگ به صفحه است:حالا می توانید از JSX در تگ با افزودن ویژگی “type=”text/babel به آن استفاده کنید. دراینجا مثالی از فایل html با JSX وجود دارد که می توانید دانلود و بازی کنید.این یک روش مناسب برای یادگیری و ایجاد دموی ساده است. با این حال، وب سایت را کند و مناسب برای تولید نهایی نمی کند. هنگامی که آماده حرکت به جلو هستید، این تگ جدید را حذف کنید و ویژگی “type=”text/babel که اضافه کرده اید. در عوض ، در قسمت بعدی یک پردازنده JSX تنظیم می کنید تا تمام تگ های خود را به صورت خودکار تبدیل کنید.JSX را به پروژه اضافه کنید | Add JSX to a Projectافزودن JSX به یک پروژه به ابزار پیچده ای مانند نرم افزار یا سرور نیاز ندارد. در اصل اضافه کردن JSX مانند اضافه کرن CSS است. تنها شرط نصب Node.js در کامپوتر است.به پوشه پروژه خود در ترمینال بروید، و این دو command را paste کنید:دستور npm init –y ( درصورت عدم موفقیت، در اینجا رفع کنید)دستور npm install babel-cli@6 babel-preset-react-app@3نکتهما در اینجا از npm فقط برای نصب پردازنده JSX استفاده می کنیم. شما به آن نیاز ندارید، هردو React و کد برنامه را تغییر دهید می توانید به عنوان تگ های بدون تغییر باقی بماند.تبریک می گویم! شما فقط یک مجموعه JSX آماده تولید را به پروژه خود اضافه کرده اید.پردازنده JSX را اجرا کنید | Run JSX Preprocessorپوشه ای بنام src ایجاد کنید و این دستور را در ترمینال اجرا کنید:نکتهnpx یک تایپ (typo) نیست – این یک ران کنند پکیج (package runner tool) است که با npm 5.2+ ارائه می شود.اگر پیغام خطایی را مشاهد می کنید که می گوید “You have mistakenly installed the babel package”، ممکن است مرحله قبل را درست انجام نشده باشد. آن را در همان پوشه انجام دهید و دوباره امتحان کنید.منتظر تمام شدن آن نباشید – این دستور یک automated watcher برای JSX شروع می کند.اگر الان یک فایل به نام src/like_button.js با این کد شروع JSX بسازید، واچر(watcher ) مانند قبل like_button.js را پردازش می کند با کد ساده JavaScript مناسب برای مرورگرها. وقتی سورس کد را با JSX ویرایش می کنید، تبدیل کننده (transform) به صورت خودکاردوباره اجرا می شود.به عنوان پاداش، این همچنین به شما این امکان رو می دهد از ویژگی های بروز JavaScript مانند class ها استفاده کنید بدون اینکه نگرانی درمورد مرورگر های قدیمی باشید. ابزاری که از آن استفاده کردیم بابل (Babel) نامیده می شود و می توانید درباره مستندات آن اطلاعات بیشتری کسب کنید.اگر دقت کرده باشید برای راحت شدن کار ابزار های بیشتری میخواهیم، دربخش بعدی برخی ازمحبوب ترین وقابل دسترس ترین ابزار های دستی داده شده است. اگر نمی خواهید آن تگ های script به درستی کار می کنند!این مقاله ترجمه شده در این صفحه است.ما هروز ترجمه مستندات React js را ذر سایتمون منتشر میکنیم. خوشحال میشیم به سایت ما سر بزنی و نظرتو در مورد مقالات بگی:)ادرس سایت : learnreactapp.com learnreact learnreact Mon, 27 Apr 2020 14:36:18 +0430