آموزش React Intermediate: 3 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:53

آموزش React Intermediate

محصول نهایی را اینجا مشاهده کنید

چه چیزی یاد خواهید گرفت؟

شما با React.js یک لیست ساده برای انجام کارها ایجاد می کنید و با قسمت های پیچیده واکنش بیشتر آشنا می شوید. پیش نیازها (توصیه می شود) راهنمای شروع واکنش. js را تکمیل کنید. دانش HTML ، دانش CSS دستورات پوسته اساسی دانش شایسته در جاوا اسکریپت

تدارکات

تمام نرم افزارها در آموزش آورده شده است.

شما به یک کامپیوتر با نرم افزار زیر نصب شده نیاز دارید:

• npm/نخ
• IDE که از js پشتیبانی می کند
• یک مرورگر وب

مرحله 1: آموزش واکنش متوسط

شروع شدن

چرا React.js؟

در React.js ، نکته مهم استفاده مجدد از کد است. به عنوان مثال ، بگویید که یک نوار ناوبری دارید که در 100 صفحه دارید. اگر شما نیاز به اضافه کردن یک صفحه جدید دارید ، باید نوار ناوبری را در هر صفحه تغییر دهید ، به این معنی که باید همان کار را برای 100 صفحه انجام دهید. حتی با استفاده از ماکروها ، این بسیار خسته کننده می شود.

نصب نرم افزار/بسته های مورد نیاز

شما نیاز خواهید داشت:

npm/نخ

روش نصب:

1. بروید و آخرین LTS Node.js را نصب کنید
2. اختیاری: اگر نخ را به عنوان مدیر بسته خود ترجیح می دهید ، نخ را با تایپ در powerhell npm install -g نخ نصب کنید.
3. powerhell/cmd.exe را باز کنید
4. به پوشه ای بروید که می خواهید پروژه خود را در آن ایجاد کنید
5. npx create-react-app را تایپ کنید.

مرحله راه اندازی را تکمیل کرده اید. برای آزمایش آن ، powerhell را باز کنید ، به فهرست پروژه خود بروید و npm start را تایپ کنید. شما باید یک صفحه وب را در مرورگر پیش فرض خود بارگیری کنید.

مرحله 2: مرحله 1: شروع به کار

برای شروع ، فایل های زیر را از فهرست /src خود حذف کنید:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

ما نیازی به این فایل ها نداریم.

بیایید سیستم فایل خود را نیز سازماندهی کنیم. این دایرکتوری ها را در /src /ایجاد کنید:

• js
• css

App.js را در js dir و App.css را در css dir قرار دهید.

بعد ، اجازه دهید دوباره وابستگی ها را سازماندهی کنیم.

در index.js ، واردات مربوط به serviceWorker و index.css را حذف کنید. حذف serviceWorker.register (). مسیرهای برنامه را تغییر دهید.

در App.js ، واردات logo.svg را حذف کنید ، زیرا دیگر به آن نیاز نداریم. Reroute App.css. تابع () App و صادرات برنامه را حذف کنید.

در React ، ما 2 روش برای تعریف عناصر داریم. ما توابع و کلاس داریم. توابع مربوط به موارد پیچیده تر و کلاسها عموماً برای اجزای پیچیده تر است. از آنجا که لیست کارها پیچیده تر از یک دسته از HTML است ، از نحو کلاس استفاده خواهیم کرد.

این را به کد خود اضافه کنید:

pastebin.com/nGXeCpaH

html در 2 div قرار می گیرد.

بیایید Element را تعریف کنیم.

pastebin.com/amjd0jnb

توجه کنید که چگونه ارزش را در حالت تعریف کردیم. بعداً به این نیاز خواهیم داشت.

در تابع render ، hi را با {this.state.value} جایگزین کنید

ما در حال ارائه مقدار منتقل شده از حالتی هستیم که تعریف کرده ایم.

بنابراین بیایید آن را آزمایش کنیم!

در عملکرد render برنامه ، آن را با این جایگزین کنید:

pastebin.com/aGLX4jVE

باید یک مقدار نمایش دهد: "test".

بیایید ببینیم آیا می توانیم چندین وظیفه را ارائه دهیم!

به جای این که React فقط یک عنصر را ارائه دهد ، می توانیم یک آرایه ایجاد کنیم و به جای آن به react پاسخ دهیم.

تابع render را به این تغییر دهید:

pastebin.com/05nqsw71

این باید 10 کار مختلف انجام دهد. توجه کنید که چگونه کلیدها را اضافه کردیم. این کلیدها به عنوان شناسه های واکنش و ما در صورت نیاز به آنها استفاده می شود.

اکنون که لیست وظایف ما کار می کند ، راهی برای بارگیری وظایف پیدا می کنیم. اینجاست که وضعیت ما وارد می شود.

