Children Text</div>; </mycounter>; var GameScores = {player1: 2,player2: 5};

Scores

Чтобы разобраться, вот несколько примечаний относительно тегов HTML выше:

• имеет атрибут count, который принимает числовое выражение в качестве значения.
• GameScores – это литерал объекта, который имеет две пары значений и свойств.
• – это блок XML, который рендерится на странице.
• Scores = {GameScores}: атрибут Scores получает значение из объекта GameScores, определённого выше.

Большая часть React написана с использованием JSX (JavaScript XML), а не стандартного JavaScript (JS). Здесь важно отметить, что это делается для того, чтобы максимально упростить процесс создания React-компонентов.

Вы можете создать компонент React на стандартном JavaScript, но мы гарантируем, что он будет супер беспорядочным.

Кроме того, идея JSX в React заключалась в том, что Facebook (как первоначальный разработчик) хотел создать один конкретный тип расширения синтаксиса с чёткой и однозначной конфигурацией.

Сила React

Сила React в том, что в нём есть два мира — «Что где сто­ит» и «Что как рабо­та­ет». И эти миры доста­точ­но хоро­шо раз­де­ле­ны, что­бы не ломать­ся, если что-то где-то изменилось.

Для срав­не­ния. Если у тебя обыч­ный HTML и тебе нуж­но поста­вить ссыл­ку, ты гово­ришь такое заклинание:

текст ссылки

В этом опи­са­нии одно­вре­мен­но и «где ссыл­ка», и «как она рабо­та­ет». Если мне нуж­но 30 таких ссы­лок на стра­ни­це, мне нуж­но будет повто­рить этот код 30 раз. Каж­дый раз, когда я исполь­зую этот код, я с нуля гово­рю бра­у­зе­ру: «Так, мы с тобой сей­час будем делать ссыл­ку, давай я тебе рас­ска­жу, как она будет работать».

А что если у меня в интер­фей­се нуж­но что-то более слож­ное, чем ссыл­ка? Какое-нибудь интер­ак­тив­ное поле, и таких полей нуж­но 15, и они долж­ны общать­ся меж­ду собой? Тогда опи­сы­вать каж­дое из них с нуля и как в пер­вый раз — очень гро­мозд­ко и затрат­но. А если потом нуж­но что-то изме­нить, то про­ще всё пере­пи­сать с нуля.

Вот тут и нужен React. Мы отдель­но опи­сы­ва­ем пове­де­ние каж­до­го эле­мен­та, отдель­но рас­став­ля­ем их и связываем.

Установка

Освоить данное руководство можно двумя способами: вы можете либо писать код в своем браузере, либо настроить локальную среду разработки на своем компьютере.

Это самый быстрый способ начать работу!

Сначала откройте этот стартовый код в новой вкладке. Новая вкладка должна отображать пустую игровую доску в крестики-нолики и код React. В этом учебнике мы будем редактировать код React.

Теперь вы можете пропустить второй вариант установки и перейти к разделу « Обзор », чтобы приступить к обзору React.

Это исключительно по желанию и совершенно не обязательно для данного учебника!

Необязательно: инструкции для разработки локально с помощью предпочитаемого вами текстового редактора.

Данная установка потребует больше времени и сил, но позволяет вам освоить учебник, используя предпочитаемый вами редактор (например WebStorm). Выполните следующие шаги:

1. Убедитесь, что у вас установлена последняя версия Node.js .

2. Следуйте инструкциям по установке Create React App , чтобы создать новый проект.

Код npx create-react-app my-app.

3. Удалите все файлы в папке src/ нового проекта.

Внимание!

Не удаляйте всю папку src, только файлы c кодом внутри нее. На следующем шаге мы заменим эти файлы примерами, необходимыми для нашего проекта.
Код cd my-app cd src # Если вы используете Mac или Linux: rm -f * # Или, если вы на Windows: del * # Затем переключитесь обратно на папку проекта cd ..

4. Добавьте файл с именем index.css в папку src/ с этим кодом CSS .

