تا اینجا ، تنها با یک تک کامپوننت کار کردیم؛ اما یک برنامهی واقعی ترکیبی است از چندین کامپوننت که در نهایت درخت کامپوننتها را در React تشکیل میدهند. به همین جهت در طی چند قسمت، نکات ترکیب کامپوننتها را بررسی میکنیم. ترکیب کامپوننتها
در ادامه، همان برنامهی تا قسمت 5 را که کار نمایش یک counter را انجام میدهد، تکمیل میکنیم. در این برنامه اگر به فایل index.js دقت کنید، کار رندر تک کامپوننت Counter را انجام میده ...
در این قسمت میخواهیم دانستههای 5 قسمت قبل را در طی یک تمرین کنار هم قرار داده و مرور کنیم. برپایی ساختار ابتدایی پروژهی تمرین
ابتدا یک پروژهی جدید React را ایجاد میکنیم: > create-react-app sample-05
> cd sample-05
> npm start
سپس بستههای بوت استرپ و font-awesome را نیز در آن نصب میکنیم: > npm install --save bootstrap
> npm install --save font-awesome
در اد ...
در قسمت قبل ، اولین کامپوننت React خود را ایجاد کردیم و سپس جزئیات بیشتری از عبارات JSX را مانند نحوهی تعریف المانهای مختلف و تنظیم مقادیر ویژگیهای آنرا بررسی کردیم. در ادامهی همان مثال، در این قسمت، نحوهی نمایش لیستها و تعریف و مدیریت رویدادها را در کامپوننتهای React، بررسی میکنیم.
نحوهی رندر لیستی از اشیاء در کامپوننتهای React
فرض کنید میخواهیم لیستی از تگها را رندر کنیم. برای این منظور ابتدا دادهه ...
برپایی پروژهی ایجاد اولین کامپوننت React
در اینجا برای بررسی مقدماتی کامپوننتها، یک پروژهی جدید React را ایجاد میکنیم. > create-react-app sample-04
> cd sample-04
> npm start
اکنون در ادامه اولین کاری را که انجام میدهیم، نصب توئیتر بوت استرپ 4 است تا بتوانیم توسط امکانات آن، ظاهر بهتری را برای برنامهی تهیه شده تدارک ببینیم. برای این منظور پس از باز کردن پوشهی اصلی برنامه توسط VSCode، دکمههای ` ...
در قسمت قبل ، بخشی از تازههای ES6 را که بیشتر در برنامههای مبتنی بر React مورد استفاده قرار میگیرند، بررسی کردیم. در این قسمت نیز سایر موارد مهم باقیمانده را بررسی میکنیم.
در اینجا نیز برای بررسی ویژگیهای جاوا اسکریپت مدرن، یک پروژهی جدید React را ایجاد میکنیم. > create-react-app sample-03
> cd sample-03
> npm start
سپس تمام کدهای داخل index.js را نیز حذف میکنیم. اکنون تمام کدهای خالص جاوا اسکری ...
برای کار با React، نیاز است با ES6 آشنایی داشته باشید که در این سایت، یک سری کامل بررسی مقدمات آنرا پیشتر مرور کردهایم. علاوه بر توصیهی مطالعهی این سری (اینکار الزامی است)، در این قسمت خلاصهی بسیار سریع و کاربردی آنرا که بیشتر در برنامههای مبتنی بر React مورد استفاده قرار میگیرند، با هم مرور خواهیم کرد. در قسمتهای بعدی، اهمیت ذکر این خلاصه بیشتر مشخص میشود.
برای بررسی ویژگیهای جاوا اسکریپت مدرن، یک پروژهی جدید ...
React یک کتابخانهی جاوا اسکریپتی، برای ساخت رابطهای کاربری سریع و تعاملی است. توسعهی آن از سال 2011 در فیسبوک شروع شد و در حال حاضر محبوبترین کتابخانهی جاوا اسکریپتی در این ردهاست:
به همین جهت اگر میخواهید رزومهی غنیتری را ارائه دهید، فراگیری React میتواند موقعیتهای شغلی بیشتری را نصیب شما کند. ساختار کلی یک برنامهی React
کامپوننتها (جزئی از یک رابط کاربری) قلب هر برنامهی R ...
همانطور که اطلاع دارید که طراح xaml و Intellisense در Visual Studio، توانایی شناسایی Resources هایی را که از Libraryهای خارجی میآیند، ندارد. یعنی اگر شما بخواهید از StaticResourceها یا DynamicResourceها استفاده کنید، با یک لیست خالی در Intellisense مواجه خواهید شد و مجبور هستید تا نام Resource را خودتان بطور کامل تایپ کنید. این مشکل بیشتر بخاطر ساختار MergedDictionaryها و تعداد بالای فایلهای Resource پیش میآید. برای حل این مشکل چندی ...
در قسمت قبل دیدیم که انجام کارهای همزمان، با Objectهایی که به اصطلاح Thread Safe نیستند (مانند DbContext) خروجی چندان جالبی ندارد و برای مثال اگر در یک Service یک DbContext را Inject کنیم (مثلا با Constructor injection) و از آن در متدی استفاده کنیم که آن متد یا با TPL یا RX و ... به صورت چندتایی و همزمان اجرا شود، DbContext به مشکل میخورد ؛ یعنی نمیتوان یک وهله از DbContext را بین چند Thread همزمان پردازش موازی، به اشتراک گذاشت. ...
آیا تا به حال لیستی از دیتا داشتهاید که بخواهید بر روی آنها کاری را انجام دهید؟ مثلا لیستی از مشتریان که باید برای تک تک آنها Pdf ای را بسازید، یا لیستی از مشتریان که باید برای تک تک آنها بیمه نامه صادر کنید، یا مثلا لیست اطلاعات بلیطهای قابل فروش را گرفتهاید و برای تک تک آنها میخواهید کمیسیون حساب کنید و ... در اکثر مواقعی کاری که برای تک تک آیتمها قرار است انجام شود، ساده است و با استفاده از یک حلقه foreach کار تمام میشود. ...