جستجو برای:
  • صفحه اصلی
  • وبلاگ تخصصی جاوااسکریپت
    • جاوااسکریپت
    • Angular
    • Nodejs
    • Reactjs
    • Vuejs
    • Electronjs
    • دیتابیس MongoDB
    • کتابخانه های جاوا اسکریپت
    • فریمورک های جاوا اسکریپت
  • تونل یادگیری رایگان
    • آموزش رایگان جاوااسکریپت
      • 1) جاوااسکریپت چیست ؟
      • 2) بارگذاری جاوااسکریپت
      • 3) کامنت گذاشتن در جاوااسکریپت
      • 4) متغیرها در جاوااسکریپت
      • 5) عملگرها در جاوااسکریپت
      • 6) انواع داده در جاوااسکریپت
      • 7) اعداد در جاوااسکریپت
      • 8) رشته ها در جاوااسکریپت
      • 9) متد های رشته در جاوااسکریپت
      • 10) آرایه ها در جاوااسکریپت
      • 11) متدهای آرایه در جاوااسکریپت
      • 12) مرتب سازی آرایه در جاوااسکریپت
      • 13) اشیا در جاوااسکریپت
      • 14) توابع در جاوااسکریپت
      • 15) توابع ریاضی در جاوااسکریپت
      • 16) دستور شرطی if در جاوااسکریپت
      • 17) دستور Switch در جاوااسکریپت
      • 18) آموزش حلقه for در جاوااسکریپت
      • 19) آموزش حلقه while
    • آموزش رایگان جی کوئری
      • 1) جی کوئری چیست ؟
      • 2) نصب جی کوئری
      • 3) سینتکس جی کوئری
      • 4) سلکتورها در جی کوئری
      • 5) رویداد ها در جی کوئری
      • 6) Hide و Show در جی کوئری
      • 7) افکت Fade در جی کوئری
      • 8) افکت Slide در جی کوئری
      • 9) انیمیشن در جی کوئری
      • 10) افکت ها در جی کوئری
      • 11) دسترسی به محتوای تگ ها (Get)
      • 12) ارسال اطلاعات به تگ ها (Set)
    • آموزش های کامل جاوااسکریپت
      • آموزش کامل Operators (عملگرها)
      • آموزش کامل حلقه ها و شرط ها
      • آموزش کامل Objects (اشیا)
      • آموزش کامل Arrays (آرایه ها)
      • آموزش کامل Functions (توایع)
  • دوره ها
    • دوره رایگان جاوااسکریپت
    • دوره رایگان عملگرها (Operators)
    • دوره رایگان شرط ها و حلقه ها
    • دوره رایگان اشیا (Objects)
    • دوره رایگان آرایه ها (Arrays)
    • دوره رایگان توابع (Functions)
    • دوره پروژه محور هیولای جاوااسکریپت
    • دوره رایگان React مقدماتی
    • دوره پروژه محور هیولای React
  • نقشه راه یادگیری جاوااسکریپت
 
MEGA JS
  • صفحه اصلی
  • وبلاگ تخصصی جاوااسکریپت
    • جاوااسکریپت
    • Angular
    • Nodejs
    • Reactjs
    • Vuejs
    • Electronjs
    • دیتابیس MongoDB
    • کتابخانه های جاوا اسکریپت
    • فریمورک های جاوا اسکریپت
  • تونل یادگیری رایگان
    • آموزش رایگان جاوااسکریپت
      • 1) جاوااسکریپت چیست ؟
      • 2) بارگذاری جاوااسکریپت
      • 3) کامنت گذاشتن در جاوااسکریپت
      • 4) متغیرها در جاوااسکریپت
      • 5) عملگرها در جاوااسکریپت
      • 6) انواع داده در جاوااسکریپت
      • 7) اعداد در جاوااسکریپت
      • 8) رشته ها در جاوااسکریپت
      • 9) متد های رشته در جاوااسکریپت
      • 10) آرایه ها در جاوااسکریپت
      • 11) متدهای آرایه در جاوااسکریپت
      • 12) مرتب سازی آرایه در جاوااسکریپت
      • 13) اشیا در جاوااسکریپت
      • 14) توابع در جاوااسکریپت
      • 15) توابع ریاضی در جاوااسکریپت
      • 16) دستور شرطی if در جاوااسکریپت
      • 17) دستور Switch در جاوااسکریپت
      • 18) آموزش حلقه for در جاوااسکریپت
      • 19) آموزش حلقه while
    • آموزش رایگان جی کوئری
      • 1) جی کوئری چیست ؟
      • 2) نصب جی کوئری
      • 3) سینتکس جی کوئری
      • 4) سلکتورها در جی کوئری
      • 5) رویداد ها در جی کوئری
      • 6) Hide و Show در جی کوئری
      • 7) افکت Fade در جی کوئری
      • 8) افکت Slide در جی کوئری
      • 9) انیمیشن در جی کوئری
      • 10) افکت ها در جی کوئری
      • 11) دسترسی به محتوای تگ ها (Get)
      • 12) ارسال اطلاعات به تگ ها (Set)
    • آموزش های کامل جاوااسکریپت
      • آموزش کامل Operators (عملگرها)
      • آموزش کامل حلقه ها و شرط ها
      • آموزش کامل Objects (اشیا)
      • آموزش کامل Arrays (آرایه ها)
      • آموزش کامل Functions (توایع)
  • دوره ها
    • دوره رایگان جاوااسکریپت
    • دوره رایگان عملگرها (Operators)
    • دوره رایگان شرط ها و حلقه ها
    • دوره رایگان اشیا (Objects)
    • دوره رایگان آرایه ها (Arrays)
    • دوره رایگان توابع (Functions)
    • دوره پروژه محور هیولای جاوااسکریپت
    • دوره رایگان React مقدماتی
    • دوره پروژه محور هیولای React
  • نقشه راه یادگیری جاوااسکریپت