5. Добавьте файл с именем index.js в папку src/ с этим кодом JS .

6. Добавьте следующие три строки в начало файла index.js в папке src/:

Код import React from ‘react’; import ReactDOM from ‘react-dom’; import ‘./index.css’;

Теперь, если вы запустите npm start в папке проекта и откроете http://localhost:3000 в браузере, вы должны увидеть пустое поле крестики-нолики.

Также мы рекомендуем следовать данным инструкциям , чтобы настроить подсветку синтаксиса в вашем редакторе.

Если вы застряли, посетите ресурсы сообщества поддержки . В частности, Reactiflux Chat — отличный способ быстро получить помощь. Если же вы не получили ответа или зашли в тупик, пожалуйста, сообщите нам в Git о проблеме, и мы вам поможем.

Зарплаты и вакансии для React-разработчиков

На сайте поиска работы hh.ru по запросу React в начале июля 2020 года есть более 3000 вакансий по России. Эти вакансии можно объединить в три группы.

В первую группу входят объявления о поиске фронтенд-разработчиков. Типичные названия вакансий — «Frontend-разработчик», «JavaScript-developer». В таких объявлениях работодатели указывают умение писать на React в числе требований к кандидатам. Иногда вакансии называются «React-разработчик», но по сути работодатели ищут фронтенд-разработчиков, которые умеют писать на React.

В начале июля 2020 года в объявлениях о поиске JS-разработчиков со знанием React зарплатная вилка составляет от 50 000 до 285 000 рублей в месяц.

Вторая группа — объявления о поиске бэкенд- или фулстэк-разработчиков со знанием React. Например, один из работодателей искал fullstack или backend-разработчика на C#, который сможет решать задачи на фронтенде с помощью TypeScript, React и Redux. Ещё один пример — объявление о поиске Java-программиста, который работал с React или захочет разобраться в этой библиотеке.

То есть работодатели приветствуют знание React у кандидатов на вакансии, которые прямо не связаны с фронтенд-разработкой. Обычно в таких случаях компании ищут опытных программистов, поэтому предлагают зарплаты от 150 000 рублей в месяц.

Третья группа — объявления о поиске программистов со знанием React Native. С помощью таких объявлений работодатели ищут разработчиков мобильных приложений.

Вилка зарплат для разработчиков со знанием React Native составляет от 30 000 до 250 000 рублей в месяц. По состоянию на начало июля 2020 года открыто несколько оплачиваемых стажировок, минимальная зарплата стажёра составляет 15 000 рублей в месяц.

Промежуточный итог: умение работать с React — хорошее преимущество при поиске работы как для фронтендеров, так и для специалистов по бэкенду. А знание React Native позволит кандидатам претендовать на позиции разработчиков мобильных приложений.

По состоянию на конец июля 2020 года на hh.ru есть более 3000 вакансий для программистов со знанием React. Для сравнения, работодатели открыли только 1400 вакансий для программистов со знанием Vue.js и 1600 вакансий для программистов со знанием Angular.

Мнение экспертов о развитии и перспективах библиотеки

Специально для этой статьи опытные разработчики поделились мыслями о перспективах React, целесообразности изучения этой библиотеки и инструментах для управления состоянием и альтернативных библиотеках и фреймворках. Эксперты ответили на такие вопросы:

1. По данным LogRocket, доля React на рынке UI-фреймворков и библиотек составляет около 60%. Как вы считаете, в обозримом будущем эта ситуация может существенно измениться?
2. Провокационный вопрос: фреймворк или библиотека, который обойдёт React в будущем, уже существует или он только должен появиться?
3. Какие новые возможности React лично вы ждёте больше всего? Когда они могут появиться?
4. Для управления состоянием в более или менее сложных React-приложениях чаще всего используется Redux. Появятся ли альтернативы Redux, которые станут популярными и общепринятыми способами управления состоянием?
5. Вопрос, ответ на который заинтересует новичков: стоит ли изучать React, чтобы устроиться на работу фронтенд-разработчиком в 2020 или 2021 году?