64 lines
1.8 KiB
Markdown
64 lines
1.8 KiB
Markdown
# Prepare to interview
|
|
|
|
## Installing
|
|
|
|
1. Clone this repo and use this command:
|
|
```
|
|
npm install
|
|
```
|
|
2. Run server with `npm run dev`
|
|
|
|
> Please, don't watch files. This is example
|
|
|
|
## Tasks
|
|
|
|
1. Install React + TypeScript
|
|
```
|
|
npm create vite@latest
|
|
```
|
|
|
|
2. Install Axios
|
|
```
|
|
npm install axios
|
|
```
|
|
|
|
3. Create component `<Block />` with 2 props - title and children. It can be useful in the future
|
|
```tsx
|
|
<Block title="Title">
|
|
<div>This is description</div>
|
|
</Block>
|
|
```
|
|
|
|
4. Create interface about Post using [this data](https://jsonplaceholder.typicode.com/posts):
|
|
```json
|
|
[
|
|
{
|
|
"userId": 1,
|
|
"id": 1,
|
|
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
|
|
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
|
|
},
|
|
{
|
|
"userId": 1,
|
|
"id": 2,
|
|
"title": "qui est esse",
|
|
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
|
|
},
|
|
]
|
|
```
|
|
|
|
5. Create `<PostList />` element where we have one prop `posts`. In the PostList you need to iterate `<PostItem />`. If we don't have posts, we need to show text `Not Found` or smth similar.
|
|
|
|
> Place it in `<App />`
|
|
|
|
5. In the `<App />` you need to fetch data from api endpoint using axios and place all posts to `<PostList />`
|
|
> https://jsonplaceholder.typicode.com/posts
|
|
|
|
6. Create `<PostListControl />` with button refresh. This button need to refresh this list from api.
|
|
|
|
> Place it in the `<App />`
|
|
>> In `<PostListControl />` you need to place 2 props: refresh and setRefresh
|
|
|
|
7. Add search field for `<PostListControl` and we need to filter these posts.
|
|
|
|
> Use `arr.filter` in the `<App />` |