Александр Серый

Если хотите изменить стили React.Component надо передавать методе render свойство className. Так же можно вынести все элементы компонента в статические поля, чтобы позже переопределять их стили.

const Wrapper = styled.div`
  // some styles
`;

const ChildElement = styled.div`
  // some styles
`;

class MyComponent extends React.Component {
  static ChildElement = ChildElement;
  
  render() {
    const { className } = this.props;

    return (
      <Wrapper className={className}>
        <ChildElement>Some text</ChildElement>
      </Wrapper>
    )
  }
}

export default MyComponent;

const SyledMyComponent = styled(MyComponent)`
  // some styles

  ${MyComponent.ChildElement} {
    // some styles for ChildElement
  }
`;

Метод extend работает только со StyledComponent:

const AbstractElement = styled.div`
  // some styles
`;

const ConcreteElement = AbstractElement.extend`
  // some styles
`;

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

const users = [
  {
    id: 1,
    firstName: 'John',
    lastName: 'Doe',
    age: 27
  },
  {
    id: 2,
    firstName: 'Emily',
    lastName: 'Green',
    age: 29
  }
];

const Home = () => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <Link to={`/${user.id}`}>{user.firstName} {user.lastName}</Link>
        </li>
      ))}
    </ul>
  );
};

const User = () => {
  const params = useParams();
  const id = parseInt(params.id);
  const user = users.find((entry) => entry.id === id);
  if (user === undefined) {
    return <p>User not found</p>;
  }

  return (
    <>
      <ul>
        <li><storng>Firstname</storng>: {user.firstName}</li>
        <li><storng>Lastname</storng>: {user.lastName}</li>
        <li><storng>Age</storng>: {user.age}</li>
      </ul>
      <Link to="/">Go back</Link>
    </>
  );
};

const root = createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
    <Routes>
      <Route index element={<Home />} />
      <Route path=":id" element={<User />} />
    </Routes>
  </BrowserRouter>
);

https://reactrouter.com/

только начал React изучать

Рекомендую таки сначала закончить, дочитать документацию 2 раза и вопрос сам собой отпадёт. В документации есть пример компонента С jsx и БЕЗ него. Надо просто дочитать.

От проекта зависит. На моëм проекте например новичкам даже сеньорского уровня до первой простой таски требуется недели две, а выход на 100℅ эффективность занимает 3-6 месяцев.

Keenetic если совсем начинающий
Всё на русском, интерфейс простой и понятный, потом сменишь на английский
можно добавлять удалять модули.
Mikrotik если хочешь начать ДЕЙСТВИТЕЛЬНО разбираться. Обэксперементируешься по самое нехочу. Но нужен хоть какой-то опыт

но почему его почти не используют ?

А на основе чего такой вывод? Мне показалось наоборот, всякую оптимизацию используют везде, даже там где она делает только хуже.

(без собственного состояния)

Внутренний стейт компонента не влияет на результат работы своего memo, memo сравнивает только пропсы.

По логике вещей каждый компонент (без собственного состояния), даже который не использует props, должен быть обернут в memo, но так не делают, почему?

Тут есть условности. У меня например вот такие правила:

Оборачиваем в memo обязательно, если - родительский компонент часто перерендеривается без изменений пропсов вашего компонента. Если ваш компонент не обернуть в memo, то он будет столько же перерендериваться, сколько и родительский. Но тут я бы обернул ваш компонент в родительском в useMemo (если на хуках писать).

Не оборачиваем в memo, т.к. если обернуть, это ничего не даст или сделает хуже, если - родительский компонент перерендеривается только при изменении пропсов, которые передаются в ваш компонент. Другими словами, если ваш компонент перерендеривается из-за родителя только тогда, когда меняются значения его пропсов, то memo будет проверяться зря (а memo тоже тяжелый).

Можно обернуть в memo, если - компонент рисует сложную верстку с большим количеством других компонентов, и имеет сложный код в рендере или в useEffect (без зависимостей, который выполняется на каждый рендер).

В остальных случаях можно не использовать memo, если на то не указывают исследования производительности конкретно вашего приложения.

Еще важно следить за перерендерами, чтобы родитель не передавал пропсы, у которых на каждом рендере разная ссылка, пример:
<MemoComp onClick={() => console.warn('hello')} />
в таком случае, memo не будет работать. Это можно еще случайно пропустить, если не используете TypeScript/Flow, то вот такой код
<MemoComp isActive={item || isEnabled} />
будет перерендериваться лишний раз, если вдруг окажется, что item это объект с нестабильной ссылкой.

В общем, главное понимать, что простой memo быстрее простого рендера, нужно просто не допустить двойную работу, когда при любом рендере будет сравниваться memo и происходить рендер.

Хостить такие статические сайты можно на разных хостингах: github pages, gitlab pages (да, у них же хостите и гит-репозиторий и у них же сайт), netlify, cloudflare pages.

Общая схема: если хостинг там же, где и репозиторий, то обычно через CI/CD делается. Если снаружи (например, репозиторий на гитхабе, а хостинг на cloudflare), то при обновлении репозитория дергается хук и хостинг выкачивает новые странички себе.

Возможно вам будет интересно почитать про концепцию JAMstack, это как бы "старые" статические сайты (которые быстро загружаются из CDN, не рендерятся на сервере), как из 90-ых, но со всеми фичами из XXI века через javascript API. Вот авто-обновление контента на хостинге из репозитория - это часть JAMstack.

Видео от Вадима Макеева, одного из участников проекта Дока: https://www.youtube.com/watch?v=hevU4NdIsoU

Сайт «Доки» работает на базе Eleventy. При помощи Nunjucks-темплейтов Eleventy превращает статьи в формате Markdown в HTML-страницы.

Проект собирается с помощью GitHub Actions и хостится на сервере, читайте подробнее про деплой

У них вроде в репозиторий все расписано, если брать конкретно сайт doka.

Если нужно разместить сайт на GitHub то в интернете много информации по этому вопросу

Можно задействовать https://www.netlify.com - там даже на бесплатном тарифе это работает.

data

Вот так без стилей совершенно непонятно зачем. Откроойте css, посмотрте какие стили применяются к wrapper-у, и станет понятно. Может на body они не применяются в принципе, или на body одни, а на wrapper-е другие.

Вот на тостере, например, вместо wrapper-а layout. Не позволяет растягиваться контенту на больших мониторах.

для "крайне холодного" хранения посоветую M-disc
запилить на m-disc блюреи и на дальнюю полочку - 200 лет пролежат.

если пилить на обычные диски - раз в пять лет понадобится их обновлять. раз в десять лет для "хороших".

$lg: 720px;

@mixin _lg {
  @media (min-width: $lg) {
    @content;
  }
}

.tt {
color: red;
@include _lg {
      color: green;
    }
}