0
ورود / ثبت نام

1) React چیست؟

11 مهر 1398
ارسال شده توسط محمدرضا حاجی مقصودی
یادگیری React
4.15k بازدید

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/[email protected]/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 میریم.

اشتراک گذاری:
برچسب ها: reactتونل یادگیرییادگیری React

9 دیدگاه

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

  • moein babaei گفت:
    22 شهریور 1399 در 23:42

    مهندس عالی بود 🙂

    برای پاسخ دادن وارد شوید
  • vahid ebr گفت:
    8 شهریور 1399 در 02:11

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

    برای پاسخ دادن وارد شوید
    • vahid ebr گفت:
      8 شهریور 1399 در 02:12

      محسوس 🙂 🙂 🙂

      برای پاسخ دادن وارد شوید
  • علی گفت:
    11 تیر 1399 در 01:43

    سلام خسته نباشید
    ممنون بابت سایت خوبتون
    اگه امکان داره ری اکت رو ارزون بزارین تا بتونیم ماهم استفاده کنیم
    ممنونم

    برای پاسخ دادن وارد شوید
    • محمدرضا حاجی مقصودی گفت:
      12 تیر 1399 در 02:12

      سلام و دورد. ممنونم
      این دوره رایگانه اما دوره هیولا داره که میتونید تو تخفیف با قیمت مناسب تهییه کنید.

      برای پاسخ دادن وارد شوید
  • behnaz1991 گفت:
    27 اردیبهشت 1399 در 22:33

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

    برای پاسخ دادن وارد شوید
    • محمدرضا حاجی مقصودی گفت:
      29 اردیبهشت 1399 در 14:36

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

      برای پاسخ دادن وارد شوید
  • mohsen_pc گفت:
    6 اردیبهشت 1399 در 04:29

    با سلام
    React رو تکمیل نمی‌کنید؟

    برای پاسخ دادن وارد شوید
    • محمدرضا حاجی مقصودی گفت:
      7 اردیبهشت 1399 در 12:32

      سلام از آخر ماه شروع میشه بعد از تکمیل دوره هیولای جاوااسکریپت

      برای پاسخ دادن وارد شوید

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

جستجو برای:
هیولای جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

دسته‌ها
  • Angular
  • Denojs
  • Electronjs
  • Mongo DB
  • Nodejs
  • React
  • Vue
  • ابزار و تکنولوژی
  • جاوااسکریپت
  • فریم ورک ها
  • کتابخانه ها
  • وبلاگ
  • یادگیری React
  • یادگیری جاوااسکریپت
  • یادگیری جی کوئری
جاوااسکریپت را از کجا شروع کنیم؟

نقشه راه یادگیری جاوا اسکریپت

MEGAJS | مگا جی اس

جدیدترین نوشته ها
  • ۲6) تمرین عملگرها: جا به جایی متغیرها با جاوااسکریپت
  • Typescript چیست؟ چرا باید ازش استفاده کنیم؟
  • ۲۵) آموزش اولویت عملگرها در جاوااسکریپت
  • ۲۴) آموزش عملگرهای منطقی در جاوااسکریپت
درباره MEGA JS، دنیای جذاب جاوااسکریپت

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

دوره های رایگان مگا جی اس

دوره رایگان آموزش جاوااسکریپت
دوره رایگان آموزش ری اکت

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

دوره های هیولای مگا جی اس

دوره ۲۰روش درآمدی هیولای درامدزایی
دوره پروژه محور هیولای جاوا اسکریپت
دوره پروژه محور هیولای ری اکت

فیلم های آموزشی رایگان در

کانال آپارات MEGAJS   کانال آپارات MEGAJS

کانال یوتوب MEGAJS   

تمامی حقوق برای سایت MEGA JS محفوظ می باشد.
ورود به سایت ×
رمز عبور خود را فراموش کرده اید؟
ورود با رمز یکبار مصرف
ارسال کد یکبار مصرف(00:120)
حساب کاربری ندارید؟
ثبت نام
ارسال کد یکبار مصرف(00:120)
بازگشت به ورود

ارسال کد یکبار مصرف (00:120)
بازگشت به ورود
  • (+93) افغانستان
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) ایران
  • (+964) عراق
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) پاکستان
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) ترکیه
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) ایلات متحده عربی
  • (+44) پادشاهی متحد بریتانیا
  • (+1) ایالات متحده آمریکا
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت