React JS

‫‪1‬‬
‫آدرس‪:‬تهران ‪ -‬خيابان شريعتی ‪ -‬باال تر از خيابان ملک ‪ -‬جنب بانک صادرات ‪ -‬پالک ‪- 561‬واحد ‪7‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫بسمه اهلل الرحمن الرحیم‬
‫آموزشگاه تحلیل داده‬
‫تخصصی ترين مرکز برنامه نويسی و ديتابيس در ايران‬
‫کتاب آموزش برنامه نويسی ‪ReactJS‬‬
‫مولف مهندس افشین رفوا‬
‫‪2‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫تقديم به نائب امام عصر ‪ ,‬آيت اهلل خامنه ای که عصا زدنش ضرب آهنگ حيدری دارد‪.‬‬
‫تقديم به همه جويندگان علم که توان امکان و شرکت در کالس حضوری ندارند‪.‬‬
‫‪3‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫فهرست‬
‫مقدمه ‪11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫توجه ‪11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫آموزش جامع ‪12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . React JS‬‬
‫مخاطبان ‪12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫پيش نيازها ‪12. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫مروری بر مطالب ‪13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫امکانات ‪13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫مزايای ‪14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫محدوديت های ‪14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫برپا کردن محيط ‪14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . ReactJS‬‬
‫نصب ‪ ReactJS‬با استفاده از ‪ webpack‬و ‪15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . babel‬‬
‫مرحله ‪ :1‬ايجاد پوشه ی اصلی برای ‪15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫مرحله ‪ :2‬نصب ‪ ReactJS‬و ‪17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . react dom‬‬
‫مرحله ‪ : 3‬نصب وب پک ‪17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ : 4‬نصب ‪18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Babel‬‬

