**مهارتهای لازم:**
- آشنایی با `map`، `filter` و `reduce`
--------------------------------------------------
ظاهر کلی برنامه بدین صورت است:
![ظاهر برنامه](https://quera.ir/qbox/view/OmMTw8Pk4X/overview.png)
# پروژه اولیه
پروژه اولیه را از
[اینجا](https://quera.ir/qbox/download/jt6U7GlfAK/read-json.zip)
دانلود کنید.
ساختار فایلهای این پروژه به صورت زیر است.
```
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
```
<details class="brown">
<summary>
راهاندازی پروژه
</summary>
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا پروژهی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشهی `read-json` ، دستور `npm install` را برای نصب نیازمندیها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راهاندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/`
میتوانید نتیجه را ببینید.
</details>
# جزئیات
دادههای کاربر در فایل `users.json` به این صورت هستند:
```js
[
{
"name": string,
"age": number,
"role": string
}
]
```
- `name`: اسم کاربر
- `age`: سن کاربر
- `role`: نقش کاربر که میتواند `user` یا `admin` باشد.
در این سوال شما باید ابتدا لیست کاربران را از فایل `users.json` بخوانید و سپس کاربرانی که دارای نقش `user` هستند را با استفاده از کامپوننت `UserItem` نمایش دهید و میانگین سنی کاربرانی که دارای نقش `admin` هستند را بدست آورید و با استفاده از کامپوننت `AverageAge` نشان دهید.
# نکات
- شما تنها مجاز به اعمال تغییرات در فایل `UserList.js` هستید.
- تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آنها میتوانید کد خود را تست کنید.
- پس از اعمال تغییرات، پروژه را _ZIP_ کرده و ارسال کنید. دقت کنید که پوشهی `node_modules` در فایل ارسالی نباشد.