<section id="description">
<p>Возможно, вы заметили в последнем случае, что в дополнение к атрибуту <code>style</code> установленному для объекта JavaScript, было несколько других различий синтаксиса из встроенных стилей HTML. Во-первых, имена некоторых свойств стиля CSS используют "верблюжью нотацию". Например, последний вызов задает размер шрифта с <code>fontSize</code> вместо <code>font-size</code> . Слова со знаками-разделителями, такие как <code>font-size</code> являются недопустимым синтаксисом для свойств объекта JavaScript, поэтому React использует "верблюжью нотацию". Как правило, любые свойства дефисного стиля записываются с использованием "верблюжьей нотации" в JSX. Предполагается, что все единицы длины значения свойства (например, <code>height</code> , <code>width</code> и <code>fontSize</code> ) находятся в <code>px</code> если не указано иное. Если вы хотите использовать <code>em</code> , например, вы переносите значение и единицы в кавычки, например <code>{fontSize: "4em"}</code> . Помимо значений длины, которые по умолчанию <code>px</code> , все остальные значения свойств должны быть заключены в кавычки.</p></section>

// const styles =
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
    );
    // change code above this line
  }
};


index

Добавление встроенных стилей в React

Add Inline Styles in React

The <code>styles</code> variable should be an <code>object</code> with three properties.

The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.

The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.

The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.

The component should render a <code>div</code> element.

The <code>div</code> element should have its styles defined by the <code>styles</code> object.

front-end-libraries

React

const styles = {
  color: "purple",
  fontSize: 40,
  border: "2px solid purple",
}
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={styles}>Style Me!</div>
    );
    // change code above this line
  }
};


const styles = {
  color: "purple",
  fontSize: 40,
  border: "2px solid purple"
}
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={styles}>Style Me!</div>
    );
    // change code above this line
  }
};


const styles = {
  color: 'purple',
  fontSize: 40,
  border: '2px solid purple'
}
// change code above this line
class Colorful extends React.Component {



  render() {
    
    // change code below this line
    return (
      <div style={styles}>Style Me!</div>
    );
    // change code above this line
  }
};


const styles = {
  color: 'purple',
  fontSize: 40,
  border: "2px solid purple"
}
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={styles}>Style Me!</div>
    );
    // change code above this line
  }
};


const styles = {
  color: 'purple',
  fontSize: 40,
  border: '2px solid purple'
}

// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={styles}>Style Me!</div>
    );
    // change code above this line
  }
};


RichText

если 40 и "40px" одно и тоже, то почему последний вариант не считается правильным? ну и задача - раскрасить элемент div в фиолетовый, я понял как background: purple. color же относиться к цвету текста, а не к самому элементу div.

Обсуждение задания "Add Inline Styles in React"

Уроки

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

С цветом тоже немного не так. Там же в стилях два раза purple:

Один для цвета текста (color), а другой для границ (бордера).

40 и "40px" - это все же не одно и то же. Да, в случае с реактом на выходе мы получим одно и то же, но это уже механика реакта. Он просто так устроен, что если на вход число, то это будут пиксели (то есть он конвертирует). Но в задаче все же ожидается 40 (именно число), так что если что-то другое - то это не 40. С цветом тоже немного не так. Там же в стилях два раза purple: Один для цвета текста (color), а другой для границ (бордера).

40 и "40px" - это все же не одно и то же. Да, в сл

# Николай Ланец aka Fi1osof
**Lead Fullstack Developer / Ментор / Евангелист современного JS‑стека**

---

## О себе

Я — не просто Senior Developer с 2007 года. Я — тот, кто строит продукты будущего на базе современных технологий и помогает другим подниматься на новую ступень айти-карьеры. Создатель и идейный вдохновитель freecode.academy — платформы, где обучение перестает быть скучной обязаловкой и становится настоящим технологическим приключением.

---

## Мой стек и философия разработки

Основу моего рабочего арсенала составляют:

- [Javascript](/technologies/ck1faudv928l40a89c4u9zxlm), [TypeScript](/technologies/ckcvwwx010kov08009u7y2rav)
- [React](/technologies/ck1fawbdw28v20a891k4wlh27), [Next.js](/technologies/ckg2jd4ffr9260730aog66dri)
- [Node.js](/technologies/ckt55wm59272831wo9gg9r8ynx), [GraphQL](/technologies/ck1fawhqk28vu0a8995lqvlsj), [Apollo Client](/technologies/ck2zdcg0vpvc10a89xjmhj1e0), [Nexus](/technologies/ckl2pbh0fxew60730ifl3zozp), [Prisma](/technologies/ck2zdbmi7pv8r0a89ntc2r0f1)
- DevOps: [Docker](/technologies/ck2y1x9lho9cy0a8953xzfjr8), [docker-compose](/technologies/ck2y1xqino9g80a89tsftxin2), [Caddy](/technologies/ck2zd8ovqpuyl0a8909748sbu), [Ubuntu](/technologies/cktu8giks3593911vmle30ztqxt)
- UI-инструменты: [Styled-Components](/technologies/ckk8myysio7lw0730csszvrdw), [Material-UI](/technologies/ckljv3jwd7bgf0730huxlko9n), [react-hook-form](/technologies/ckmx8cn9fmwrv073032e67722)
- Всё актуальное для разработки, CI/CD и автоматизации 
- Эксперименты с [WebGL](/technologies/ckan9anntc12f08003saqttrq), [A‑Frame](/technologies/ck2tgoiz8j37y0a89c7gxsrxc), [Three.js](/technologies/ck2tgns1nj32z0a89vmw7xw3f), [Unreal Engine 4](/technologies/ck7puswy6g4yb07004cdp6lbr), [Elixir](/technologies/ckn0olavrnnzi0730xs8rctn8), [C++](/technologies/cknin1y8lu2fr07307mskn2fn)

---

## Разработка и менторство

- Более 15 лет **hands-on** разработки и проджект‑менеджмента
- Главный разработчик и преподаватель платформы [freecode.academy](https://freecode.academy)
- **Ведущий менти-пул на платформе** — лично выращиваю новых звезд отрасли

### Мои менти и их результаты

| Менти (ФИО \| username)                               | Уровень | Рейтинг |
|-------------------------------------------------------|---------|---------|
| [Попов Дмитрий \| linklib](/users/cjoe890c706ji0d962oismzoe)           | 3       | 315     |
| [Сэт \| defk1lla](/users/ckzh1ita312978121imr9hpqfc64)                 | 3       | 670     |
| [Ксения Матвеева \| Ксения Матвеева](/users/ckz4awwlh10627771imr4wvpb7cj) | 2       | 0       |
| [Михаил \| Balamut](/users/cl1npq92z10258261vmbq0w6vfh2)               | 2       | 0       |
| [Ольга Ершова \| angel](/users/cjoe87zhk00250d969arluevk)              | 1       | 0       |
| [Егор \| rogedkone](/users/cksrdp47d3308261ijuq7wfrxdl)                | 3       | 0       |
| [Roman \| Roman43](/users/ckur2qtt64721431xoboyjcte52)                 | 2       | 0       |
| [Бут Игорь \| santiment](/users/ckttd9x20893951vmltb8t7sha)            | 1       | 0       |

**Доношу простую мысль: успех — это не магия, это осознанная системная работа и кайф от роста.**
Мои менти выводят решения в продакшн, пробиваются в лидеры рейтингов — кому не хочется быть в такой команде?

---

## Почему я?

- **Прокачаю проект** — от TDD архитектуры до культурного CI/CD
- **Вдохновлю команду** — и научу мыслить по‑новому, где ИИ — напарник, а не угроза
- **Выращу мидлов и сеньоров** — доказано платформой и рейтингами моих учеников

**Сила — в сообществе, а техника — это просто смазка для ваших побед. Присоединяйтесь!**

---

## Контакты

- 📧 [n.lanets@freecode.academy](mailto:n.lanets@freecode.academy)
- Телеграм: [@freecode_academy](https://t.me/freecode_academy)

---

**P.S.**: Мой опыт — ваш драйвер роста. Хотите в команду? Ищете менторство? Пишите. Растём вместе!

# Андрей (alter_ego)
**Начинающий фронтенд-разработчик / Explorer интерфейсов**

---

## Кто я

Стартовал с крепкой базы HTML и CSS, ворвался в JS, пробую AngularJS и не боюсь новых фреймворков. Верю в силу пет-проектов, где практика — это лучшее обучение.

---

## Мой стек
- [HTML](/technologies/ck1fasxk228gk0a89k3vnmroa)
- [CSS](/technologies/ck1fatvnc28jj0a89oymmo65i)
- [Javascript](/technologies/ck1faudv928l40a89c4u9zxlm)
- [AngularJS](/technologies/ck2tgmhshj2z30a89o14nlxog)

---
Раскачаю интерфейс, приму вызов верстки и не откажусь поучаствовать в чём-то интересном.