‫‪4‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫مرحله ‪ :5‬ايجاد فايل ها ‪18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ : 6‬تنظيم کامپايلر‪ ،‬سرور و لودرها ‪19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪20 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . index.html : 7‬‬
‫مرحله ‪ App.jsx : 8‬و ‪21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫‪21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬ ‫‪App.js‬‬
‫‪21 . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫مرحله ‪ : 9‬اجرای سرور ‪22 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ : 10‬توليد نرم افزار ‪23. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫استفاده از دستور ‪ create-react-app‬برای ‪23. . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫مرحله ‪ : 1‬نصب ‪24. . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . create-react-app‬‬
‫مرحله ‪ : 2‬حذف تمامی فايل های منبع ‪24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ : 3‬اضافه کردن فايل ها ‪24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ : 4‬اجرای پروژه ‪25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪ JSX‬در ‪25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . React JS‬‬
‫استفاده از ‪ JSX‬در ‪25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫‪26 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫عناصر تو در تو ‪27 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫‪5‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫‪27 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫صفات مربوط ‪28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫عبارت های جاوا اسکريپت ‪28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫سبک بندی ‪30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫کامنت ‪31 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫قرارداد نام گذاری در ‪32 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫اجزا ( ‪ ) Component‬در ‪33 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . RejectJs‬‬
‫مثال بدون ‪33 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . State‬‬
‫‪33 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪35 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫مثال با ‪36 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . State‬‬
‫‪36 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫حالت (‪ )State‬های ‪40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫استفاده از ‪40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Props‬‬
‫‪40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫مروری بر ‪ Props‬مربوط به ‪42 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫‪6‬‬
‫‪88146323 - 88446780 - 88146330‬‬
42 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . props ‫استفاده از‬
42 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx
43 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js
44 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ‫ پيش فرض‬Props
44 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx
46 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Props ‫ و‬State ‫ مربوط به‬ReactJS
46 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx
48 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js
49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS ‫ ) در‬Prop Validation (‫ارزيابی ويژگی ها‬
49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ‫ارزيابی ويژگی ها‬
49 . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx
51 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js
52 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS ‫ ) در‬API Component ( ‫ جزء‬API
52 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Set State
54 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Force Update
55 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Find Dom Node
57 . . . . . . . . . . . . . . . . . . . . . . . . ReactJS ‫ ) در‬Component Life Cycle (‫چرخه ی عمر اجزا‬

7
7 ‫واحد‬- 561 ‫ پالک‬- ‫ جنب بانک صادرات‬- ‫ باال تر از خيابان ملک‬- ‫ خيابان شريعتی‬- ‫تهران‬:‫آدرس‬
88146323 - 88446780 - 88146330
‫متدهای چرخه ی عمر ‪58 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪58 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪61 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫فرم ها ( ‪ )Forms‬در ‪62 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫‪62 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪63 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫مثال پيچيده ‪63 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪63 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪63 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫رويدادها( ‪ ) Events‬مربوط به ‪66 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫مثال ساده ‪66 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪66 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪68 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫رويدادهای فرزند ‪68 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪68 . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪70 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫‪ Ref‬ها مربوط به ‪71 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫‪8‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫استفاده از ‪ Ref‬ها ‪71 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪71 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪73 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫کليدها(‪ ) Keys‬در ‪73 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫استفاده از کليدها ‪73 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪74 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫روتر( ‪ ) Router‬در ‪77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫مرحله ‪ - 1‬نصب يک ‪ ReactJS‬روتر ‪77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ - 2‬ايجاد اجزا ‪77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫مرحله ‪ – 3‬اضافه کردن روتر ‪80 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪80 . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫مفهوم ‪ Flex‬در ‪81 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫عناصر فالکس ‪81 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مزايای فالکس ‪81 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫استفاده از ‪ Flux‬در ‪82 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫مرحله ‪ – 1‬نصب ‪82 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Redux‬‬

‫‪9‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫مرحله ‪ – 2‬ايجاد فايل ها و فولدرها ‪82 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ Action – 3‬ها ‪82 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ Reduser – 4‬ها ‪84 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪86 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Store – 5‬‬
‫مرحله ‪ – 6‬اجزاء ديگر ‪89 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫‪89 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App.jsx‬‬
‫‪89 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬
‫انيميشن ها ) ‪ ( Animation‬ها ‪92 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ : 1‬نصب ‪92 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . React CSS Transitions Group‬‬
‫مرحله ‪ : 2‬اضافه کردن يک فايل ‪92 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CSS‬‬
‫مرحله ‪ : 3‬ظاهر کردن انيميشن ‪93 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫مرحله ‪ : 4‬متحرک سازی ورود و خروج ‪95 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬
‫اجزای با مرتبه ی باالتر ( ‪ ) Higher Order Components‬در ‪99 . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫بهترين شيوه ها در ‪102 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬
‫‪10‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫مقدمه‬
‫زکات علم نشر آن است‪ .‬حضرت علی(ع)‬
‫موسسه آموزشی تحليل داده ‪ ،‬با حضور جمعی از متخصصين مجرب در زمينه برنامه نويسی در نظر‬
‫دارد‪،‬مطالب آموزشی خود را در قالب کتاب های آموزشی و فيلم ‪ ،‬به صورت رايگان در دسترس عموم‬
‫قرار دهد تا حتی آن دسته از عزيزانی که بنا به داليل مالی‪،‬مسافت جغرافيايی و يا نداشتن وقت کافی ‪،‬‬
‫امکان شرکت در دوره های حضوری برای آنها ميسر نيست‪،‬از يادگيری بی بهره نمانند‪.‬‬
‫عالوه بر اين عالقه مندان می توانند ‪ ،‬با ثبت نام در انجمن سايت تحليل داده‪،‬سواالت خود را مطرح نموده‬
‫و مدرسين آموزشگاه و اعضای انجمن در اسرع وقت‪،‬پاسخ های خود را‪ ،‬حتی االمکان به صورت فيلم‪ ،‬در‬
‫دسترس عموم قرار دهند‪.‬‬
‫لذا از کليه فعاالن در اين زمينه دعوت می شود‪ ،‬در اين حرکت جمعی در کنار ما باشند و با حضور فعال‬
‫خود در انجمن‪،‬گام موثری در بهبود سطح علمی جوانان کشور عزيزمان‪،‬ايران بردارند‪.‬‬
‫توجه ‪:‬‬
‫برای دانلود سورس کد مثال های کتاب ‪ ,‬در بخش مقاالت سايت به آموزش ‪ ReactJS‬در آدرس‬
‫‪ www.tahlildadeh.com‬مراجعه فرماييد‪.‬‬
‫‪11‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫آموزش جامع ‪React JS‬‬
‫‪ React‬يک کتابخانه ی فرانت – اند بوده که توسط فيسبوک توسعه يافته است‪ .‬با کمک آن می توان اليه‬
‫ی ‪ view‬برنامه های موبايل و وب را مديريت کرد‪ .‬با کمک ‪ ReactJS‬می توانيم اجزای رابط کاربری با‬
‫قابليت استفاده ی مجدد را ايجاد کنيم‪ ReactJS .‬در حال حاضر يکی از محبوب ترين کتابخانه های جاوا‬
‫اسکريپت بوده و بنيان و جامعه ی عظيمی را به همراه دارد‪.‬‬
‫مخاطبان ‪ReactJS‬‬
‫برنامه نويسان جاوا اسکريپتی که برای اولين بار با ‪ ReactJS‬سروکار دارند‪ ،‬می توانند از اين آموزش‬
‫استفاده کنند‪ .‬سعی خواهيم کرد که با نمايش نمونه کدهای ساده و قابل فهم به تمامی مفاهيم بپردازيم‪.‬‬
‫بعد از تمام کردن اين بخش ها شما بر ‪ ReactJS‬تسلط پيدا خواهيد کرد‪ .‬اضافه بر آموزش خود به معرفی‬
‫عناصر بيشتری خواهيم پرداخت که در کنار ‪ ReactJS‬به خوبی جواب می دهند تا بتوانيد با کمک آن ها‬
‫بهترين شيوه ها را فراگيريد و روندهای امروزی جاوا اسکريپت را دنبال کنيد‪.‬‬
‫پيش نيازها ‪ReactJS‬‬
‫اگر می خواهيد با ‪ ReactJS‬کار کنيد‪ ،‬نياز است که دانش خوبی از جاوا اسکريپت‪ HTML5 ،‬و ‪CSS‬‬
‫داشته باشيد‪ .‬با وجود اين که ‪ ReactJS‬از ‪ HTML‬استفاده نمی کند‪ JSX ،‬شبيه به ‪ HTML‬است‪،‬‬
‫بنابراين دانش ‪ HTML‬شما به کمکتان خواهد آمد‪ .‬در يکی از بخش ها به اين موضوع بيشتر خواهيم‬
‫پرداخت‪ .‬همچنين از سينتکس ‪ EcmaScript 2015‬استفاده خواهيم کرد‪ ،‬بنابراين هر دانشی که در اين‬
‫زمينه داريد‪ ،‬برايتان مفيد خواهد بود‪.‬‬
‫‪12‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫مروری بر مطالب‬
‫‪ ReactJS‬يک کتابخانه ی جاوا اسکريپت است که می توان از آن جهت ساختن اجزای رابط کاربری با‬
‫قابليت استفاده ی مجدد استفاده کرد‪ .‬در آموزش رسمی ‪ React‬تعريف زير برای آن بيان شده است‪:‬‬
‫‪ React‬کتابخانه ای است که با کمک آن می توان رابط های کاربری قابل خواندن را ايجاد کرد‪ .‬همچنين‬
‫اين کتابخانه‪ ،‬ايجاد اجزای رابط کاربری قابل استفاده ی مجدد را تسهيل می کند؛ اجزايی که داده هايی را‬
‫نشان می دهند که در گذر زمان تغيير می کنند‪ .‬بسياری از مردم مانند ‪ V‬در ‪ MVC‬از ‪ React‬استفاده‬
‫می کنند‪ .‬انتزاع های ‪ DOM ،React‬را از شما دور می کنند و مدل برنامه نويسی ساده تر و عملکرد‬
‫بهتری را برای شما فراهم می کنند‪ .‬همچنين ‪ React‬می تواند در سرور با استفاده از ‪ Node‬رندر شود و‬
‫می تواند با استفاده از ‪ React Native‬برنامه های بومی را تقويت کند‪ React .‬جريان داده ی واکنشی‬
‫يک طرفه را اجرا می کند‪ .‬اين کار باعث می شود نياز به استفاده ی کدهای تکراری کاهش يابد و نسبت‬
‫به مقيدسازی سنتی داده درک کد آسان تر شود‪.‬‬
‫امکانات ‪ReactJS‬‬
‫‪ JSX: JSX ‬افزونه ی سينتکس جاوا اسکريپت است‪ .‬در برنامه نويسی ‪ ReactJS‬لزومی به‬
‫استفاده از ‪ JSX‬وجود ندارد‪ ،‬اما توصيه می شود اين کار انجام شود‪.‬‬
‫‪ ‬اجزا‪ ReactJS :‬پيرامون اجزا می چرخد‪ .‬همه چيز را بايد به عنوان يک جزء در نظر بگيريد‪ ،‬در‬
‫اين صورت می توانيد زمانی که بر روی پروژه های بزرگ تر کار می کنيد راحت تر از کد خود‬
‫نگهداری کنيد‪.‬‬
‫‪ ‬جريان داده ی يک طرفه و ‪ Flux : ReactJS‬از جريان داده ی يک طرفه بهره می برد و به همين‬
‫دليل فهم برنامه را آسان تر می کند‪ .‬فالکس الگويی است که با کمک آن می توانيد داده های‬
‫خود را يک طرفه نگه داريد‪.‬‬
‫‪13‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫‪ ‬اليسنس‪ ReactJS :‬توسط شرکت فيسبوک اليسنس شده و آموزش آن تحت ‪CC BY 4.0‬‬
‫اليسنس شده است‪.‬‬
‫مزايای ‪ReactJS‬‬
‫‪ ‬استفاده از ‪ DOM‬مجازی که در واقع يک شیء جاوا اسکريپت است‪ .‬از اين طريق می توانيد‬
‫عملکرد برنامه های خود را بهبود بخشيد‪ .‬زيرا ‪ DOM‬مجازی جاوا اسکريپت سريع تر از ‪DOM‬‬
‫معمولی است‪.‬‬
‫‪ ‬از ‪ ReactJS‬می توانيد در هر دو سمت کالينت و سرور‪ ،‬همچنين در فريمورک های ديگر استفاده‬
‫کنيد‪.‬‬
‫‪ ‬الگوهای داده و اجزا خوانايی برنامه ی شما را افزايش می دهند و از اين طريق می توانيد راحت‬
‫تر می توانيد از برنامه های بزرگ تر خود نگهداری کنيد‪.‬‬
‫محدوديت های ‪ReactJS‬‬
‫‪ ‬در ‪ ReactJS‬تنها اليه ی ‪ view‬برنامه پوشش داده شده است‪ .‬به همين دليل اگر می خواهيد‬
‫امکانات کامل برنامه نويسی را دريافت کنيد‪ ،‬بايد از فناوری های ديگر استفاده کنيد‪.‬‬
‫‪ ‬در ‪ ReactJS‬از قالب نويسی و ‪ JSX‬درون خطی استفاده می شود که اين امر برای برخی از برنامه‬
‫نويسان ناخوشايند به نظر می رسد‪.‬‬
‫‪‬‬
‫برپا کردن محيط ‪ReactJS‬‬
‫در اين بخش می خواهيم به چگونگی برپا کردن محيط جهت برنامه نويسی موفق در ‪ ReactJS‬بپردازيم‪.‬‬
‫توجه داشته باشيد که برای انجام اين کار مراحل زيادی نياز است‪ ،‬اما اين کارها در آينده فرآيند برنامه‬
‫نويسی را سرعت می بخشند‪ .‬برای انجام اين کار به ‪ NodeJS‬نياز خواهيم داشت‪ .‬بنابراين اگر آن را‬
‫نصب نکرده ايد‪ ،‬به لينک جدول زير مراجعه کنيد‪.‬‬
‫‪14‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫نرم افزار و توضيحات‬ ‫رديف‬
‫‪ NodeJs‬و ‪NPM‬‬
‫‪ NodeJS‬پلتفرمی است که برای توسعه ی ‪ ReactJS‬به آن نياز است‪ .‬به برپا کردن محيط‬ ‫‪1‬‬
‫‪ NodeJS‬مراجعه کنيد‪.‬‬
‫پس از نصب موفق ‪ NodeJS‬می توانيم با استفاده از ‪ React ،npm‬را نصب کنيم‪ .‬به دو صورت زير می‬
‫توانيد ‪ NodeJS‬را نصب کنيد‪:‬‬
‫‪ ‬استفاده از ‪ webpack‬و ‪.babel‬‬

‫‪ ‬استفاده از دستور ‪create-react-app‬‬
‫نصب ‪ ReactJS‬با استفاده از ‪ webpack‬و ‪babel‬‬
‫وب پک يک ماژول مجموعه ای است (ماژول های مستقل را مديريت کرده و آن ها را بارگيری می کند)‪.‬‬
‫وب پک ماژول های وابسته را گرفته و آن ها را به يک فايل واحد کامپايل می کند‪ .‬طی برنامه نويسی با‬
‫استفاده از خط فرمان يا با پيکربندی آن با استفاده از فايل ‪ webpack.config‬می توانيد از وب پک‬
‫استفاده کنيد‪.‬‬
‫بابل يک کامپايلر و ترنسپايلر جاوا اسکريپت است‪ Babel .‬در تبديل يک سورس کد به سورس کد ديگر‬
‫کاربرد دارد‪ .‬با استفاده از اين قابليت می توانيد در کد خود از امکانات جديد ‪ ES6‬استفاده کنيد‪ ،‬به گونه‬
‫ای که بابل اين امکانات را به ‪ ES5‬قديمی و ساده تبديل می کند تا بتوان از آن ها در تمامی مرورگرها‬
‫استفاده کرد‪.‬‬
‫‪15‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫مرحله ‪ :1‬ايجاد پوشه ی اصلی برای ‪ReactJS‬‬
‫در دسکتاپ پوشه ای با نام ‪ reactApp‬ايجاد کنيد تا بتوانيد با استفاده از دستور ‪ mkdir‬فايل های مورد‬
‫نياز را نصب کنيد‪.‬‬
‫‪C:\Users\username\Desktop>mkdir reactApp‬‬
‫‪C:\Users\username\Desktop>cd reactApp‬‬
‫برای اين که بتوانيد هر ماژولی را ايجاد کنيد‪ ،‬نياز است که فايل ‪ package.json‬را توليد کنيد‪ .‬بنابراين‬
‫پس از ايجاد اين پوشه ما بايد يک فايل ‪ package.json‬را ايجاد کنيم‪ .‬برای انجام اين کار از ‪ cmd‬دستور‬
‫‪ npm init‬را وارد کنيد‪.‬‬
‫‪C:\Users\username\Desktop\reactApp>npm init‬‬
‫اين دستور اطالعاتی در رابطه با ماژول را درخواست می کند؛ اطالعاتی مانند اسم بسته‪ ،‬توضيحات‪ ،‬ناشر‬
‫و ‪ . ...‬با استفاده از گزينه ی –‪ y‬می توانيد از اين مرحله عبور کنيد‪.‬‬
‫‪C:\Users\username\Desktop\reactApp>npm init -y‬‬

‫‪Wrote to C:\reactApp\package.json:‬‬
‫{‬
‫‪"name": "reactApp",‬‬
‫‪"version": "1.0.0",‬‬
‫‪"description": "",‬‬
‫‪"main": "index.js",‬‬
‫{ ‪"scripts":‬‬
‫‪16‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫"‪"test": "echo \"Error: no test specified\" && exit 1‬‬
‫‪},‬‬
‫‪"keywords": [],‬‬
‫‪"author": "",‬‬
‫}‪"license": "ISC‬‬
‫مرحله ‪ :2‬نصب ‪ ReactJS‬و ‪react dom‬‬
‫با توجه به اين که کار اصلی ما نصب ‪ ReactJS‬است‪ ،‬جهت نصب آن و بسته های ‪ DOM‬آن به ترتيب‬
‫از دستورات ‪ install react‬و ‪ react-dom‬متعلق به ‪ npm‬استفاده کنيد‪ .‬می توانيد با گزينه ی ‪save--‬‬
‫بسته هايی که ما نصب کرده ايم را به فايل ‪ package.json‬اضافه کنيد‪.‬‬
‫‪C:\Users\Tutorialspoint\Desktop\reactApp>npm install react –save‬‬

‫‪C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save‬‬
‫يا می توانيد تمامی آن ها را مانند زير در يک دستور واحد نصب کنيد‪.‬‬
‫‪C:\Users\username\Desktop\reactApp>npm install react react-dom --save‬‬
‫مرحله سوم ‪ :‬نصب وب پک‬
‫با توجه به اين که ما جهت توليد اين مجموعه در حال استفاده از وب پک هستيم‪webpack-dev- ،‬‬
‫‪ server‬و ‪ webpack-cli‬را نصب کنيد‪.‬‬
‫‪17‬‬
‫‪88146323 - 88446780 - 88146330‬‬
C:\Users\username\Desktop\reactApp>npm install webpack –save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save
.‫يا می توانيد تمامی آن ها را مانند زير در يک دستور واحد نصب کنيد‬
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server

webpack-cli --save
Babel ‫ نصب‬: ‫مرحله چهارم‬
‫ و‬babel-preset-react ،babel-preset-env ،babel-loader ،babel-core ‫بابل و پالگين های‬

.‫ را نصب کنيد‬html-webpack-plugin
C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev

C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-
dev
.‫يا می توانيد مانند زير تمامی آن ها را در يک دستور واحد نصب کنيد‬
C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-

preset-env
babel-preset-react html-webpack-plugin --save-dev
‫ ايجاد فايل ها‬:‫مرحله پنجم‬
، main.js ،App.js ،index.html ‫جهت تکميل نصب بايد برخی از فايل های خاص را مانند‬
18
88146323 - 88446780 - 88146330
‫ می توانيد اين فايل ها را يا به صورت دستی و يا با استفاده‬.‫ ايجاد کنيم‬babelrc. ‫ و‬Webpack.config.js
.‫ ايجاد کنيد‬cmd ‫از‬
C:\Users\username\Desktop\reactApp>type nul > index.html

C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc
‫ سرور و لودرها‬،‫ تنظيم کامپايلر‬: ‫مرحله ششم‬
‫ می خواهيم نقطه ی ورودی وب‬.‫ را باز کنيد و کد زير را به آن اضافه کنيد‬webpack-config.js ‫فايل‬
‫ مسير خروجی جايی است که سرور به برنامه‬.‫ شود‬main.js ‫پک را به گونه ای تنظيم کنيم که اين نقطه‬
.‫خدمات می رساند‬
‫ اين پورت را می توانيد به صورت‬.‫ تنظيم می کنيم‬8001 ‫همچنين سرور برنامه نويسی را بر روی پورت‬
.‫دلخواه نيز انتخاب کنيد‬
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './main.js',
output: {
)'path: path.join(__dirname, '/bundle,
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8080 },
module: {
19
88146323 - 88446780 - 88146330
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
, plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
‫" را از داخل‬test" "echo \"Error: no test specified\" && exit 1" ‫ را باز کنيد و‬Package.json
‫ دليل پاک کردن اين خط اين است که ما در اين آموزش نيازی به آزمايش‬.‫" پاک کنيد‬scripts" ‫شیء‬
.‫ را اضافه کنيم‬build ‫ و‬start ‫ بياييد در عوض دستورات‬.‫نخواهيم داشت‬
"start": "webpack-dev-server --mode development --open --hot",

"build": "webpack --mode production"
index.html : ‫مرحله هفتم‬
‫" را به عنوان عنصر اصلی برنامه تنظيم می‬div id = "app .‫ معمولی است‬HTML ‫اين مرحله صرفا يک‬
‫کنيم و‬
.‫ که در واقع فايل برنامه ی ما است را اضافه می کنيم‬index_bundle.js ‫اسکريپت‬
<!DOCTYPE html>
<html lang = "en">
<head>
20
88146323 - 88446780 - 88146330
‫>"‪<meta charset = "UTF-8‬‬
‫>‪<title>React App</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<div id = "app‬‬
‫>‪</div‬‬
‫>'‪<script src = 'index_bundle.js‬‬
‫>‪</script‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫مرحله هشتم ‪ App.jsx :‬و ‪main.js‬‬
‫اين مرحله اولين جزء ری اکت را دربر می گيرد‪ .‬در يکی از بخش های بعدی به صورت مفصل به اجزای‬
‫ری اکت خواهيم پرداخت‪ .‬اين جزء باعث می شود ‪ Hello World‬رندر شود‪.‬‬
‫‪App.js‬‬
‫;'‪import React, { Component } from 'react‬‬

‫{‪class App extends Component‬‬
‫{)(‪render‬‬
‫(‪return‬‬
‫>‪<div‬‬
‫>‪<h1>Hello World</h1‬‬
‫>‪</div‬‬
‫;)‬
‫}‬
‫}‬
‫;‪export default App‬‬
‫بايد اين جزء را ايمپورت کنيم و آن را در عنصر اصلی برنامه ی خود رندر کنيم تا بتوانيم آن را در‬
‫مرورگر ببينيم‪.‬‬
‫‪main.js‬‬
‫‪21‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫;'‪import React from 'react‬‬
‫;'‪import ReactDOM from 'react-dom‬‬
‫;'‪import App from './App.js‬‬
‫;))'‪ReactDOM.render(<App />, document.getElementById('app‬‬
‫نکته‪ :‬هر زمان که بخواهيد از چيزی استفاده کنيد‪ ،‬بايد آن را در مرحله ی اول ايمپورت کنيد‪ .‬اگر می‬
‫خواهيد اين جزء در بخش های ديگر برنامه قابل استفاده باشد‪ ،‬بايد آن را پس از ايجاد ‪ export‬کنيد و‬
‫آن را در فايلی که می خواهيد از آن استفاده کنيد‪ import ،‬کنيد‪ .‬فايلی را با نام ‪ babelrc.‬ايجاد کنيد و‬
‫محتوای زير را در آن کپی کنيد‪.‬‬
‫{‬
‫]"‪"presets":["env", "react‬‬
‫}‬
‫مرحله نهم ‪ :‬اجرای سرور‬
‫عمليات برپا کردن محيط تمام شده است و می توانيم با اجرای دستور زير سرور را راه اندازی کنيم‪.‬‬
‫‪C:\Users\username\Desktop\reactApp>npm start‬‬
‫با اجرای اين کار پورتی که ما می خواهيم در مرورگر باز شود‪ ،‬نمايش داده می شود‪ .‬اين پورت برای ما‬
‫‪ http://localhost:8001/‬است‪ .‬بعد از اين که اين پورت را باز کنيم‪ ،‬نتيجه ی زير نمايش داده می شود‪.‬‬
‫‪22‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫مرحله دهم ‪ :‬توليد نرم افزار‬
‫در نهايت برای آن که بتوانيد نرم افزار را توليد کنيد‪ ،‬بايد دستور ‪ build‬را در ‪ cmd‬مانند زير اجرا کنيد‪.‬‬
‫‪C:\Users\Tutorialspoint\Desktop\reactApp>npm run build‬‬
‫اين کار باعث می شود اين نرم افزار مانند زير در پوشه ی فعلی توليد شود‪.‬‬
‫استفاده از دستور ‪ create-react-app‬برای ‪ReactJS‬‬
‫به جای استفاده از وب پک و بابل می توانيد به صورت ساده تری ‪ ReactJS‬را با نصب ‪create-react-‬‬
‫‪ app‬نصب کنيد‪.‬‬
‫‪23‬‬
‫‪88146323 - 88446780 - 88146330‬‬
create-react-app ‫ نصب‬: 1 ‫مرحله‬
.‫ نصب کنيد‬Create React App ‫ مانند زير‬cmd ‫به دسکتاپ برويد و با استفاده از‬
C:\Users\Tutorialspoint>cdC:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app
‫ ايجاد شود و تمامی فايل های مورد نياز در‬my-app ‫ در دسکتاپ پوشه ای به نام‬،‫اين کار باعث می شود‬
.‫آن نصب شود‬
‫ حذف تمامی فايل های منبع‬: 2 ‫مرحله‬
.‫ توليد شده برويد و مانند زير تمامی فايل ها را حذف کنيد‬my-app ‫ موجود در پوشه ی‬src ‫به پوشه ی‬
C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y
‫ اضافه کردن فايل ها‬: 3 ‫مرحله‬
.‫ فايل ها را اضافه کنيد‬src ‫ موجود در پوشه ی‬index.js ‫ و‬index.css ‫با استفاده از نام های‬
C:\Users\Tutorialspoint\Desktop\my-app\src>typenul > index.css

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js
.‫ اضافه کنيد‬index.js ‫کد زير را به فايل‬
import React from 'react';

