Содержание Вступление От автора 1.1 1.1.1 1.2 1.3 Использование props 1.4 If-else, тернарный оператор 1.5 Порефакторим... 1.6 Prop-types 1.7 Использование state 1.8 Подробнее о state 1.8.1 Работа с input 1.8.2 Жизненный цикл компонента 1.9 Работа с формой 1.10 Добавить новость 1.10.1 Итоги по основам 1.11 create-react-app 1.12 Приборка и импорты 1.12.1 Асинхронные запросы 1.13 Спам-фильтр 1.14 componentWillReceiveProps 1.14.1 getDerivedStateFromProps 1.14.2 Порефакторим... 1.14.3 Заключение 1.15 Вступление React.js курс для начинающих Это обновленная версия моего популярного туториала (более 250 000 читателей) по React. Я очень рад, что у учебника появилась вторая жизнь. Спасибо всем, кто учится и учился по этим книгам. Спасибо за ваши письма, лайки и репосты. В 2018м году у меня появилось онлайн-сообщество. Подробнее в разделе "От Автора" В данном курсе разбираются основы React.js Результатом курса будет небольшое приложение новостей, в котором можно добавить новость, а так же посмотреть у новости "подробнее". После прочтения курса, вы научитесь: 1. Создавать компоненты, учитывая propTypes 2. Грамотно использовать props и state компонента 3. Работать с формой 4. Работать с react dev tools 5. Рефакторить и быть лучше ;) В тексте курса часто встречаются небольшие задачки, а так же приводится их решение. Для успешного прохождения курса, вам потребуются знания: 1. HTML/CSS 2. Javascript (или хотя бы jQuery, если вы понимаете, что $ всего лишь функция...) Поддержать проект Вы можете поддержать проект, мне будет очень приятно. Если у вас не получается поддержать проект материально, вы можете оставить отзыв в группе vk. От автора Обо мне Меня зовут Максим Пацианский, я Frontend-разработчик, стартанул в этой теме с Joomla! сайтов в 2008 году. Занимаюсь консультированием по React более 2х лет, с момента выхода прошлых учебников. Подробнее о моем опыте консультирования я писал на хабре. Напутствие Пожалуйста, выполняйте код по ходу книги. Ломайте его, "консольте", интересуйтесь. Полезные ссылки Мои уроки/вебинары/соц.сети: Расписание стримов и вебинаров (на сайте есть текстовые версии вебинаров) Youtube канал c записями вебинаров и стримов Группа vkontakte Канал в telegram Twitter Facebook React.js (EN) - офф.сайт, содержит примеры для изучения От автора Консультации и платные услуги Общение по скайпу - 45$ / час Создание сервисов с использованием react, поиск проблем с производительностью, помощь в собеседовании разработчиков - цена по запросу. Пишите на с темой "Консультация React v2" Подключение react'a с помощью тэга script React.js это всего лишь библиотека. Не фреймворк. Как и любая другая библиотека, реакт добавляется на страницу с помощью тэга script . Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - react отлично дружит с webpack, babel и прочими. Для простоты, мы начнем работать с реактом, как с обычной библиотекой, например, jQuery, но затем перейдем на удобный инструмент - create-react-app. Cоздайте следующие файлы в директории с вашим проектом. +-- .gitignore (если будете использовать git) +-- index.html В мире программирования, каждый урок начинается с hello, world. React [RU] Tutorial

Во-первых, мы подключили библиотеки react и react-dom как обычные скрипты Во-вторых, мы подключили babel библиотеку, для того, чтобы наша строка

Привет, мир!

, которая написана на вспомогательном языке JSX, превратилась в валидный javascriptкод: React.createElement("h1", null, "Hello, world!"), На протяжении всего туториала мы будем использовать JSX. Исходный код для данного раздела. ReactDOM.render принимает react-компонент (далее буду называть просто "компонент") и DOM-элемент, в который мы хотим "примонтировать" наше приложение.

Hello, world!

- как ни странно, это примитивный компонент. Пока ничего интересного, но давайте представим такой псевдо-код: var photos = ['images/cat.jpg','images/dog.jpg','images/owl.jpg'] ReactDOM.render( , document.getElementById('root') Что примечательного в данном псевдо-коде? Он очень хорошо читается, ведь очевидно, что наше приложение (App) отображает: фото (кошка, собака, сова), новости и комментарии. Хочу вас обрадовать, React.js код выглядит практически так же. Он отлично читается, так как деление на компоненты позволяет отлично структурировать код. Давайте создадим примитивный компонент:

Что примечательного? Мы скрыли в разметку. Да, в этом примере это одна строка и чувство эйфории отсутствует, но то ли еще будет! Пока запомним, что если мы хотим отрисовать в JSX компонент, то мы обязательно должны называть и вызывать его с Большой буквы. Смотрим на результирующий html-код: Мы создали компонент с помощью функции. Но компоненты, можно создавать и с помощью class . Убьем сразу нескольких зайцев: изучим как создавать компоненты с помощью class как передать css-стиль как отрисовать сразу несколько компонентов React [RU] Tutorial v2