1) React چیست؟

3 اکتبر 2019
ارسال شده توسط
یادگیری React
4.54k بازدید

React js یک کتابخانه جاوااسکریپتی برای پیاده سازی رابط کاربری وبسایت و اپلیکیشن شماست. و اکثرا از React برای ساخت وبسایت های تک صفحه ای (Single Page Application) استفاده میکنیم. در قلب اپلیکیشن های Reactjs از کامپوننت ها (Components) استفاده شده. در جلسات بعدی راجع به کامپوننت ها بخ طور مفصل صحبت میکنیم ولی تا همینجا بدونید که ما کدهامونو داخل کامپوننت ها قرار میدیم و هر زمان که نیاز به نمایش اون ها در وبسایت داشته باشیم به صورت DOM مجازی رندر میگیریم و بدون Refresh شدن یا لود شدن صفحه اونو به کاربر نمایش میدیم.

ReactJS چیست؟

ReactJS یک Library قدرتمند جاوا اسکریپت که توسط Facebook توسعه داده شده و پشتیبانی میشه. React یک DOM مجازی در حافظه ایجاد میکند. در واقع Reactjs با دستکاری DOM در صفحه اپلیکیشن ما کار میکنه و زمانی که روی لینک جدید کلیک میشه فقط قسمت هایی از صفحه که نیاز به تغییر داره آپدیت میشه و بقیه المان ها ثابت میمونه که اینکار باعث افزایش سرعت به طور چشمگیری میشه.

چگونه از React استفاده کنیم؟

استفاده ار فریمورک React به سادگی بارگذاری جاوااسکریپت روی Html میمونه و فقط یکم تفاوت میکنه. خب یه مثال ساده Hello World رو با react js روی وبسایت خودمون خروجی بگیریم و در این مثال از CDN برای لود کردن Reactjs استفاده میکنیم.

<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/reactdom.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js">
</script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.querySelector('#app')
    );
  </script>
</body>
</html>

نگران ظاهر ترسناک و زیادش نباشید قسمت اصلی داستان ما Hello World. در جلسات بعدی به ترتیب از 0 شروع میکنیم و React روی سیستم خودمون نصب میکنیم و پیش میریم.

فریمورک React JS چگونه کار میکند؟

همون طور که بالا بهش اشاره کردیم، React js از Virtual DOM استفاده میکنه و از حافظه مرورگر برای این کار استفاه میکنه این به این معناست که Reactjs به طور کامل DOM رو تغییر نمیده و با کلیک شدن رو المان های خاص فقط قسمت های لازم رو تغییر میده و با این کار سرعت وبسایت مارو به شدت افزایش میده. و بخاطر همین ویژگی DOM مجازی در ری اکت از کامپوننت ها استفاده میکنیم و هر صفحه از کامپوننت های مختلف تشکیل شده تا در صورت نیاز اون کامپوننت ها دوباره رندر گرفته بشه یا تغییر بکنه.

در جلسه بعدی به نصب Reactjs روی سیستم خودمون میپردازیم و در جلسات بعدی سراغ سینتکس JSX فریمورک React میریم.

اشتراک گذاری:
برچسب ها:

9 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • سلام مهندس مقصودی عزیز
    بارزترین ویژگی شما تسلط بسیار بالاتون به جاوا اسکریپت هست و این منِ دانشجو رو خیلی خوشحال میکنه، چون میدونم وقتی که دارم میزارم و یک آموزش رو دارم میبینم بی نتیجه نمیمونه و کسی که داره آموزش میده هم به موضوع آموزش و هم جاوا اسکریپت تسلط داره
    ممنونم بابت زحماتتون ، فقدان یک سایت تخصصی جاوا اسکریپت به زبان فارسی واقعا محصوص بود
    خسته نباشید

  • سلام. سایتتون حرف نداره. بهترین سایت آموزشی که دیدم همینه. همه چیز دسته بندی شده و با راهنمایی کامل قرار گرفته و این یه امتیاز مثبته که کاربر هرچی میخواد به راحتی پیدا میکنه و اگه صفر باشه میدونه از کجا شروع کنه به کجا برسه.
    توی فایلها هم انقدر کامل و روان و واضح توضیح میدین که کل دوره های جاوا اسکریپت رو دانلود کردم و بعد تموم شدن قدم ششم در لجظه هیولا رو میگیرم !! از صمیم قلب بهتون بابت راه اندازی این سایت تبریک میگم و امیدوارم هر روز موفق تر باشید.

    • سلام و درود.
      هدف منم همین سهولت و کیفیت خوب آموزش فارسی هست که فقدانش رو حس کردم و تصمیم به ساخت این سایت گرفتم. همه تلاشم به تبدیل شدن این سایت به مرجع جاوااسکریپت و فریمورک هاش هست. که به کمک شما دوستان خوبم قطعا به این افتخار میرسم.

دیدگاهتان را بنویسید