import ReactDOM from 'react-dom';
import './index.css';
24
88146323 - 88446780 - 88146330
‫مرحله ‪ : 4‬اجرای پروژه‬
‫در نهايت با استفاده از دستور ‪ start‬پروژه را اجرا کنيد‪.‬‬
‫‪npm start‬‬
‫‪ JSX‬در ‪React JS‬‬
‫‪ ReactJS‬به جای جاوا اسکريپت معمولی جهت قالب بندی از ‪ JSX‬استفاده می کند‪ .‬اجباری در استفاده‬
‫از آن وجود ندارد‪ ،‬اما مزايای زير را به همراه دارد‪:‬‬
‫‪ JSX ‬سريع تر است؛ زيرا طی کامپايل کد به جاوا اسکريپت کار بهينه سازی را انجام می دهد‪.‬‬
‫‪ ‬اصطالحا ‪ type-safe‬است و اغلب خطاها را می توان طی کامپايل شناسايی کرد‪.‬‬
‫‪ ‬نوشتن قالب ها به شرط آن که با ‪ HTML‬آشنا باشيد را آسان تر و سريع تر می کند‪.‬‬
‫استفاده از ‪ JSX‬در ‪ReactJS‬‬
‫‪25‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫‪ JSX‬در بسياری از موارد شبيه به ‪ HTML‬معمولی است وقبال در بخش برپا کردن محيط از آن استفاده‬
‫کرده ايم‪ .‬به کد ‪ App.jsx‬نگاه کنيد‪ ،‬در اين کد ‪ div‬برگشت داده می شود‬
‫‪App.jsx‬‬
‫{ ‪class App extends React.Component‬‬
‫{ )(‪render‬‬
‫( ‪return‬‬
‫>‪<div‬‬
‫!!!‪Hello World‬‬
‫>‪</div‬‬
‫;)‬
‫}‬
‫با وجود اينکه ‪ JSX‬شبيه به ‪ HTML‬است ‪ ,‬اما اين دو تفاوت هايی دارند که در زمان کار با ‪ JSX‬بايد‬
‫آنها را در نظر داشت‪.‬‬
‫‪26‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫عناصر تو در تو‬
‫اگر می خواهيد عناصر بيشتری را برگشت دهيد‪ ،‬نياز است که آن را با يک عنصر نگه دارنده بپوشانيد‪.‬‬
‫توجه کنيد که ما چگونه از ‪ div‬به عنوان يک پوشاننده برای ‪ h2 ،h1‬و ‪ p‬استفاده کرده ايم‪.‬‬
‫‪App.jsx‬‬
‫>‪<div‬‬
‫>‪<h1>Header</h1‬‬
‫>‪<h2>Content</h2‬‬
‫>‪<p>This is the content!!!</p‬‬
‫>‪</div‬‬
‫;)‬
‫}‬
‫}‬
‫‪27‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫صفات مربوط ‪ReactJS‬‬
‫عالوه بر ويژگی ها و صفت های ‪ HTML‬معمولی می توانيم از صفات اختصاصی مخصوص به خودمان نيز‬
‫استفاده کنيم‪ .‬زمانی که می خواهيم صفات اختصاصی را اضافه کنيم بايد از پيشوند ‪ -data‬استفاده کنيم‪.‬‬
‫در مثال زير ما ‪ data-myattribute‬را به عنوان صفتی برای عنصر ‪ p‬اضافه کرده ايم‪.‬‬

‫>‪<div‬‬
‫>‪<h2>Content</h2‬‬
‫>‪<p data-myattribute = "somevalue">This is the content!!!</p‬‬
‫>‪</div‬‬
‫;)‬
‫}‬
‫}‬
‫عبارت های جاوا اسکريپت‬
‫از اين عبارت ها می توان داخل ‪ JSX‬استفاده کرد‪ .‬تنها کافی است آن را داخل {} قرار دهيم‪ .‬مثال زير‬
‫‪ 2‬را نمايش می دهد‪.‬‬