بیایید یک سازنده به ما اضافه کنیم.

pastebin.com/9jHAz2AS

در این سازنده ، taskArray را از تابع render به حالت خارج کردیم. در تابع render وظیفه آرایه و حلقه را حذف کنید. taskArray را در div به this.state.taskArray تغییر دهید.

در حال حاضر ، کد App.js شما باید به این شکل باشد:

pastebin.com/1iNtUnE6

مرحله 3: افزودن راهی برای افزودن و حذف اشیاء

بیایید راهی برای افزودن و حذف اشیاء اضافه کنیم. بیایید آن را برنامه ریزی کنیم.

ما به چه چیزی نیاز داریم؟

• راهی برای کاربر برای افزودن اشیاء
• مکانی برای ذخیره اشیاء
• راهی برای بازیابی اشیاء

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

• یک عنصر
• API ذخیره سازی محلی با JSON

بیایید با عنصر ورودی شروع کنیم.

در زیر {this.state.taskArray} ، یک ورودی و دکمه به کد خود اضافه کنید

اضافه کردن

اکنون باید دکمه ورودی متن و افزودن وجود داشته باشد.

در حال حاضر هیچ کاری انجام نمی دهد ، بنابراین اجازه دهید 6 روش را به روش برنامه خود اضافه کنیم.

ما برای روشی که روی دکمه کلیک می شود ، و همچنین زمانی که کسی ورودی را تایپ می کند ، نیاز داریم. ما همچنین به راهی برای تولید آرایه وظیفه و همچنین ذخیره ، بارگذاری و حذف وظایف نیاز داریم.

بیایید این 6 روش را اضافه کنیم:

buttonClick ()

ورودی تایپ شده (evt)

generateTaskArray ()

saveTasks (وظایف)

getTasks ()

removeTask (شناسه)

بیایید این متغیر را نیز به حالت خود اضافه کنیم:

ورودی

ما همچنین باید عملکردهای خود را به این امر متصل کنیم.

pastebin.com/syx465hD

بیایید شروع به اضافه کردن قابلیت ها کنیم.

2 ویژگی به موارد مشابه اضافه کنید:

این باعث می شود که وقتی کاربر هر چیزی را در ورودی تایپ می کند ، عملکرد را اجرا کند.

یک ویژگی onClick به Add like اضافه کنید:

اضافه کردن

وقتی کاربر روی دکمه کلیک می کند ، تابع اجرا می شود.

اکنون که قسمت html تمام شده است ، بیایید کارکرد را ادامه دهیم.

من قبلاً رابط localStorage API را از قبل نوشته ام ، بنابراین توابع saveTasks ، getTasks و removeTask را با این جایگزین کنید:

pastebin.com/G02cMPbi

بیایید از تابع inputTyped شروع کنیم.

وقتی کاربر تایپ می کند ، باید مقدار داخلی ورودی را تغییر دهیم.

اجازه دهید این کار را با استفاده از تابع setState ارائه شده با react انجام دهیم.

this.setState ({ورودی: evt.target.value}) ؛

به این ترتیب ، می توانیم مقدار ورودی را بدست آوریم.

پس از اتمام کار ، می توانیم روی عملکرد buttonClick کار کنیم.

ما باید یک کار را به لیست وظایف اضافه کنیم. ابتدا لیست وظایف را از localStorage بیرون می آوریم ، ویرایش می کنیم و سپس آن را ذخیره می کنیم. سپس با یک rerender از taskList تماس می گیریم تا آن را به روز کند.

var taskList = this.getTasks ()؛

taskList.tasks.push (this.state.input) ؛

this.saveTasks (taskList) ؛

this.generateTaskArray ()؛

ما وظایف را دریافت می کنیم ، مقدار ورودی را وارد کارها می کنیم و سپس آن را ذخیره می کنیم. سپس آرایه وظیفه را تولید می کنیم.

حالا بیایید روی تابع () generateTaskArray کار کنیم.

ما نیاز داریم:

• دریافت وظایف
• ایجاد مجموعه ای از اجزای وظیفه
• اجزای وظیفه را برای ارائه ارسال کنید

ما می توانیم وظایف را دریافت کرده و آنها را در متغیری با getTasks () ذخیره کنیم.

وظایف var = getTasks (). وظایف

سپس باید یک آرایه ایجاد کرده و آن را پر کنیم.

pastebin.com/9gNXvNWe

الان باید کار کنه

کد منبع:

github.com/bluninja1234/todo_list_instructables

ایده های اضافی:

عملکرد حذف (بسیار ساده ، اضافه کردن یک کلیک و حذف با استفاده از removeTask از فهرست کلید)

CSS (همچنین ساده ، خودتان بنویسید یا از bootstrap استفاده کنید)