#вакансия #remote #senior #frontend #react
Senior Frontend (React.js) 🅿️

✨Компания: Proscom
✨Формат: удаленка/гибрид/офис по желанию (Мск)
✨Занятость: full time
✨Гражданство: РФ
✨ЗП: от 250 000 ₽

Ищем сильного инженера в команду проектной разработки Proscom – много свободы в решениях, много личной ответственности за результат. С нас – cutting edge технологии и подходы, и самые разные проекты с возможностью пробовать новое и выбирать наиболее интересные для себя.

🔷Кто мы и чем занимаемся?
Proscom — это ИТ-компания. Мы создаем HR-tech продукты, образовательные сервисы, BI и аналитические системы, интерактивную визуализацию данных. Делаем как проекты “с нуля” под клиентов, так и внедряем собственные продукты.

🔷Чем предстоит заниматься:
• создание новых продуктов с нуля – от общей архитектуры до реализации отдельных веб-приложений и микрофронтэндов
• акцент на результат, качество и чистоту – всегда думать над упрощением, поддерживать актуальную документацию, не допускать накопления технического долга и сложности
• взаимопомощь и совместная работа с другими разработчиками в технических (и не только) решениях по проекту, организация кросс-ревью
• работа в команде с дизайнерами, QA и аналитиками с возможностью влиять на формат взаимодействия и процессы

🔷Для нас важно:
• опыт работы с TypeScript и React не менее 4 лет
• глубокие знания React (включая современные версии: 17+)
• хорошие знания JavaScript, HTML и CSS
• опыт работы с State management технологиями (MobX, Redux или Zustand)
• опыт работы с RESTful API и Socket.IO
• опыт работы с системами контроля версий (Git)
• опыт работы с CI/CD инструментами
• понимание принципов модульного и компонентного подхода к разработке
• способность к самостоятельному решению задач и умение работать в команде

🔷Будет плюсом:
• знание Jest, React Testing Library или других библиотек для тестирования
• опыт написания E2E тестов
• владение CSS in JS решениями (styled-components / Emotion), либо Tailwind
• понимание принципов работы серверной части/опыт написания простых backend-приложений

🔷Что мы хотим тебе предложить:
• гибкое время начала и окончания рабочего дня – с 9:00-11:00 до 18:00-20:00 по мск: главное — результат, а не время.
• удаленный формат работы или гибрид
• комфортный офис в Москве (м. Павелецкая), делаем все, чтобы офис не воспринимался как «место для хардкорной работы»
• фактическое отсутствие бюрократии и дресс-кода: быстро принимаем решения на основе данных, аналитики и здравого смысла, встречаемся, в основном, в асинхронном формате
• регулярный фидбек и аналитика личных точек роста
• возможность обучения: курсы корпоративного английского в группах
• дружную и вменяемую команду

🔷Контакт для связи: @alinamishh

#вакансия #remote #senior #frontend #react
Senior Frontend (React.js) 🅿️

✨Компания: Proscom
✨Формат: удаленка/гибрид/офис по желанию (Мск)
✨Занятость: full time
✨Гражданство: РФ
✨ЗП: от 250 000 ₽

Ищем сильного и самостоятельного инженера в команду проектной разработки Proscom – много свободы в решениях, много личной ответственности за результат. С нас – cutting edge технологии и подходы, и самые разные проекты с возможностью пробовать новое и выбирать наиболее интересные для себя.

🔷Кто мы и чем занимаемся?
Proscom — это ИТ-компания. Мы создаем HR-tech продукты, образовательные сервисы, BI и аналитические системы, интерактивную визуализацию данных. Делаем как проекты “с нуля” под клиентов, так и внедряем собственные продукты.

🔷Чем предстоит заниматься:
• создание новых продуктов с нуля – от общей архитектуры до реализации отдельных веб-приложений и микрофронтэндов
• акцент на результат, качество и чистоту – всегда думать над упрощением, поддерживать актуальную документацию, не допускать накопления технического долга и сложности
• взаимопомощь и совместная работа с другими разработчиками в технических (и не только) решениях по проекту, организация кросс-ревью
• работа в команде с дизайнерами, QA и аналитиками с возможностью влиять на формат взаимодействия и процессы