‫‪28‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫>‪<div‬‬
‫>‪<h1>{1+1}</h1‬‬
‫>‪</div‬‬
‫;)‬
‫}‬
‫}‬
‫داخل ‪ JSX‬نمی توانيم از دستورات ‪ if else‬استفاده کنيم‪ ،‬در عوض می توانيم از عبارت های شرطی (بر‬
‫مبنای ‪ )3‬استفاده کنيم‪ .‬در مثال زير متغير ‪ i‬برابر با ‪ 1‬است‪ .‬بنابراين مرورگر ‪ true‬را نمايش می دهد‪.‬‬
‫اگر مقدار اين متغير را تغيير دهيم‪ ،‬مرورگر ‪ false‬را نمايش می دهد‪.‬‬
‫‪29‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫;‪var i = 1‬‬
‫>‪<div‬‬
‫>‪<h1>{i == 1 ? 'True!' : 'False'}</h1‬‬
‫>‪</div‬‬
‫;)‬
‫}‬
‫}‬
‫سبک بندی‬
‫‪ ReactJS‬توصيه می کند از سبک های درون خطی استفاده شود‪ .‬زمانی که می خواهيم اين نوع از سبک‬
‫ها را تنظيم کنيم‪ ،‬نياز است از سينتکس ‪ camelCase‬استفاده کنيم‪ ReactJS .‬نيز به صورت خودکار‬
‫‪ px‬را پس از مقدار عددی عناصر مشخص می چسباند‪ .‬در مثال زير چگونگی اضافه کردن ‪myStyle‬‬
‫درون خطی به عنصر ‪ h1‬نشان داده شده است‪.‬‬
‫‪30‬‬
‫‪88146323 - 88446780 - 88146330‬‬
class App extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
export default App;
‫کامنت‬
31
88146323 - 88446780 - 88146330
‫اگر بخواهيم کامنت نويسی کنيم و بخواهيم اين کامنت ها را داخل بخش فرزند يک برچسب بنويسيم‪،‬‬
‫بايد از {} استفاده کنيم‪ .‬بهتر است هميشه در زمان نوشتن کامنت ها از {} استفاده شود‪ ،‬چرا که حفظ‬
‫ثبات طی برنامه نويسی مهم است‪.‬‬
‫>‪<div‬‬
‫}‪{//End of the line Comment...‬‬
‫}‪{/*Multi line comment...*/‬‬
‫>‪</div‬‬
‫;)‬
‫}‬
‫}‬
‫قرارداد نام گذاری در ‪ReactJS‬‬
‫هميشه در برچسب های ‪ HTML‬از اسم های برچسب با حروف کوچک استفاده می شود‪ .‬اين در حالی‬
‫است که اجزای ‪ ReactJS‬با حرف بزرگ آغاز می شوند‪.‬‬
‫‪32‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫نکته ‪ :‬بهتر است که به جای ‪ Class‬و ‪ for‬به عنوان اسامی صفت ‪ XML‬از ‪ ClassName‬و ‪HtmlFor‬‬
‫استفاده شود‪.‬‬
‫اين مطلب در صفحه ی رسمی ‪ ReactJS‬به صورت زير توضيح داده شده است‪:‬‬
‫با توجه به اين که ‪ JSX‬جاوا اسکريپت است‪ ،‬بهتر است از شناساگرهايی مانند ‪ class‬و ‪ for‬به عنوان‬
‫اسامی صفات ‪ XML‬استفاده نشود‪ .‬در عوض بهتر است در اجزای ‪ DOM ReactJS‬به ترتيب از ويژگی‬
‫هايی مانند ‪ className‬و ‪ htmlFor‬استفاده شود‪.‬‬
‫اجزا ) ‪ ( Component‬در ‪RejectJs‬‬
‫در اين بخش می خواهيم به چگونگی ترکيب اجزا بپردازيم‪ ،‬به گونه ای که نگهداری از برنامه آسان تر‬
‫شود‪ .‬با استفاده از اين روش می توانيم اجزای خود را بدون تحت تأثير قرار دادن بخش های باقی مانده‬
‫ی صفحه به روز رسانی کرده و تغيير دهيم‪.‬‬
‫مثال بدون ‪State‬‬
‫اولين جزء ما درمثال زير ‪ App‬است‪ .‬اين جزء مالک ‪ Header‬و ‪ Content‬است‪ .‬می خواهيم به صورت‬
‫مجزا ‪ Header‬و ‪ Content‬را ايجاد کنيم و صرفا آن ها را داخل درخت ‪ JSX‬جزء ‪ App‬خود اضافه کنيم‪.‬‬
‫تنها جزء ‪ App‬بايد اکسپورت شود‪.‬‬
‫‪App.jsx‬‬
‫‪33‬‬
‫‪88146323 - 88446780 - 88146330‬‬
<div>
<Header/>
<Content/>
</div>
);
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
34
88146323 - 88446780 - 88146330
‫>‪</div‬‬
‫;)‬
‫}‬
‫}‬
‫برای آن که بتوانيم نتيجه را در صفحه نمايش دهيم‪ ،‬بايد اين کد را داخل فايل ‪ main.js‬ايمپورت کنيم و‬
‫‪ )(reactDOM.render‬را فراخوانی کنيم‪ .‬قبال اين کار را در بخش برپا کردن محيط انجام داده ايم‪.‬‬
‫‪main.js‬‬
‫;'‪import App from './App.jsx‬‬
‫کد باال نتيجه ی زير را ايجاد می کند‪.‬‬
‫‪35‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫مثال با ‪State‬‬
‫در اين مثال می خواهيم ‪ state‬يا حالت جزء مالک (‪ )App‬را تنظيم کنيم‪ .‬با توجه به اينکه جزء ‪Header‬‬
‫هيچ حالتی ندارد‪ ،‬آن را مانند مثال قبل اضافه می کنيم‪ .‬به جای برچسب ‪ content‬عناصر ‪ table‬و ‪tbody‬‬
‫را ايجاد می کنيم و از طريق آن ها به ازای هر شیء از آرايه ی ‪ TableRow ،data‬را به صورت پويا درج‬
‫می کنيم‪.‬‬
‫همان طور که مشخص است‪ ،‬ما از سينتکس ‪ )>=( EcmaScript 2015 arrow‬استفاده می کنيم‪ .‬چرا که‬
‫اين سينتکس تميزتر از سينتکس قديمی جاوا اسکريپت به نظر می رسد‪ .‬از اين طريق می توانيم عناصر‬
‫خود را با کدهای کمتری ايجاد کنيم‪ .‬اين سينتکس به ويژه در مواقعی کاربرد دارد که بخواهيم ليستی را‬
‫با آيتم های بسياری ايجاد کنيم‪.‬‬
‫‪App.jsx‬‬
‫{ )(‪constructor‬‬
‫;)(‪super‬‬
‫‪this.state = { data:‬‬
‫[‬
‫{‬
‫‪"id":1,‬‬
‫‪"name":"Foo",‬‬
‫"‪"age":"20‬‬
‫‪36‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫‪},‬‬
‫{‬
‫‪"id":2,‬‬
‫‪"name":"Bar",‬‬
‫"‪"age":"30‬‬
‫‪},‬‬
‫{‬
‫‪"id":3,‬‬
‫‪"name":"Baz",‬‬
‫"‪"age":"40‬‬
‫}‬
‫]‬
‫}‬
‫}‬
‫>‪<div‬‬
‫>‪<Header/‬‬
‫>‪<table‬‬
‫‪37‬‬
‫‪88146323 - 88446780 - 88146330‬‬
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person} />)}
</tbody>
</table>
</div>
);
render() {
return (
<div>
<h1>Header</h1>
</div>
);
class TableRow extends React.Component {
38
88146323 - 88446780 - 88146330
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
export default App;
main.js
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
‫ از اين طريق‬.‫() استفاده می کنيم‬key = {i} inside map ‫ توجه داشته باشيد که ما از تابع‬: ‫نکته‬
‫ به جای آن که زمانی که چيزی‬.‫ راحت تر می تواند صرفا عناصر ضروری را به روز رسانی کند‬ReactJS
39
88146323 - 88446780 - 88146330
‫تغيير می کند‪ ،‬کل ليست را مجددا رندر کند‪ .‬در صورتی که با تعداد زيادی از عناصری سروکار داشته‬
‫باشيم که به صورت پويا ايجاد شده اند‪ ،‬اين کار باعث می شود عملکرد تا حد چشمگيری افزايش يابد‪.‬‬
‫حالت )‪ (State‬های ‪ReactJS‬‬
‫‪ State‬يا حالت مکانی است که داده ها از آن سرچشمه می گيرند‪ .‬همواره بهتر است تا حد امکان حالت‬
‫خود را ساده در نظر بگيريم و تعداد اجزای حالت دار را به حداقل برسانيم‪ .‬مثال اگر ده جزء داشته باشيم‬
‫که داده هايی را از حالتی نياز دارند‪ ،‬بهتر است يک جزء نگهدارنده را ايجاد کنيم که اين حالت را برای‬
‫تمامی اين اجزا نگهداری کند‪.‬‬
‫استفاده از ‪Props‬‬
‫در نمونه کد زير چگونگی ايجاد يک جزء حالت دار با استفاده از سينتکس ‪ EcmaScript2016‬نشان‬
‫داده شده است‪.‬‬
‫‪App.jsx‬‬
‫‪class App extends React.Component‬‬
‫‪40‬‬
‫‪88146323 - 88446780 - 88146330‬‬
{ constructor(props) {
super(props);
this.state = {
header: "Header from state...",
content: "Content from state..."
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
export default App;
main.js

41
88146323 - 88446780 - 88146330
‫اين کار باعث می شود نتيجه ی زير نمايش داده شود‬
‫مروری بر ‪ Props‬مربوط به ‪ReactJS‬‬
‫تفاوت اصلی بين ‪ state‬و ‪ props‬اين است که ‪ prop‬ها تغيير ناپذير هستند‪ .‬دليل اين امر اين است که‬
‫جزء نگهدارنده بايد حالتی را تعريف کند که بتوان آن را به روز رسانی کرده و تغيير داد‪ .‬اين در حالی‬
‫است که اجزای فرزند تنها بايد داده ها را از حالت با استفاده از ‪ props‬عبور دهند‪.‬‬
‫استفاده از‪props‬‬
‫اگر در جزء خود به داده های تغييرناپذيری نياز داريم‪ ،‬می توانيم صرفا ‪ props‬را به تابع‬
‫)(‪reactDOM.render‬موجود در ‪ main.js‬اضافه کنيم و از آن داخل جزء خود استفاده کنيم‪.‬‬
‫‪App.jsx‬‬
‫‪42‬‬
‫‪88146323 - 88446780 - 88146330‬‬
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
export default App;
main.js

ReactDOM.render(<App headerProp = "Header from props..."
contentProp = "Content from props..."/>,
document.getElementById('app'));
export default App;

.‫اين کار باعث می شود نتيجه ی زير نمايش داده شود‬
43
88146323 - 88446780 - 88146330
‫ پيش فرض‬Props
‫ به جای آن که آن‬،‫می توانيد مقادير مشخصه ی پيش فرض را مستقيما در سازنده ی جزء تنظيم کنيد‬
.‫ اضافه کنيد‬reactDom.render() ‫را به عنصر‬
App.jsx

render() {
return (
<div>
</div>
);
App.defaultProps = {
44
88146323 - 88446780 - 88146330
headerProp: "Header from props...",
contentProp:"Content from props..."
export default App;
main.js
.‫خروجی مانند قبل است‬
45
88146323 - 88446780 - 88146330
ReactJS ‫ مربوط به‬State ‫ و‬Props
‫ را در جزء‬state ‫ ما‬.‫ در برنامه نشان داده شده است‬props ‫ و‬state ‫در مثال زير چگونگی ترکيب‬
‫ و‬headerProp .‫ آن را به درخت جزء عبور داده ايم‬props ‫مادر تنظيم کرده ايم و با استفاده از‬
.‫ تنظيم کرده ايم‬render ‫ استفاده شده در اجزای فرزند را داخل تابع‬contentProp
App.jsx
constructor(props) {
super(props);
this.state = {
header: "Header from props...",
content: "Content from props..."
render() {
return (
<div>
<Header headerProp = {this.state.header}/>
<Content contentProp = {this.state.content}/>
</div>
46
88146323 - 88446780 - 88146330
);
render() {
return (
<div>
</div>
);
render() {
return
( <div>
</div>
);
47
88146323 - 88446780 - 88146330
‫}‬
‫}‬
‫‪main.js‬‬
‫;))'‪ReactDOM.render(<App/>, document.getElementById('app‬‬
‫نتيجه باز هم تغييری نخواهد کرد و تنها چيزی که تغيير می کند‪ ،‬منبع داده های ما است که در حال‬
‫حاضر از ‪ state‬سرچشمه می گيرند‪ .‬اگر بخواهيم اين برنامه را به روز رسانی کنيم‪ ،‬بايد ‪ state‬را به روز‬
‫رسانی کنيم و به دنبال آن تمامی اجزای فرزند به روز رسانی خواهند شد‪ .‬در بخش رويدادها بيشتر به‬
‫اين مطلب پرداخته شده است‪.‬‬
‫‪48‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫ارزيابی ويژگی ها ) ‪ ( Prop Validation‬در‪ReactJS‬‬
‫ارزيابی ويژگی ها روشی مفيد جهت استفاده ی صحيح از اجزا به شمار می رود‪ .‬از اين طريق می توانيم‬
‫طی برنامه نويسی از باگ ها و مشکالت آينده جلوگيری کنيم‪ ،‬مخصوصا زمانی که برنامه به اندازه ی‬
‫کافی بزرگ می شود‪ .‬همچنين اين قابليت خوانايی کد را افزايش می دهد‪ ،‬زيرا از اين طريق می توانيم‬
‫ببينيم که چگونه از هر يک از اجزا بايد استفاده شود‪.‬‬
‫ارزيابی ويژگی ها‬
‫در اين مثال می خواهيم جزء ‪ App‬را به همراه تمام ‪ prop‬هايی که نياز داريم‪ ،‬ايجاد کنيم‪.‬‬
‫‪ App.propTypes‬جهت ارزيابی ويژگی ها کاربرد دارد‪ .‬اگر برخی از ويژگی ها از نوع صحيحی که ما‬
‫تعيين کرده ايم استفاده نکنند‪ ،‬با هشدار کنسول مواجه می شويم‪ .‬بعد از مشخص کردن الگوهای‬
‫ارزيابی ‪ App.defaultProps‬را تنظيم می کنيم‪.‬‬
‫‪App.jsx‬‬
‫>‪<div‬‬
‫>‪<h3>Array: {this.props.propArray}</h3‬‬
‫>‪<h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3‬‬
‫>‪<h3>Func: {this.props.propFunc(3)}</h3‬‬
‫>‪<h3>Number: {this.props.propNumber}</h3‬‬
‫‪49‬‬
‫‪88146323 - 88446780 - 88146330‬‬
<h3>String: {this.props.propString}</h3>
<h3>Object: {this.props.propObject.objectName1}</h3>
</div>
);
App.propTypes = {
propArray: React.PropTypes.array.isRequired,
propBool: React.PropTypes.bool.isRequired,
propFunc: React.PropTypes.func,
propNumber: React.PropTypes.number,
propString: React.PropTypes.string,
propObject: React.PropTypes.object
App.defaultProps = {
propArray: [1,2,3,4,5],
propBool: true,
50
88146323 - 88446780 - 88146330
propFunc: function(e){return e},
propNumber: 1,
propString: "String value...",
propObject: {
objectName1:"objectValue1",
objectName2: "objectValue2",
objectName3: "objectValue3"
export default App;
main.js
51
88146323 - 88446780 - 88146330
‫‪ API‬جزء ) ‪ ( API Component‬در ‪ReactJS‬‬
‫در این بخش می خواهیم به بررسی ‪ API‬جزء در ری اکت بپردازیم‪ .‬برای این منظور به سه متد‬
‫‪ setState(),forceUpdate‬و )( ‪ReactDom.findDomNode‬می پردازیم‪ .‬در کالس های جدید‬
‫‪ ES6‬باید این ‪ api‬را به صورت دستی مقید کنیم‪ .‬در این مثال از )‪this.method.bind(this‬‬
‫استفاده خواهیم کرد‪.‬‬
‫‪Set State‬‬
‫متد )(‪ setState‬متدی است که در بروز رسانی حالت جزء کاربرد دارد‪ .‬این متد جای حالت را‬
‫عوض نمی کند بلکه صرفا تغییراتی را بر حالت اصلی اعمال می کند‪.‬‬
‫‪52‬‬
‫‪88146323 - 88446780 - 88146330‬‬
this.state = {
data: []
this.setStateHandler = this.setStateHandler.bind(this);
};
setStateHandler() {
var item = "setState..."
var myArray = this.state.data.slice();
myArray.push(item);
this.setState({data: myArray})
};
render() {
return (
<div>
<button onClick = {this.setStateHandler}>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
53
88146323 - 88446780 - 88146330
‫}‬
‫ما کار خود را با یک آرایه ی خالی آغاز کرده ایم‪ .‬هر بار که بر روی دکمه کلیک کنیم‪ ،‬حالت‬
‫مورد نظر ما به روز رسانی می شود‪ .‬اگر ‪ 5‬بار بر روی دکمه کلیک کنیم در این صورت نتیجه‬
‫زیر را شاهد خواهیم بود‪.‬‬
‫‪Force Update‬‬
‫گاهی اوقات نیاز است که جزء خود را به صورت دستی به روز رسانی کنیم‪ .‬برای انجام این کار‬
‫می توانیم از متد ‪ forceUpdate‬استفاده کنیم‪.‬‬
‫;)‪this.forceUpdateHandler = this.forceUpdateHandler.bind(this‬‬
‫;}‬
‫{ )(‪forceUpdateHandler‬‬
‫;)(‪this.forceUpdate‬‬
‫‪54‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫;}‬
‫>‪<div‬‬
‫>‪<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button‬‬
‫>‪<h4>Random number: {Math.random()}</h4‬‬
‫>‪</div‬‬
‫;)‬
‫}‬
‫}‬
‫می خواهیم عددی تصادفی را تنظیم کنیم که هر بار که بر روی دکمه کلیک می کنیم به روز‬
‫شود‪.‬‬
‫‪Find Dom Node‬‬

‫جهت دستکاری ‪ DOM‬ميتوانيم از متد )( ‪ ReactDOM.findDOMNode‬استفاده کنيم‪ .‬ابتدا بايد‬
‫‪ react-dom‬را ايمپورت کنيم‪.‬‬
‫‪55‬‬
‫‪88146323 - 88446780 - 88146330‬‬
constructor() {
super();
this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
};
findDomNodeHandler() {
var myDiv = document.getElementById('myDiv');
ReactDOM.findDOMNode(myDiv).style.color = 'green';
render() {
return (
<div>
<button onClick = {this.findDomNodeHandler}>FIND DOME

NODE</button>
<div id = "myDiv">NODE</div>
</div>
);
56
88146323 - 88446780 - 88146330
‫}‬
‫بعد اينکه بر روی دکمه کليک می شود ‪ ,‬عنصر ‪ myDiv‬به رنگ سبز در می آيد‪.‬‬
‫از به روز رسانی ‪ , 0.14‬اغلب متدهای ‪ API‬اجزای قديمی منسوخ يا حذف شده اند تا با ‪ ES6‬سازگار‬
‫شوند‪.‬‬
‫چرخه ی عمر اجزا ) ‪ ( Component Life Cycle‬در‪ReactJS‬‬
‫در اين بخش می خواهيم به متدهای چرخه ی عمر اجزا بپردازيم‪.‬‬
‫متدهای چرخه ی عمر‬
‫‪ ComponentWillMount ‬قبل از رندر شدن در هر دو سمت کالينت و سرور اجرا می شود‪.‬‬

‫‪ ComponentDidMount ‬پس از اولين رندر و تنها در سمت کالينت اجرا می شود‪ .‬در همين‬
‫مکان است که درخواست های ‪ AJAX‬و ‪ DOM‬يا به روز رسانی حاالت رخ می دهد‪ .‬اين متد در‬
‫يکپارچه شدن با فريمورک های جاوا اسکريپت ديگر و هر تابعی که اجرای آن با تأخير همراه‬
‫است‪ ،‬مثل ‪ setTimeout‬و ‪ setInterval‬کاربرد دارد‪ .‬ما برای به روز کردن حالت از اين متد‬
‫استفاده می کنيم تا بتوانيم متدهای چرخه ی عمر ديگر را فعال کنيم‪.‬‬
‫‪57‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫‪ ComponentWillReceiveProps ‬به محض به روز شدن ويژگی ها قبل از فراخوانی رندر‬
‫ديگر احضار می شود‪ .‬ما اين متد را از ‪ setNewNumber‬و زمانی که حالت را به روز کرديم‪،‬‬
‫فعال کرديم‪.‬‬
‫‪ ShouldComponentUpdate ‬مقدار ‪ true‬يا ‪ false‬را برگشت می دهد‪ .‬اين متد به روز بودن‬
‫يا نبودن جزء را مشخص می کند و به صورت پيش فرض بر روی ‪ true‬قرار دارد‪ .‬اگر مطمئن‬
‫هستيد که جزء مورد نظر شما پس از به روز شدن حالت يا ويژگی ها نيازی به رندر ندارد‪ ،‬می‬
‫توانيد مقدار ‪ false‬را برگشت دهيد‪.‬‬
‫‪ ComponentWillUpdate ‬درست قبل از رندر شدن فراخوانی می شود‪.‬‬
‫‪ ComponentDidUpdate ‬درست بعد از رندر شدن فراخوانی می شود‪.‬‬
‫‪ ComponentWillUnmount ‬پس از جدا شدن جزء از ‪ DOM‬فراخوانی می شود‪ .‬ما جزء‬
‫خود را در ‪ main.js‬از ‪ DOM‬جدا می کنيم‪.‬‬
‫در مثال زير حالت اوليه ی تابع سازنده را مشخص کرده ايم‪ .‬جهت به روز رسانی حالت از‬
‫‪ setNewnumber‬استفاده شده است‪ .‬تمامی متدهای چرخه ی عمر داخل جزء ‪ Content‬قرار دارند‪.‬‬
‫‪App.jsx‬‬
‫{ )‪constructor(props‬‬
‫;)‪super(props‬‬
‫{ = ‪this.state‬‬
‫‪data: 0‬‬
‫}‬
‫‪58‬‬
‫‪88146323 - 88446780 - 88146330‬‬
this.setNewNumber = this.setNewNumber.bind(this)
};
setNewNumber() {
this.setState({data: this.state.data + 1})
render() {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
componentWillMount() {
console.log('Component WILL MOUNT!')
componentDidMount() {
59
88146323 - 88446780 - 88146330
console.log('Component DID MOUNT!')
componentWillReceiveProps(newProps) {
console.log('Component WILL RECIEVE PROPS!')
shouldComponentUpdate(newProps, newState) {
return true;
componentWillUpdate(nextProps, nextState) {
console.log('Component WILL UPDATE!');
componentDidUpdate(prevProps, prevState) {
console.log('Component DID UPDATE!')
componentWillUnmount() {
console.log('Component WILL UNMOUNT!')
}
render() {
return (
<div>
60
88146323 - 88446780 - 88146330
<h3>{this.props.myNumber}</h3>
</div>
);
}
export default App;
main.js
setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
}, 10000);
.‫پس از رندر اوليه نتيجه ی زير نمايش داده می شود‬
61
88146323 - 88446780 - 88146330
‫فرم ها )‪ ( Forms‬در ‪ReactJS‬‬
‫در اين بخش می خواهيم به چگونگی استفاده از فرم ها در ‪ ReactJS‬بپردازيم‪.‬‬
‫مثال ساده‬
‫در مثال زير می خواهيم يک فرم ورودی را به کمک ‪ }value = {this.state.data‬تنظيم کنيم‪ .‬از اين‬
‫طريق می توانيم هر زمان که مقدار ورودی تغيير می کند‪ ،‬حالت را به روز رسانی کنيم‪ .‬ما در اينجا از‬
‫رويداد ‪ onChange‬استفاده کرده ايم‪ .‬اين رويداد تغييرات ورودی را زير نظر می گيرد و حالت را بر‬
‫اساس آن به روز رسانی می کند‪.‬‬
‫‪App.jsx‬‬
‫'‪data: 'Initial data...‬‬
‫}‬
‫;)‪this.updateState = this.updateState.bind(this‬‬
‫;}‬
‫{ )‪updateState(e‬‬
‫;)}‪this.setState({data: e.target.value‬‬
‫‪62‬‬
‫‪88146323 - 88446780 - 88146330‬‬
}
render() {
return (
<div>
<input type = "text" value = {this.state.data}
onChange = {this.updateState} />
<h4>{this.state.data}</h4>
</div>
);
export default App;
main.js
.‫ حالت به روز رسانی می شود‬،‫زمانی که مقدار متن ورودی تغيير می کند‬
63
88146323 - 88446780 - 88146330
‫مثال پيچيده‬
‫در مثال زير چگونگی استفاده از فرم ها از جزء فرزند نشان داده شده است‪ .‬متد ‪ onChange‬به روز‬
‫رسانی حالت را فعال می کند‪ .‬سپس اين به روز رسانی به مقدار ورودی فرزند داده می شود و در صفحه‬
‫نمايش داده می شود‪ .‬مثال مشابه در بخش رويدادها آورده شده است‪ .‬هر زمان که نياز باشد حالت را از‬
‫جزء فرزند به روز رسانی کنيم‪ ،‬بايد تابعی که به روز رسانی (‪ )updateState‬را به صورت يک ويژگی‬
‫(‪ )updateStateProp‬مديريت می کند را عبور دهيم‪.‬‬
‫‪App.jsx‬‬
‫'‪data: 'Initial data...‬‬
‫}‬
‫;)‪this.updateState = this.updateState.bind(this‬‬
‫;}‬
‫{ )‪updateState(e‬‬
‫‪64‬‬
‫‪88146323 - 88446780 - 88146330‬‬
this.setState({data: e.target.value});
render() {
return (
<div>
<Content myDataProp = {this.state.data}
updateStateProp = {this.updateState}></Content>
</div>
);
render() {
return (
<div>
<input type = "text" value = {this.props.myDataProp}
onChange = {this.props.updateStateProp} />
<h3>{this.props.myDataProp}</h3>
</div>
);
65
88146323 - 88446780 - 88146330
‫}‬
‫}‬
‫‪main.js‬‬
‫اين کار باعث می شود نتيجه ی زير حاصل شود‪.‬‬
‫رويدادها ) ‪ ( Events‬مربوط به ‪ReactJS‬‬
‫در اين بخش می خواهيم به چگونگی استفاده از رويدادها بپردازيم‪.‬‬
‫مثال ساده‬
‫اين مثال تا حدی ساده بوده و در آن می خواهيم تنها از يک جزء استفاده کنيم‪ .‬در اين مثال از رويداد‬
‫‪ onClick‬استفاده شده است‪ .‬اين رويداد پس از فشرده شدن دکمه تابع ‪ updateState‬را فعال می کند‪.‬‬
‫‪App.jsx‬‬
‫‪66‬‬
‫‪88146323 - 88446780 - 88146330‬‬
super(props);
this.state = {
data: 'Initial data...'
this.updateState = this.updateState.bind(this);
};
updateState() {
this.setState({data: 'Data updated...'})
render() {
return (
<div>
<button onClick = {this.updateState}>CLICK</button>
</div>
);
67
88146323 - 88446780 - 88146330
‫}‬
‫}‬
‫‪main.js‬‬
‫اين کد نتيجه ی زير را به همراه دارد‪.‬‬
‫رويدادهای فرزند‬
‫ما بايد حالت جزء مادر را از فرزند آن به روز رسانی کنيم‪ .‬می توانيم مديريت کننده ی رويدادی را‬
‫(‪ )updateState‬در جزء مادر ايجاد کنيم و آن را به عنوان يک ويژگی (‪ )updateStateProp‬به جزء‬
‫فرزند عبور دهيم و در آن جا صرفا آن را فراخوانی کنيم‪.‬‬
‫‪App.jsx‬‬
‫‪68‬‬
‫‪88146323 - 88446780 - 88146330‬‬
super(props);
this.state = {
data: 'Initial data...'
};
updateState() {
this.setState({data: 'Data updated from the child component...'})
render() {
return (
<div>
<Content myDataProp = {this.state.data}
updateStateProp = {this.updateState}></Content>
</div>
);
69
88146323 - 88446780 - 88146330
}
render() {
return (
<div>
<button onClick = {this.props.updateStateProp}>CLICK</button>
<h3>{this.props.myDataProp}</h3>
</div>
);
export default App;

main.js
.‫اين کار نتيجه ی زير را به همراه دارد‬
70
88146323 - 88446780 - 88146330
‫‪Ref‬ها مربوط به‪ReactJS‬‬
‫‪ Ref‬ها در برگشت دادن مرجعی به عنصر کاربرد دارند‪ .‬در اغلب مواقع بهتر است از ‪ ref‬ها پرهيز‬
‫کرد‪ ،‬اما اگر به اندازه گيری ‪ DOM‬و يا به افزودن متدها به اجزا نياز داريم‪ ref ،‬ها می توانند به ما‬
‫کمک کنند‪.‬‬
‫استفاده از ‪ Ref‬ها‬
‫در مثال زير چگونگی استفاده از ‪ ref‬ها جهت پاک کردن کادر ورودی نشان داده شده است‪ .‬تابع‬
‫‪ ClearInput‬به کمک مقدار ‪ "ref = "myInput‬به دنبال عنصر می گردد‪ ،‬حالت را ريست می کند و پس‬
‫از فشرده شدن دکمه تمرکز را به آن وارد می کند‪.‬‬
‫‪App.jsx‬‬

‫'' ‪data:‬‬
‫}‬
‫‪71‬‬
‫‪88146323 - 88446780 - 88146330‬‬
this.clearInput = this.clearInput.bind(this);
};
updateState(e) {
this.setState({data: e.target.value});
clearInput() {
this.setState({data: ''});
ReactDOM.findDOMNode(this.refs.myInput).focus();
render() {
return (
<div>
<input value = {this.state.data} onChange = {this.updateState}
ref = "myInput"></input>
<button onClick = {this.clearInput}>CLEAR</button>
</div>
);
72
88146323 - 88446780 - 88146330
‫}‬
‫}‬
‫‪main.js‬‬
‫بعد از فشرده شدن دکمه ورودی پاک شده و تمرکز بر روی آن قرار می گيرد‪.‬‬
‫کليدها ) ‪ (Keys‬در ‪ReactJS‬‬
‫کليدهای ‪ ، ReactJS‬زمان کار با اجزايی که به صورت پويا ايجاد شده اند و يا در مواقعی که ليست های‬
‫شما توسط کاربران تغيير داده شده اند‪ ،‬مفيد هستند‪ .‬با تنظيم مقدار ‪ key‬می توانيد بعد از تغييرات‬
‫منحصر به فرد بودن اجزای خود را حفظ کنيد‪.‬‬
‫استفاده از کليدها‬
‫‪73‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫بياييد به صورت پويا عناصر ‪ Content‬را به همراه ايندکس منحصر به فرد )‪ (i‬ايجاد کنيم‪ .‬تابع ‪ map‬سه‬
‫عنصر را از آرايه ی ‪ data‬ما ايجاد خواهد کرد‪ .‬با توجه به اينکه مقدار ‪ key‬برای تمامی عناصر بايد منحصر‬
‫به فرد باشد‪ ،‬برای هر يک از عناصر ايجاد شده ‪ i‬را به عنوان يک کليد تعيين می کنيم‪.‬‬
‫‪App.jsx‬‬
‫[‪data:‬‬
‫{‬
‫‪component: 'First...',‬‬
‫‪id: 1‬‬
‫‪},‬‬
‫{‬
‫‪component: 'Second...',‬‬
‫‪id: 2‬‬
‫‪},‬‬
‫{‬
‫‪component: 'Third...',‬‬
‫‪74‬‬
‫‪88146323 - 88446780 - 88146330‬‬
id: 3
render() {
return (
<div>
<div>
{this.state.data.map((dynamicComponent, i) => <Content
key = {i} componentData = {dynamicComponent}/>)}
</div>
</div>
);
render() {
return (
<div>
75
88146323 - 88446780 - 88146330
<div>{this.props.componentData.component}
</div>
<div>{this.props.componentData.id}</div>
</div>
);
export default App;
main.js
. ‫ هر يک از عناصر نمايش داده می شود‬Key ‫نتيجه ی زير برای مقادير‬
76
88146323 - 88446780 - 88146330
‫اگر در آينده برخی از عناصر را حذف کنيم‪ ،‬آن ها را اضافه کنيم يا ترتيب عناصری که به صورت پويا‬
‫ايجاد شده اند را تغيير دهيم‪ ReactJS ،‬برای حفظ ردگيری هر يک از عناصر از مقادير ‪ key‬استفاده‬
‫خواهد کرد‪.‬‬
‫روتر ) ‪ ( Router‬در ‪ReactJS‬‬
‫در اين بخش می خواهيم به چگونگی تنظيم مسيريابی در برنامه بپردازيم‪.‬‬
‫مرحله ‪ 1 -‬نصب يک ‪ ReactJS‬روتر‬
‫ساده ترين راه برای نصب ‪ ReactJS‬روتر اجرای تکه کد زير در پنجره ی ‪ cmd‬است‪.‬‬
‫‪C:\Users\username\Desktop\reactApp>npm install react-router‬‬
‫مرحله ‪ 2 -‬ايجاد اجزا‬
‫در اين مرحله ‪ 4‬جزء را ايجاد خواهيم کرد‪ .‬از جزء ‪ App‬به عنوان يک منوی تب استفاده خواهيم کرد‪.‬‬
‫‪ 3‬جزء ديگر ( )‪ )(About ،Home‬و (‪ )Contact‬بعد از تغيير مسير رندر خواهند شد‪.‬‬
‫‪main.js‬‬

‫‪import { Router, Route, Link, browserHistory, IndexRoute } from 'react-‬‬
‫'‪router‬‬
‫‪77‬‬
‫‪88146323 - 88446780 - 88146330‬‬
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
{this.props.children}
</div>
export default App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
78
88146323 - 88446780 - 88146330
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
79
88146323 - 88446780 - 88146330
}
export default Contact;
‫ اضافه کردن روتر‬3 – ‫مرحله‬
‫ اين بار روتر‬،‫ مانند مثال قبل‬App ‫ به جای رندر کردن عنصر‬.‫حاال مسيرهايی را به برنامه اضافه می کنيم‬
.‫ همچنين برای هر يک از مسيرها اجزايی را تنظيم می کنيم‬.‫رندر خواهد شد‬
main.js
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
80
88146323 - 88446780 - 88146330
‫پس از باز شدن برنامه ‪ 3‬لينک قابل کليک ظاهر می شوند که از طريق آن ها می توانيم تغيير مسير دهيم‪.‬‬
‫مفهوم ‪ Flex‬در ‪ReactJS‬‬
‫‪ Flux‬يک مفهوم برنامه نويسی بوده که طی آن داده در يک مسير حرکت می کند‪ .‬اين داده به برنامه‬
‫وارد شده و تا زمانی که در صفحه نمايش داده شود‪ ،‬در آن به جريان می افتد‪.‬‬
‫عناصر فالکس‬
‫در ادامه به توضيح ساده ای از مفهوم فالکس پرداخته شده است‪ .‬در بخش بعد به چگونگی اجرای اين‬
‫مفهوم در برنامه خواهيم پرداخت‪.‬‬
‫‪ :Actions ‬اکشن ها جهت فعال کردن جريان داده به ‪ dispatcher‬ارسال می شوند‪.‬‬

‫‪ :Dispatcher ‬اين بخش مرکز مهم برنامه است‪ .‬تمامی داده ها به ‪ store‬ها ارسال می شوند‪.‬‬
‫‪ Store: Store ‬مکانی است که در آن حالت و منطق برنامه نگهداری می شوند‪ .‬هر يک از‬
‫‪ Store‬ها حالت خاصی را نگهداری می کند و هر زمان که نياز باشد آن را به روز می کند‪.‬‬
‫‪ View: view ‬داده را از ‪ Store‬دريافت کرده و برنامه را مجددا رندر می کند‪.‬‬
‫جريان داده در تصوير زير نمايش داده شده است‪.‬‬
‫‪81‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫مزايای فالکس‬
‫‪ ‬درک جريان يک طرفه ی داده آسان است‪.‬‬

‫‪ ‬نگهداری از برنامه آسان تر است‪.‬‬
‫‪ ‬اجزای برنامه به يکديگر کوپل نيستند‪.‬‬
‫استفاده از ‪ Flux‬در ‪ReactJS‬‬
‫در اين بخش می خواهيم به چگونگی پياده سازی الگوی فالکس در برنامه های ‪ ReactJS‬بپردازيم‪.‬‬
‫برای انجام اين کار از فريمورک ‪ Redux‬استفاده می کنيم‪ .‬هدف اين فصل ارائه ی ساده ترين مثال از‬
‫تمامی بخش های مورد نياز جهت اتصال ‪ Redux‬و ‪ ReactJS‬است‪.‬‬
‫مرحله – ‪ 1‬نصب‪Redux‬‬
‫‪Redux‬را از طريق پنجره ی ‪ cmd‬نصب می کنيم‪.‬‬
‫‪C:\Users\username\Desktop\reactApp>npm install --save react-redux‬‬
‫مرحله – ‪ 2‬ايجاد فايل ها و فولدرها‬
‫‪82‬‬
‫‪88146323 - 88446780 - 88146330‬‬
component ‫ ها و‬reducer ،‫ ها‬action ‫در اين بخش می خواهيم پوشه ها و فولدرهای مربوط به‬
.‫ بعد از انجام اين کار ساختار پوشه ها به شکل زير درخواهد آمد‬.‫های خود را ايجاد کنيم‬
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir actions
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir components
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir reducers
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > actions/actions.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul >
components/AddTodo.js C:\Users\Tutorialspoint\Desktop\reactApp>type
nul > components/Todo.js C:\Users\Tutorialspoint\Desktop\reactApp>type
nul > components/TodoList.js
‫ ها‬Action – 3 ‫مرحله‬
‫ از ويژگی‬store ‫اکشن ها اشياء جاوا اسکريپتی هستند که جهت اطالع دادن به داده برای ارسال شدن به‬
‫ اين عمل در اضافه کردن‬.‫ را تعريف کنيم‬ADD_TODO ‫ ما می خواهيم عمل‬.‫ استفاده می کنند‬type
‫ ايجاد کننده ی عملی است که عمل ما را برگشت می‬addTodo ‫ تابع‬.‫آيتم جديد به ليست کاربرد دارد‬
.‫دهد و برای هر يک از آيتم های ايجاد شده شناسه ای را تنطيم می کند‬
Actions/actions.js
83
88146323 - 88446780 - 88146330
‫'‪export const ADD_TODO = 'ADD_TODO‬‬
‫;‪let nextTodoId = 0‬‬
‫{ )‪export function addTodo(text‬‬
‫{ ‪return‬‬
‫‪type: ADD_TODO,‬‬
‫‪id: nextTodoId++,‬‬
‫‪text‬‬
‫;}‬
‫}‬
‫مرحله ‪ Reduser – 4‬ها‬
‫در حالی که عمل ها تنها تغييرات را در برنامه فعال می کنند‪ reducer ،‬ها اين تغييرات را مشخص می‬
‫کنند‪ .‬ما برای جستجوی عمل ‪ ADD_TODO‬از دستور ‪ switch‬استفاده می کنيم‪ reducer .‬تابعی است‬
‫که جهت محاسبه و برگشت يک حالت به روز شده دو پارامتر (‪ state‬و ‪ )action‬را می گيرد‪.‬‬
‫تابع اول در ايجاد آيتم جديد و تابع دوم در ارسال اين آيتم به ليست کاربرد دارد‪ .‬در همين راستا ما از‬
‫تابع کمکی ‪ combineReducers‬استفاده می کنيم‪ .‬در اين تابع می توانيم هر ‪ reducer‬جديدی را برای‬
‫روز مبادا اضافه کنيم‪.‬‬
‫‪Reducers/reducers.js‬‬
‫'‪import { combineReducers } from 'redux‬‬
‫'‪import { ADD_TODO } from '../actions/actions‬‬
‫{ )‪function todo(state, action‬‬

‫‪84‬‬
‫‪88146323 - 88446780 - 88146330‬‬
switch (action.type) {
case ADD_TODO:
return {
id: action.id,
text: action.text,
default:
return state
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
todo(undefined, action)
default:
85
88146323 - 88446780 - 88146330
return state
const todoApp = combineReducers({
todos
}) export default todoApp
Store - 5 ‫مرحله‬
‫ ايجاد‬،‫ ها‬reducer ‫ بعد از در اختيار داشتن‬.‫ مکانی است که در آن حالت برنامه نگهداری می شود‬Store
‫ عبور می دهيم که اين عنصر جزء‬provider ‫ را به عنصر‬Store ‫ ما ويژگی‬.‫ کار آسانی است‬Store ‫يک‬
.‫ ما را پوشش می دهد‬route
main.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App.jsx'
import todoApp from './reducers/reducers'
let store = createStore(todoApp)
86
88146323 - 88446780 - 88146330
let rootElement = document.getElementById('app')
render(
<Provider store = {store}>
<App />
</Provider>,
rootElement
‫ – جزء اصلی‬6 ‫مرحله‬
‫ بخش مهمی که‬.‫ آگاه باشد‬Redux ‫ تنها جزء اصلی بايد نسبت به‬.‫ جزء اصلی برنامه است‬، App ‫جزء‬
.‫ کاربرد دارد‬store ‫ به‬App ‫ اين تابع جهت اتصال جزء اصلی‬.‫ است‬connect ‫ تابع‬،‫بايد به آن توجه کرد‬
‫ گرفته و ويژگی‬store ‫ حالت را از‬select ‫ تابع‬.‫ را به عنوان يک آرگومان می گيرد‬select ‫ تابع‬،‫اين تابع‬
.‫) را برگشت می دهد که از آن ها می توانيم در اجزای خود استفاده کنيم‬visibleTodos( ‫هايی‬
App.jsx
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'
import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'

87
88146323 - 88446780 - 88146330
class App extends Component {
render() {
const { dispatch, visibleTodos } = this.props
return (
<div>
<AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
<TodoList todos = {visibleTodos}/>
</div>
function select(state) {
return {
visibleTodos: state.todos
export default connect(select)(App);
88
88146323 - 88446780 - 88146330
‫ – اجزاء ديگر‬7 ‫مرحله‬
.‫ آگاه باشند‬Redux ‫اين اجزا نبايد نسبت به‬
Components/AddTodo.js
import React, { Component, PropTypes } from 'react'
export default class AddTodo extends Component {
render() {
return (
<div>
<input type = 'text' ref = 'input' />
<button onClick = {(e) => this.handleClick(e)}>
Add
</button>
</div>
handleClick(e) {
const node = this.refs.input
const text = node.value.trim()
this.props.onAddClick(text)
89
88146323 - 88446780 - 88146330
node.value = ''
Components/Todo.js
export default class Todo extends Component {
render() {
return (
<li>
{this.props.text}
</li>
Components/TodoList.js
import Todo from './Todo.js'
export default class TodoList extends Component {
90
88146323 - 88446780 - 88146330
‫>‪<ul‬‬
‫>= ‪{this.props.todos.map(todo‬‬
‫‪<Todo‬‬
‫}‪key = {todo.id‬‬
‫}‪{...todo‬‬
‫>‪/‬‬
‫})‬
‫>‪</ul‬‬
‫)‬
‫}‬
‫}‬
‫بعد از اجرای برنامه می توانيم آيتم هايی را به ليست خود اضافه کنيم‪.‬‬
‫‪91‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫انيميشن ها ) ‪ ) Animation‬در ‪ReactJS‬‬
‫در اين بخش می خواهيم به چگونگی متحرک کردن عناصر با استفاده از ‪ ReactJS‬بپردازيم‪.‬‬
‫مرحله ‪ : 1‬نصب ‪React CSS Transitions Group‬‬
‫اين برنامه افزونه ای برای ‪ ReactJS‬بوده که با کمک آن می توان انيميشن ها و گذارهای ‪ CSS‬اوليه را‬
‫ايجاد کرد‪ .‬برای نصب آن از پنجره ی ‪ cmd‬کمک می گيريم‪.‬‬
‫‪C:\Users\username\Desktop\reactApp>npm install react-addons-css-‬‬

‫‪transition-group‬‬
‫مرحله ‪ : 2‬اضافه کردن يک فايل ‪CSS‬‬
‫بياييد يک فايل جديد ‪ style.css‬را ايجاد کنيم‪.‬‬
‫‪C:\Users\Tutorialspoint\Desktop\reactApp>type nul > css/style.css‬‬
‫برای اينکه بتوانيم در برنامه خود از اين فايل استفاده کنيم ‪ ,‬بايد آن را به عنصر هد ‪ index.html‬پيوند‬
‫دهيم‪.‬‬
‫>‪<!DOCTYPE html‬‬
‫>"‪<html lang = "en‬‬
‫>‪<head‬‬
‫>"‪<link rel = "stylesheet" type = "text/css" href = "./style.css‬‬
‫>"‪<meta charset = "UTF-8‬‬
‫>‪<title>React App</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id = "app"></div‬‬
‫>‪<script src = 'index_bundle.js'></script‬‬
‫>‪</body‬‬
‫‪92‬‬
‫‪88146323 - 88446780 - 88146330‬‬
</html>
‫ ظاهر کردن انيميشن‬: 3 ‫مرحله‬
‫عنصر‬ ‫ از‬, ‫کنيم‬ ‫را ايجاد‬ ReactJS ‫يک جزء ابتدايی‬ ‫می خواهيم‬ ‫حاال که‬
‫ به عنوان پوشاننده ی جزئی که ما می خواهيم آن را متحرک کنيم‬ReactCSSTransitionGroup
‫ استفاده خواهيم‬transitionAppearTimeout ‫ و‬transitionAppear ‫در اينجا از‬. ‫استفاده می شود‬
.‫ هستند‬false ،transitionLeave ‫ و‬transitionEnter ‫کرد در حالی که‬
App.jsx
var ReactCSSTransitionGroup = require('react-addons-css-transition-

group');
render() {
return (
<div>
<ReactCSSTransitionGroup transitionName = "example"
transitionAppear = {true} transitionAppearTimeout = {500}
transitionEnter = {false} transitionLeave = {false}>
<h1>My Element...</h1>
</ReactCSSTransitionGroup>
</div>
93
88146323 - 88446780 - 88146330
);
export default App;
main.js

ReactDOM.render(<App />, document.getElementById('app'));
.‫ خيلی ساده است‬CSS ‫متحرک سازی‬
Css/style.css
.example-appear {
opacity: 0.04;
.example-appear.example-appear-active {
opacity: 2;
transition: opacity 50s ease-in;

}
94
88146323 - 88446780 - 88146330
.‫بعد از باز کردن برنامه عنصر مورد نظر ما محو می شود‬
‫ متحرک سازی ورود و خروج‬: 4 ‫مرحله‬
‫از اين متحرک سازی ها می توانيم در زمانی استفاده کنيم که نياز است عناصری را از ليست حذف و يا‬
.‫به آن اضافه کنيم‬
App.jsx
var ReactCSSTransitionGroup = require('react-addons-css-transition-

group');
super(props);
this.state = {
items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
this.handleAdd = this.handleAdd.bind(this);
};
95
88146323 - 88446780 - 88146330
handleAdd() {
var newItems = this.state.items.concat([prompt('Create New Item')]);
this.setState({items: newItems}); }
handleRemove(i) {
var newItems = this.state.items.slice();
newItems.splice(i, 1);
this.setState({items: newItems});
render() {
var items = this.state.items.map(function(item, i) {
return (
<div key = {item} onClick = {this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick = {this.handleAdd}>Add Item</button>
96
88146323 - 88446780 - 88146330
<ReactCSSTransitionGroup transitionName = "example"
transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
{items}
</ReactCSSTransitionGroup>
</div>
);
export default App;
main.js

ReactDOM.render(<App />, document.getElementById('app'));
Css/style.css
.example-enter {
opacity: 0.04;
97
88146323 - 88446780 - 88146330
‫{ ‪.example-enter.example-enter-active‬‬
‫;‪opacity: 5‬‬
‫;‪transition: opacity 50s ease-in‬‬
‫}‬
‫{ ‪.example-leave‬‬
‫;‪opacity: 1‬‬
‫}‬
‫{ ‪.example-leave.example-leave-active‬‬
‫;‪opacity: 0.04‬‬
‫;‪transition: opacity 50s ease-in‬‬
‫}‬
‫پس از باز کردن برنامه و کليک کردن بر روی دکمه ‪ Add Item‬پيام زير نمايش داده ميشود‪.‬‬
‫بعد از وارد کردن اسم و ‪ OK‬کردن‪ ،‬عنصر جديد در حالت وارد شدن محو می شود‪.‬‬
‫‪98‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫حاال می توانيم با کليک کردن بر روی آيتم ها‪ ،‬برخی از آن ها (‪ )...Item 3‬را حذف کنيم‪ .‬اين کار‬
‫باعث می شود اين آيتم در حال خروج از ليست محو شود‪.‬‬
‫اجزای با مرتبه ی باالتر ) ‪ ( Higher Order Components‬در‪ReactJS‬‬
‫اين اجزا توابع جاوا اسکريپتی هستند که جهت افزودن قابليت های بيشتر به اجزای موجود کاربرد‬
‫دارند‪ .‬اين توابع خالص هستند‪ ،‬به اين معنی که داده ها را دريافت می کنند و بر اساس اين داده مقادير‬
‫را برگشت می دهند‪ .‬اگر اين داده تغيير کند‪ ،‬توابع با مرتبه ی باالتر با ورودی داده ی مختلف مجددا‬
‫اجرا می شوند‪ .‬اگر بخواهيم جزء برگشتی خود را به روز رسانی کنيم‪ ،‬نيازی نيست که اين اجزا را تغيير‬
‫دهيم‪ .‬تنها کاری که بايد انجام دهيم اين است که داده ای که تابع ما در حال استفاده از آن است را‬
‫تغيير دهيم‪.‬‬
‫‪99‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫جزء با مرتبه ی باالتر (‪ )HOC‬جزء معمولی را پوشانده است و داده های ورودی بيشتری را فراهم می‬
‫کند‪ .‬اين جزء در واقع تابعی است که يک جزء را می گيرد و جزء ديگری که جزء اصلی را می پوشاند‬
‫را برگشت می دهد‪.‬‬
‫بياييد برای درک بهتر اين مفهوم به مثال ساده ای نگاه کنيم‪ MyHOC .‬تابع با مرتبه ی باالتری است‬
‫که تنها جهت عبور دادن داده به ‪ MyComponent‬کاربرد دارد‪ .‬اين تابع ‪ MyComponent‬را‬
‫دريافت می کند‪ ،‬آن را به کمک ‪ newData‬ارتقا می دهد و جزء ارتقا يافته که در صفحه نمايش داده می‬
‫شود را برگشت می دهد‪.‬‬
‫{ = ‪var newData‬‬
‫‪data: 'Data from HOC...',‬‬
‫}‬
‫{ ‪var MyHOC = ComposedComponent => class extends React.Component‬‬
‫{ )(‪componentDidMount‬‬
‫{(‪this.setState‬‬
‫‪data: newData.data‬‬
‫;)}‬
‫}‬
‫;>‪return <ComposedComponent {...this.props} {...this.state} /‬‬
‫‪100‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫}‬
‫;}‬
‫{ ‪class MyComponent extends React.Component‬‬
‫>‪<div‬‬
‫>‪<h1>{this.props.data}</h1‬‬
‫>‪</div‬‬
‫)‬
‫}‬
‫}‬
‫;)‪export default MyHOC(MyComponent‬‬
‫اگر برنامه را اجرا کنيم‪ ،‬خواهيم ديد که اين داده به‪MyComponent‬عبور داده شده است‪.‬‬
‫‪101‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫نکته‪:‬‬
‫از اجزای با مرتبه ی باالتر می توان برای کارايی های مختلفی استفاده کرد‪ .‬اين توابع خالص اساس‬
‫برنامه نويسی تابعی را تشکيل می دهند‪ .‬بعد از آن که به آن عادت کرديد‪ ،‬خواهيد ديد که چقدر‬
‫نگهداری و ارتقاء برنامه برايتان راحت می شود‪.‬‬
‫بهترين شيوه ها در‪ReactJS‬‬
‫در اين بخش می خواهيم ليستی از بهترين شيوه ها‪ ،‬روش ها و تکنيک هايی که در برنامه نويسی به ما‬
‫کمک می کنند را ارائه کنيم‪.‬‬
‫‪ :State ‬تا حد امکان بايد از‪ State‬يا حالت دوری کرد‪ .‬جهت متمرکز کردن حالت و عبور دادن‬
‫آن به درخت اجزا به عنوان ويژگی اين روش‪ ،‬روش مناسبی است‪ .‬هر زمان که با گروهی از اجزا‬
‫سروکار داشته باشيم‪ ،‬به گونه ای که اين اجزا به داده های يکسانی نياز داشته باشند‪ ،‬بايد حول‬
‫آن ها يک عنصر نگهدارنده را تنظيم کنيم تا حالت را در خود نگهداری کند‪ .‬الگوی فالکس برای‬
‫مديريت حالت در برنامه های ‪ ReactJS‬روش خوبی است‪.‬‬
‫‪ PropType ‬ها‪ :‬هميشه بايد ‪ PropType‬ها را تعريف کرد‪ .‬از اين طريق می توانيم تمامی ويژگی‬
‫های برنامه را رديابی کنيم و راحت تر بر روی پروژه ی يکسان کار کنيم‪.‬‬
‫‪ :Render ‬منطق اغلب برنامه ها بايد داخل متد ‪ render‬در حرکت باشد‪ .‬تا حد امکان بايد سعی‬
‫کنيم منطق متدهای چرخه ی عمر اجزا را به حداقل برسانيم و اين منطق را به متد رندر انتقال‬
‫دهيم‪ .‬هرچه کمتر از حالت و ويژگی ها استفاده کنيم‪ ،‬کدمان تميزتر می شود‪ .‬هميشه بايد تا حد‬
‫امکان حالت را ساده کنيم‪ .‬اگر می خواهيم چيزی را از حالت يا ويژگی ها محاسبه کنيم‪ ،‬می توانيم‬
‫اين کار را داخل متد رندر انجام دهيم‪.‬‬
‫‪102‬‬
‫‪88146323 - 88446780 - 88146330‬‬
‫‪ :Composition ‬گروه ‪ ReactJS‬پيشنهاد می کند که از اصل مسئوليت واحد استفاده شود‪ .‬به اين‬
‫معنی که تنها يک جزء بايد مسئول يک کار باشد‪ .‬اگر برخی از اجزا بيش از يک کار داشته باشند‪،‬‬
‫در اين صورت بايد آن ها را تجزيه کنيم و برای هر کار يک جزء جديد ايجاد کنيم‪.‬‬
‫‪ ‬اجزای با مرتبه ی باالتر (‪ :)HOC‬در نسخه های قبلی ‪ ReactJS‬برای مديريت کارهای با قابليت‬
‫استفاده ی مجدد ميکسين هايی پيش بينی شده بود‪ .‬با توجه به اين که اين ميکسين ها در حال‬
‫حاضر منسوخ شده اند‪ ،‬يکی از راه حل های جايگزين استفاده از ‪ HOC‬است‪.‬‬
‫‪103‬‬
‫‪88146323 - 88446780 - 88146330‬‬

React JS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React JS

Uploaded by

Copyright:

Available Formats

‫‪1‬‬

‫آموزشگاه تحلیل داده‬

‫تخصصی ترين مرکز برنامه نويسی و ديتابيس در ايران‬

‫کتاب آموزش برنامه نويسی ‪ReactJS‬‬

‫مولف مهندس افشین رفوا‬

‫مقدمه ‪11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫توجه ‪11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫آموزش جامع ‪12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . React JS‬‬

‫مخاطبان ‪12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫پيش نيازها ‪12. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫مروری بر مطالب ‪13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫امکانات ‪13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫مزايای ‪14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫محدوديت های ‪14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫برپا کردن محيط ‪14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . ReactJS‬‬

‫نصب ‪ ReactJS‬با استفاده از ‪ webpack‬و ‪15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . babel‬‬

‫مرحله ‪ :1‬ايجاد پوشه ی اصلی برای ‪15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫مرحله ‪ :2‬نصب ‪ ReactJS‬و ‪17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . react dom‬‬

‫مرحله ‪ : 3‬نصب وب پک ‪17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫مرحله ‪ : 4‬نصب ‪18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Babel‬‬

‫مرحله ‪ : 6‬تنظيم کامپايلر‪ ،‬سرور و لودرها ‪19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫مرحله ‪20 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . index.html : 7‬‬

‫مرحله ‪ App.jsx : 8‬و ‪21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . main.js‬‬

‫‪21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬ ‫‪App.js‬‬

‫مرحله ‪ : 9‬اجرای سرور ‪22 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫مرحله ‪ : 10‬توليد نرم افزار ‪23. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫استفاده از دستور ‪ create-react-app‬برای ‪23. . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫مرحله ‪ : 1‬نصب ‪24. . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . create-react-app‬‬

‫مرحله ‪ : 2‬حذف تمامی فايل های منبع ‪24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫مرحله ‪ : 3‬اضافه کردن فايل ها ‪24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫مرحله ‪ : 4‬اجرای پروژه ‪25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫‪ JSX‬در ‪25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . React JS‬‬

‫استفاده از ‪ JSX‬در ‪25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫عناصر تو در تو ‪27 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫صفات مربوط ‪28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫عبارت های جاوا اسکريپت ‪28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫سبک بندی ‪30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫کامنت ‪31 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫قرارداد نام گذاری در ‪32 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫اجزا ( ‪ ) Component‬در ‪33 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . RejectJs‬‬

‫مثال بدون ‪33 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . State‬‬

‫مثال با ‪36 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . State‬‬

‫حالت (‪ )State‬های ‪40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫استفاده از ‪40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Props‬‬

‫مروری بر ‪ Props‬مربوط به ‪42 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

46 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Props ‫ و‬State ‫ مربوط به‬ReactJS

49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS ‫ ) در‬Prop Validation (‫ارزيابی ويژگی ها‬

49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ‫ارزيابی ويژگی ها‬

52 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS ‫ ) در‬API Component ( ‫ جزء‬API

55 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Find Dom Node

57 . . . . . . . . . . . . . . . . . . . . . . . . ReactJS ‫ ) در‬Component Life Cycle (‫چرخه ی عمر اجزا‬

‫فرم ها ( ‪ )Forms‬در ‪62 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫مثال پيچيده ‪63 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫رويدادها( ‪ ) Events‬مربوط به ‪66 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫مثال ساده ‪66 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫رويدادهای فرزند ‪68 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫‪ Ref‬ها مربوط به ‪71 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫کليدها(‪ ) Keys‬در ‪73 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫استفاده از کليدها ‪73 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫روتر( ‪ ) Router‬در ‪77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬

‫مرحله ‪ - 1‬نصب يک ‪ ReactJS‬روتر ‪77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫مرحله ‪ - 2‬ايجاد اجزا ‪77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫مرحله ‪ – 3‬اضافه کردن روتر ‪80 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .‬‬

‫مفهوم ‪ Flex‬در ‪81 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ReactJS‬‬