مهارت‌های لازم:

• آشنایی با map، filter و reduce

---

ظاهر کلی برنامه بدین صورت است:

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

read-json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── __tests__
│   │   └── sample.test.js
│   ├── AverageAge.js
│   ├── UserItem.js
│   ├── UserList.js
│   ├── index.css
│   ├── index.js
│   └── users.json
├── package.json
└── yarn.lock

راه‌اندازی پروژه

برای اجرای پروژه، باید NodeJS و npm را از قبل نصب کرده باشید.

• ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
• در پوشه‌ی read-json ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
• در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
• پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات

داده‌های کاربر در فایل users.json به این صورت هستند:

[
  {
    "name": string,
    "age": number,
    "role": string
  }
]

• name: اسم کاربر
• age: سن کاربر
• role: نقش کاربر که می‌تواند user یا admin باشد.

در این سوال شما باید ابتدا لیست کاربران را از فایل users.json بخوانید و سپس کاربرانی که دارای نقش user هستند را با استفاده از کامپوننت UserItem نمایش دهید و میانگین سنی کاربرانی که دارای نقش admin هستند را بدست آورید و با استفاده از کامپوننت AverageAge نشان دهید.

نکات

• شما تنها مجاز به اعمال تغییرات در فایل UserList.js هستید.
• تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.
• پس از اعمال تغییرات، پروژه را ZIP کرده و ارسال کنید. دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.