🔷Для нас важно:
• 5+ лет опыта в разработке веб-приложений
• умение (и желание!) работать с актуальными версиями TypeScript и React
• хорошие знания JavaScript, HTML и CSS
• перфекционизм / внимание к деталям
• понимание полного цикла разработки продукта
• хороший технический английский
• способность к самостоятельному решению задач и умение работать в команде

🔷Будет плюсом:
• опыт с GraphQL в целом и Apollo Client в частности
• умение использовать React Context без сторонних библиотек / state-менеджеров
• понимание принципов работы инфраструктуры, CI/CD
• уверенная адаптивная верстка с микровзаимодействиями и анимацией
• опыт в проектировании / написании backend-сервисов

🔷Что мы хотим тебе предложить:
• гибкое время начала и окончания рабочего дня – с 9:00-11:00 до 18:00-20:00 по мск: главное — результат, а не время.
• удаленный формат работы или гибрид
• комфортный офис в Москве (м. Павелецкая), делаем все, чтобы офис не воспринимался как «место для хардкорной работы»
• фактическое отсутствие бюрократии и дресс-кода: быстро принимаем решения на основе данных, аналитики и здравого смысла, встречаемся, в основном, в асинхронном формате
• регулярный фидбек и аналитика личных точек роста
• возможность обучения: курсы корпоративного английского в группах
• дружную и вменяемую команду

🔷Контакт для связи: @alinamishh

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Что такое Virtual DOM и как он работает?

Пример кода:

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Здесь React обновляет только текст внутри <p>, а не весь DOM.

❗️Virtual DOM — это легковесная копия реального DOM, которая используется React для оптимизации обновлений интерфейса. Когда состояние компонента изменяется, React создает новый Virtual DOM и сравнивает его с предыдущим (процесс называется diffing). Затем React определяет минимальный набор изменений, которые нужно применить к реальному DOM, чтобы синхронизировать его с Virtual DOM. Это позволяет избежать дорогостоящих операций с реальным DOM и повышает производительность.

Ссылка на документацию по React Reconciliation

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает React Hooks?

Пример кода:

const App = () => {
  const [name, setName] = React.useState('');

  React.useEffect(() => {
    document.title = `Hello, ${name}`;
  }, [name]);

  return <input value={name} onChange={(e) => setName(e.target.value)} />;
};

⬆️ Здесь useState управляет состоянием, а useEffect обновляет заголовок страницы при изменении name.

❗️Hooks — это функции, которые позволяют использовать состояние и другие возможности React (например, жизненный цикл) в функциональных компонентах. Основные хуки: useState, useEffect, useContext. useState позволяет добавлять состояние в функциональный компонент, а useEffect — выполнять побочные эффекты (например, запросы к API или подписки) после рендеринга. Hooks делают код более компактным и удобным для повторного использования.

Ссылка на документацию React Hooks

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает React Context?

Пример кода:

const ThemeContext = React.createContext('light');

const App = () => (
  <ThemeContext.Provider value="dark">
    <Toolbar />
  </ThemeContext.Provider>
);

const Toolbar = () => (
  <ThemeContext.Consumer>
    {theme => <div>Current theme: {theme}</div>}
  </ThemeContext.Consumer>
);

Здесь ThemeContext.Provider передает значение dark, которое может быть использовано в любом дочернем компоненте через ThemeContext.Consumer.

❗️React Context позволяет передавать данные через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как темы, настройки пользователя или состояние авторизации. Context состоит из двух частей: Provider (поставщик данных) и Consumer (потребитель данных).

Ссылка на документацию по React Context

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как оптимизировать производительность React-приложения?

Пример кода:

const ExpensiveComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

