Назад к задачам
Junior — Senior
6

Отладка и доработка React‑приложения

Компании, где спрашивали:

Отелло
Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи
  1. Реализовать запрос текущей даты с сервера через функцию fetchDate, объявленную в файле api.ts, и отобразить полученное значение в компоненте. В файле api.ts уже реализовано взаимодействие с сервером, можно изучить возвращаемую структуру данных.
  2. Отслеживать изменение размеров окна браузера и показывать актуальную ширину клиентского окна. Учесть, что приложение может работать на мобильных устройствах.
  3. Добавить простой счётчик: кнопка, при нажатии на которую значение счётчика увеличивается, рядом с кнопкой отображается текущее значение.
  4. Все элементы интерфейса должны быть расположены по центру экрана.
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { fetchDate } from "./api";
import "./styles/styles.css";

/**
  * Компонент для вывода серверного времени и высоты экрана
 */
const App = () => {
    const [count, setCount] = useState(0);
    // Дата
    const [date, setDate] = useState < string > ();
    const [clientWidth, setClientWidth] = useState < number > ();

    // @ts-ignore
    useEffect(async () => {
    setDate(await fetchDate());

    window.addEventListener("resize", () =>
        setClientWidth(document.body.clientWidth),
    )
  });

return (
    <div className = "App" >
        <div key="title">Server date: {date} </div>
        <div key="width">Client width: {clientWidth}px</div>
        <Counter
            value={count}
            onClick={() => {
                setCount(count + 1);
            }}
        />
    </div>
   );
};


/* 
* Компонент, который выводит кол-во кликов в кнопку */

function Counter(props: any) {
    console.log("CONNTER rendered [ ]");
    /**
    * Percentage было что-то много...
    * Решил мексизировать этот callback.
    * НЕ УДАЛЯЙТЕ МЕМОИЗАЦИЮ, ПОЖАЛУЙСТА!
    */
    const memoizedOnClick = useCallback(() => {
        props.onClick();
    },
    []);
    return (
        <div>
            <button onClick={memoizedOnClick}>+</button>&nbsp;
            {props.value || 0}
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);