const App = () => {
  const [count, setCount] = React.useState(0);
  const memoizedValue = React.useMemo(() => count * 2, [count]);

  return (
    <div>
      <ExpensiveComponent value={memoizedValue} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Здесь React.memo предотвращает лишние рендеры ExpensiveComponent, а useMemo мемоизирует значение.

❗️Оптимизация производительности в React включает несколько подходов:

- Использование React.memo для мемоизации компонентов и предотвращения лишних рендеров.
- Использование useCallback и useMemo для мемоизации функций и значений.
- Ленивая загрузка компонентов с помощью React.lazy и Suspense.
- Разделение кода (code splitting) для уменьшения размера начального бандла.

Ссылка на документацию Optimizing Performance

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает React Router?

Пример кода:

import { BrowserRouter, Route, Link } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <Link to="/about">About</Link>
    <Route path="/about" component={About} />
  </BrowserRouter>
);

const About = () => <div>About Page</div>;

Здесь Link создает ссылку на страницу /about, а Route отображает компонент About при переходе на этот путь.

❗️React Router — это библиотека для управления маршрутами в React-приложении. Основные компоненты: BrowserRouter, Route, Link, Switch. BrowserRouter оборачивает приложение и предоставляет функциональность маршрутизации. Route определяет, какой компонент отображать для определенного пути. Link используется для навигации между страницами без перезагрузки.

Ссылка на документацию React Router

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как тестировать React-компоненты?

Пример кода:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Здесь тест проверяет, что компонент App рендерит текст "learn react".

❗️Для тестирования React-компонентов используются Jest и React Testing Library. Jest — это фреймворк для запуска тестов, а React Testing Library предоставляет инструменты для тестирования компонентов в условиях, близких к реальным. Основные методы: render (рендерит компонент), screen (доступ к элементам DOM), fireEvent (симуляция событий).

Ссылка на документацию Testing Library

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает Server-Side Rendering (SSR) в React?

Пример кода:

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

Здесь renderToString рендерит компонент App в строку HTML.

❗️Server-Side Rendering (SSR) позволяет рендерить React-компоненты на сервере и отправлять готовый HTML клиенту. Это улучшает SEO и производительность, так как страница загружается быстрее. Для SSR используются библиотеки, такие как Next.js, или встроенные методы React, такие как ReactDOMServer.renderToString.

Ссылка на документацию React SSR

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает React Portals?

Пример кода:

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
};

Здесь Modal рендерится в элемент с id modal-root, который может находиться вне основного дерева компонентов.

❗️Portals позволяют рендерить дочерние элементы в DOM-узел, который находится вне иерархии родительского компонента. Это полезно для модальных окон, всплывающих подсказок и других элементов, которые должны быть отрендерены вне основного дерева компонентов.

Ссылка на документацию по React Portals

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает React Suspense?

Пример кода:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

Здесь LazyComponent загружается лениво, а Suspense отображает fallback (загрузочный индикатор) до завершения загрузки.

❗️Suspense позволяет откладывать рендеринг компонентов до тех пор, пока не будут выполнены определенные условия (например, загрузка данных или кода). Это особенно полезно для ленивой загрузки компонентов и асинхронных операций.

Ссылка на документацию по React Suspense

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает React Error Boundaries?

Пример кода:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Здесь ErrorBoundary перехватывает ошибки и отображает сообщение, если что-то пошло не так.

❗️Error Boundaries — это компоненты, которые перехватывают ошибки в дочерних компонентах и отображают запасной UI вместо "падения" всего приложения. Они работают как try/catch, но для компонентов.

Ссылка на документацию по Error Boundaries

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает React Fragments?

Пример кода:

const App = () => (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Здесь <> и </> — это синтаксис для React.Fragment.

❗️Fragments позволяют группировать элементы без добавления лишних узлов в DOM. Это полезно, когда нужно вернуть несколько элементов из компонента, но нельзя использовать общий родительский элемент.

Ссылка на документацию по React Fragments

#собесы #react #senior
Вопросы, которые могут задать на собеседовании Senior React Developer.
Проверьте себя без помощи поисковиков!

❓Как работает React Refs?

Пример кода:

const App = () => {
  const inputRef = React.useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

Здесь inputRef используется для управления фокусом на элементе input.

❗️Refs позволяют получать доступ к DOM-элементам или экземплярам компонентов. Они полезны для управления фокусом, анимациями или интеграции с сторонними библиотеками.

Ссылка на документацию по React Refs