krambertech / react-essential-course

ITVDN - React Essential course materials

Курс React Essential

ITVDN — Information Technology Video Developer Network

Содержание

УРОК 1: Введение в React

УРОК 2: Подробнее о компонентах

УРОК 3: Настройка окружения, подключение внешних библиотек и сборка

УРОК 4: ES2015, роутинг, CSS препроцессоры, PropTypes, контекст

УРОК 5: Работа с внешним API и архитектура Flux

УРОК 6: Написание полноценного SPA

Материалы

1. У React очень хорошая документация
2. Советую почитать о ES6
3. Ну, и никто не отменял Google

FAQ

Где писать код?

Вы можете выбрать любой текстовый редактор или IDE на ваш вкус.

Atom ♥️

Я сейчас использую Atom, он бесплатный и классный :)

Вот мои любимые плагины для Atom:

• atom-alignment
• autocomplete-modules
• file-icons
• highlight-selected
• language-babel
• linter
• linter-eslint
• merge-conflicts
• react
• pigments и minimap-pigments
• minimap

Еще полезные плагины можно посмотреть тут

Sublime Text 2

Если вы используете Sublime, скачать его можно тут, есть версия для Windows, OS X и Ubuntu.

Список полезных плагинов для Sublime:

• PackageControl — менеджер плагинов как установить
• Emmet — набор сниппетов
• SideBarEnhancements — значительно улучшает боковую панель (New File, New Folder, Duplicate, Copy, Move и тд)
• SublimeCodeIntel — крутой автокомлит
• Alignment — выстраивает все курсоры в одну линию по нажатию Ctrl+Alt+A
• Super Calculator — позволяет делать математические вычисления по ALT+C
• GitGutter — показывает измененные строки с момента последнего коммита
• AutoFileName — автозаполнение путей к подключаемым файлам
• ColorHighlighter — подсветка цвета в CSS/LESS
• Jquery Snippet Pack — набор сниппетов для jQuery
• babel — Подсветка для ES6, подсветка JSX
• babel-snippets — сниппеты для React

Еще

Также можно использовать WebStorm, Nuclide, Visual Studio или другие.

Как писать код?

Очень советую ознакомиться с Javascript style guide.

Есть вопросы?

Пишите сюда

Нашли ошибку или опечатку?

Исправляйте и создавайте pull-request :)

react-essential-course's Issues

Интернет магазин

Катерина,привет. Подскажи,пожалуйста, по поводу интернет магазина, а именно по поводу 4-го пункта, где нужно сделать функционал добавления в корзину. Как это можно сделать, ведь корзина и и кнопка добавления в корзину находятся в разных компонентах?

2 урок, 1 задание - вопрос по цветам

Екатерина, спасибо Вам за проделанную работу. Всё очень понятно и доступно.
Есть вопрос по заметкам. Сделал компонент выбора цвета, в нём выбранный цвет помечается галочной (background-image в CSS и checked в input). Но при инициализации приложения не выбран ни один из цветов, хотя в состоянии NoteEditor хранится цвет. Как это исправить?
Вот исходники: https://github.com/trofivan/react-essential-course/tree/master/02-deep-in-components/homework/01
И по основному коду, правильно ли я написал компонент выбора цвета или есть какие-то грубые ошибки?

Сборка проектов.

Екатерина, здравствуйте.
Если можно, подскажите, не собирается проект на реакте. При запуске команды webpack или соответствующего ему devserver получаю ошибку в терминале

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (6:4)

ReactDOM.render(,document.getElementById("content"));

Это, как Вы понимаете entry-файл. Указание на символ < перед NotesApp. Грешу на неправильно приготовленный babel.

В package.json

{
"name": "notes",
"version": "1.0.0",
"description": "Notes Page Application",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8090 --host 0.0.0.0"
},
"author": "Max Filatov [email protected]",
"license": "ISC",
"dependencies": {
"jquery": "^3.1.1",
"react": "^15.4.1",
"react-dom": "^15.4.1"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"css-loader": "^0.26.0",
"file-loader": "^0.9.0",
"json-loader": "^0.5.4",
"postcss-loader": "^1.1.1",
"react-hot-loader": "^3.0.0-beta.6",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}

В webpack.config.js в разделе модулей -> загрузчиков
module: {
loaders: [
{
test: /.js$/,
loader: "babel-loader",
exclude: /(node_modules|public)/,
},
{
test: /.jsx$/,
loader: "react-hot!babel-loader",
exclude: /(node_modules|public)/,
}
]
}
};
Что не так или неправильно указаны библиотеки? Как я понимаю и прочитал на оф. сайте babel, сейчас надо загружать babel-loader, babel-core ( + babel-cli, "babel-preset-es2015", "babel-preset-react", "babel-preset-stage-2" по необходимости). Возможно, что-то неправильно понимаю. На всякий случай, у меня Gentoo-linux, хотя это неважно. Если можно, ответьте на почту, адрес во вставке кода package.json.

Заранее благодарен за ответ.
Филатов Максим.

Webpack - увеличение в размере конечной сборки bundle.js

Катерин, привет.

1. Смотрел скринкаст Ильи Кантора по webpack, также собрал собственный по кусочкам, используя тот же скринкаст, твои уроки и интернет.
   Какой ты конфиг webpack'а используешь в живых проектах? Интересует использование в конфиге таких вещей:
   • hot module replacement
   • разделение сборки на 'development' и 'production'
   • делаешь ли ты сборку в классическую модель для 'production', в виде:

     -project
     --css
     --img
     --js
     --index.html
     

   • как поступаешь с изображениями в проекте? Ложишь их в папку /public или также разделяешь по компонентам?
2. Был ли опыт работы с React-Bootstrap?
   Если да (но даже если и нет), то может будет у тебя мнение насчет того, почему в проекте с такими зависимостями -

  "dependencies": {
    "bootstrap": "^3.3.6", "(отсюда беру лишь bootstrap.css)"
    "jquery": "*",
    "less": "^2.7.1",
    "react": "^0.14.6",
    "react-bootstrap": "^0.29.5",
    "react-dom": "^0.14.6"
  },

происходит разрастание конечного собранного bundle.js в файл размером 1.8Мб в несжатом виде (в сжатом где-то 500Кб). Нормален ли такой объем файла, это при том, что еще не писался кастомный функционал?

Сообщение об ошибке

А как понять, где синтаксическая ошибка? В браузере пишет такое "Uncaught SyntaxError: embedded: Unexpected token (19:14)" и дальше стек по browser.js.
А что и где я неверно написал непонятно.

Просьба помочь разобрать ошибку

Привет! Помоги пожалуйста с ошибкой в 3ем уроке. После встраивания NotesApp webpack не может сбилдить приложение.

jQuery autocomplete

Добрый день, Екатерина Поршнева!
Известен ли Вам поисковик на сайте наподобие jQuery Autocomplete, который имел бы фиксированную шапку и фиксированный подвал?

Урок 6

Катя, добрый день!
Пытаюсь переделать способ отображения ‘currentTaskList’ в Заголовке.

Вместо того, чтобы обращаться к API (чтобы получить текущий taskList), решил попробовать отфильтровать весь список taskLists (из store) и найти среди них объект, чей id совпадает с id из ‘props.params.id’ (т.е. текущий).

В общем нашел и отправил потом этот объект (id, name) в TasksPage-component (через props). Потом получил и отобразил его.

‘this.props.currentList.name’

В итоге, все нормально отображается. Заголовки меняются мгновенно. Но как только обновляю страницу, получаю ошибку.

‘TypeError: Cannot read property 'name' of undefined’

(если я правильно понимаю, этот объект не передался еще через ‘props’ и соответственно ‘name’ будет undefined)

С этой проблемой сталкиваюсь достаточно часто. Решаю ее «методом тыка».)) Иногда пишу условие, иногда проверяю пришел ‘props’ или нет. Иногда помогает, иногда нет.

Четкого объяснения этой проблемы у меня нет. Как собственно и решения.)

Можете в вкратце объяснить в чем дело?))
Спасибо

React

Как узнать правильно я решил задание или нет? С чем сверяться?

Atom for JS

Добрый день, Екатерина. Спасибо большое за Ваши уроки. Вы советуете использовать для написания кода Atom. Почему-то, у меня он не выдает ошибки в JS. Я установила уже целую кучу Packages для него, в том числе и те, что Вы рекомендовали. Ошибки в CSS и HTML работают, а вот в JS - нет. Какие lint мне нужно для этого установить? Уже есть для JS atom-jshint, jshint, jslint, lint, linter, linter-eslint, linter-flow, linter-jscs, linter-jshint ... Не работает ничего. Я новичок в программировании и самоучка, может быть просто что-то не так подключаю? Спасибо заранее!

Небольшой вопрос

Екатерина, добрый день!
Просмотрел ваш курс по ReactJS, (второй урок).
Никак не могу понять для чего вы использовали "bind()" (для удаления заметок). Зачем этот "bind()" нужен? Для чего в принципе используют "bind()" мне понятно.

Пример:
//===========================================
var add = function (a, b) {
return a + b;
};
var add2 = add.bind(null, 2);

add2(10) === 12;
//===========================================

Но какую роль он играет именно в вашем скрипте, я не могу понять
Если найдется свободная минутка, объясните в двух словах, если не сложно.
Благодарю

var NotesGrid = ........
.........
render: function() {
var onNoteDelete = this.props.onNoteDelete;
return(

{
this.props.notes.map(function(note){
return(
key = {note.id}
onDelete = {onNoteDelete.bind(null, note)} //////////////////////////////////// зачем bind()?
color = {note.color}

{note.text}
);
})
}

);
}

Добрый день, не могли бы вы помочь с организацией модульности при помощи Gulp?

Добрый день Катерина, не могли бы вы помочь с организацией модульности при помощи Gulp?

1. Для создания web проекта я использую фреймворк Laravel. Для управления ".jsx" файлами я использую рекомендуемый Laravel пакет Gulp. При помощи него я хотел объединить между собой ".jsx" файлы в один единый файл "main.js".
   Проблема в следующем. При моей попытке соединить между собой отдельные ".jsx" файлы с react компонентами в один файл "main.js" ничего не выходит. Я попробовал соединять между собой файлы и при помощи функции require() и при помощи import. Всегда одна и та же ошибка выдается в браузере : "Uncaught ReferenceError: require is not defined".

2. Нужно ли в целом использовать подключение файлов между собой, если gulp (судя по всему как и webpack) может объединить все компоненты react выделенные в отдельные файлы в один единый файл? Другими словами, компоненты разбитые по отдельным файлам, в итоге ведь все равно смогут обнаружить (увидеть) друг друга после объединения в единый файл (например "main.js").

Извините, если я не совсем точно и понятно сформулировал вопросы. Я просто не слишком часто задаю их, в основном всегда пытаясь найти ответ сам. Но тут что то совсем тяжело.

Вопрос по NodeJS/React

Здравствуйте Екатерина,

Немного не по теме, это не проблема, просто не знаю как по другому с Вами связаться.
Есть практический вопрос по Вашим замечательным курсам, как можно с Вами пообщаться голосом? Очень нужно :)

Мой емайл: [email protected]

Спасибо,

Вадим

Message Preview на FLUX

Екатерина, добрый день!

На днях пытался переделать приложение «Message Preview»! решил переписать его на Flux. Решил использовать API. (нашел в интернете. Просто список товаров с описанием(модель, год, страна, цена и тд)).

В одном компоненте отображался список товаров. По нажатию на изображение, через ‘push’ бросал его ‘id’ в ‘props.params’.

А во втором компоненте на ‘componentWillMount’ ловил этот ‘id’ (из params) и вызывал Action передавая этот id.

Потом искал товар с этим id во всем списке торов (в store)… получал именно тот товар на который кликал и отображал его.

Все нормально, работает. Кликаю на изображение, справа рендерится второй компонент и отображает подробную информацию.

Только вот проблема. Кликаю на товар в списке, рендерится второй компонент, отображается вся информация! Но если ОБНОВИТЬ СТРАНИЦУ, пропадает не только компонент с «выбранным» товаром, но и сам компонент со всем списком товаров.

Почему, никак понять не могу. Почему пропадает компонент со всем списком товаров, если у него на componentWillMount вызываю action, потом идет запрос к API (api возвращает все товары, потом эти товары рендерятся в этом компоненте). По идеи должен перед рендерингом обращаться к API. И отображать список товаров. Но вот почему при обновлении страницы они пропадают…. Не знаю

Продолжение ...

Екатерина, добрый день!
Стоит ли ожидать продолжения курса? (5-ое и 6-ое видео).
Если да, то когда примерно они появятся? неделя, месяц?
п.с.
Курсы и правда хороши!!!

Про курсы

Здравствуйте, если я ознакомился с React-ом по видеокурсам на вашем сайте, мне имеет смысл проходить онлайн-курс. Узнаю я там что-то новое именно про React.

React и TypeScript

Привет.
Есть ли в планах использовать TypeScript для React приложений?

Для сравнения с vanila JS перевел на TS приложение с созданием заметок из 3 урока https://github.com/terbooter/react-app

По ощущениям TS вполне готов для использования с React.
А плюшки самого TypeScript невозможно переоценить!
Чего только стоят подсказки свойств компонент в ИДЕ

5й Урок.

Добрый день, Екатерина. Очень понравились ваши уроки. Спасибо за труд. Когда ждать 5й урок?

Верстка с react

Катерина, добрый день!
Скажи, пожалуйста,

1. пользуешься ли чем то для создания сеток вроде react-grid-layout, react-layout-components
   , react-bem-grid или какой то css библиотечкой?
2. пользуешься flexbox? вроде IE его не поддерживает
3. нужно чтобы горизонтальное меню заменялось в мобильной версии на выезжающий бургер с дополнительными пунктами, если делать через медиа запросы нужно оба меню держать в DOM или лучше примонтировать при resize?
4. инлайнишь css внутри компонентов чем то вроде radium (как тогда медиа запросы и общие переменные, например, палитру вынести?) или bem в less?
   1. если по bem, то используешь что то типа react-bem-helper или руками в jsx классы целиком пишешь?

Спасибо

02-deep-in-components - ToDo list

Есть вопросы касательно раздела 02-deep-in-components, а конкретно по to-do list и поиску по заметкам.
Код на jsfiddle.

1. При поиске или сортировке данных в приложении, происходит полное изменение состояния (state), в котором хранится массив данных, а также происходит переписывание localStorage. Поэтому на данном этапе необходимо сохранять (не перезаписывая при следующей сортировке) в промежуточной переменной весь массив данных (метод onToDoSort, строка 132). Более того, необходимо еще отслеживать (метод componentDidUpdate, строка 166) запись в localStorage, иначе, если этого не делать, в состоянии сортировки при добавлении новых элементов и следующей перезагрузки страницы, происходит затирание неотсортированных данных.
   Насколько такой подход верен, существует ли простой способ отслеживания этого момента? Интуитивно происходит стремление к более понятному и простому, может ли React это предоставить?
2. В to-do list приложении при сортировке происходит изменения цвета шрифта соответствующих пунктов сортировки All New Completed. Я задал изначальную сортировку (метод componentWillMount, строка 162) и потом производил изменение ее (метод onToDoSort, строка 150) с передачей в соответсвующий компонент (метод render, строка 171). И уже в компоненте, подставляя необходимый стиль (метод render, строка 83), руководил изменением цвета шрифта All New Completed.
   Этот способ также сработал как и решение в предыдущем абзаце, но опять же интуитивно кажется мне весьма запутанным. Существует ли другой подход к решению этой задачи?

Вопрос по routing

Не понимаю в чем проблема. На грузятся страницы AboutPage и InboxPage.
Файл index.js:

import React from 'react';
import {HashRouter, Route, Link} from 'react-router-dom';
import AboutPage from './AboutPage';
import InboxPage from './InboxPage';
import App from './App';
ReactDOM.render(
    <HashRouter>
            <Route exact={true} path='/' component={App}>
                <Route  path='/about' component={AboutPage}/>
                <Route  path='/inbox' component={InboxPage}/>
            </Route>
    </HashRouter>,
    document.getElementById('mount-point')
);```

Файл App.js
```import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class App extends Component {
    render() {
        return (
        <div>
            My application
            <Link to="/about"> About </Link>
            <Link to="/inbox"> Inbox </Link>
            <div>
                {this.props.children}
            </div>
        </div>
        );
    }
}
export default App;```

Файлы AboutPage и InboxPage похожи. Вот файл AboutPage.js
```import React, { Component } from 'react';
class AboutPage extends Component {
    render() {        return <div> This is About page </div>;    }
}
export default AboutPage;```

УРОК 1: Введение в React - метод .map

Привет, Катерина. Благодарю за уроки!
В нижеприведенном коде, происходит перебор массива данных. Почему используется именно метод .map, а не к примеру .forEach (он, кстати, не работает - я пробовал). Если мы хотим из массива взять элемент и запустить react-компонент, то, по идее, подходит и тот, и тот методы, но по факту это не так. Что я упускаю из виду и каков алгоритм преобразования данных в нижеприведенном методе?

this.state.displayedContacts.map(function(el) {
    return <Contact
               key={el.id}
               name={el.name}
               phoneNumber={el.phoneNumber}
               image={el.image}
           />;
})

text 3D

Урок 3: Окружение - Задание 2 : Отображение статей

Катерин, привет.
Вопрос насчет поиска статей.
Если пойти далее этого задания и, к примеру, не только отображать статьи согласно поиску, но и подсвечивать запрос (т.е. оборачивать в span) в тексте найденных статей. Есть варианты в какую сторону идти?

05-flux

привет, Катерина.

Вопрос по 5 уроку ( 05-flux ), в частности интересует как вы запускали devserver? Спасибо

Примеры.

Доброго времени суток, Екатерина!
Нашёл ваши уроки на youtube. Очень заинтересовали, но хотелось бы увидать текстовые примеры кода. Я незрячий и в видео уловил только малую часть.Ф

Вопрос по реализации polling

Привет, я новичек. Задался вопросом регулярного получения данных с сервера. На хабре нашел как реализовать polling (частые запросы): в компонент добавляется пара методов:

loadNewDataFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
componentDidMount: function() {
    this.loadNewDataFromServer();
    setInterval(this.loadNewDataFromServer, this.props.pollInterval);
  }

Вопрос: Я правильно понимаю, перед удалением компонента из DOM (при переключении внимания пользователя на другой компонент, полностью не зависящий от полученных данных) для экономии трафика нужно прекратить запросы следующим образом:

componentWillUnmount(){

    // подскажите, что здесь?

  }

Заранее, спасибо.

Урок 1, задание 3

Добрый день, Катя. Подскажите пожалуйста, как отображать полную или сокращенную информацию контакта? Нужно изменять класс div элемента "additional-info"? Я добавил состояние, изменяю его в обработчике onClick, но у меня не выходит отобразить это в методе render. Заранее спасибо за ответ)

`

 var Contact = React.createClass({
      
 getInitialState: function() {
              return {
                 isOpened: false
             }
         },
  handleContact: function(event) {
             this.setState({
                 isOpened: !this.state.isOpened
             });  
             console.log(this.props.name);
             console.log(this.state.isOpened);
         },
        
       render: function() {
             var invisible = this.state.isOpened? {display: 'block'} : {display: 'none'} ;
              return (
                <li className="contact" onClick={this.handleContact}>
                    <img className="contact-image" src={this.props.image} width="60px" height="60px" />
                    <div className="contact-info">
                        <div className="contact-name"> {this.props.name} </div>
                        <div className="contact-number"> {this.props.phoneNumber} </div>
                        <div className="additional-info" style={{invisible}}>
                            <div className="contact-address"> {this.props.address} </div>
                            <div className="contact-email"> {this.props.email} </div>
                        </div>
                    </div>
                </li>
            );
        }
    });

`

Помощь в третьем задании 01-react-essential-course

Добрый день.
Застряла на третьем задании: "При клике на контакт, он должен разворачиваться (увеличиваться в высоте) и должна отображаться какая-то дополнительная информация о контакте (например, адрес и email). При повторном клике, информация должна сворачиваться.".
Как достучаться к конкретному контакту в массиве CONTACTS в методе isOpened?

Вопрос по 02-deep-in-components/03-notes-app/

Катерина, здравствуйте! Спасибо за уникальный обучающий материал!

Не понимаю что мы делаем(отправляем, принимаем?) этой строкой:
< NoteEditor onNoteAdd={this.handleNoteAdd}/; в компонент(/или из него) NoteEditor?
И как понять вот эту строку : this.props.onNoteAdd(newNote); (передаем в качестве реквизита переменную newNote параметру onNoteAdd ? )

React Page Preloader

Не знаю, насколько это по тематике учебного курса, но надеюсь, если найдется ответ, он будет многим полезен.
Катерин, не сталкивалась в React с прелоадерами страниц, т.е. мне нужно отображать страницу с анимацией пока грузится вся js-сборка. Если бы еще и процент загрузки можно было бы отслеживать - было бы шикарно.
Есть варианты?

Работа с devserver

Привет,

У меня такой вопрос,почему когда я использую devserver в package.json

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8090 --host 0.0.0.0"
},

у меня не работает, а когда сменил порт и хост

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8080 --host 127.0.0.1"
},

у меня заработало. Я использую intellij.

Документация по JavaScript Google API

На Google Tasks API нет информации по API на JavaScript. Т.е. совершенно не ясно, как формируются запросы:
gapi.client.tasks.tasks.insert
gapi.client.tasks.tasks.list
gapi.client.tasks.tasks.update

В видео уроках, вы их просто вставляете из буфера обмена, не поясняя откуда их брать...

Небольшой вопрос

Екатерина, добрый день!
Просмотрел ваш курс по ReactJS, (второй урок).
Никак не могу понять для чего вы использовали bind() (для удаления заметок). зачем этот bind() нужен?
Если найдется свободная минутка, объясните в двух словах, если не сложно.
Благодарю

var NotesGrid = ........
.........
render: function() {
var onNoteDelete = this.props.onNoteDelete;
return(

{
this.props.notes.map(function(note){
return(
<Note
key = {note.id}
onDelete = {onNoteDelete.bind(null, note)} // зачем bind()?
color = {note.color}
> {note.text}
);
})
}

);
}

Redux usage

Если у вас есть планы дальше развивать этот курс, то, мне кажется, было бы неплохо показать Redux. И его сравнение с Flux

Новый 6-и недельный курс

Катя, добрый день!
Будут ли рассматриваться вопросы связанные с минификацией файлов (js, css) и разделением приложения на production и development
Спасибо

Flux: Получение данных при загрузке

Начал рассматривать flux-подход. На первый взгляд он не так прост, но видимо это оправдывается при многократном изменении данных и таком же рендеринге.
Но как быть в том случае, когда я хочу единожды, к примеру, при загрузке страницы получить данные от апи, отрендерить компонент с ними и все. Неужели и в таком варианте необходимо проходить через вереницу констант и событий?
Как действовать в таком случае?

Загрузка слайдера.

Катя, у меня такой вопрос. Если я собираюсь прикрутить сторонний слайдер к моему приложению то каким методом реакта мне нужно его оборачивать? этот слайдер по задумке должен получать изображения из массива. Если никак не оборачивать, слайдер срабатывает до того как реакт подгружает к нему изображения из массива. Я хотел использовать owl-carousel слайдер который имеет 2 файла, один сам слайдер, а другой вызов этого слайдера... подскажите как сделать чтобы всё работало.

Typed.js

Здравствуйте! вы когда нибудь использовали библеотеку Typed.js на реакте. можете даьб пример? нужна именно это библеотека

Передача параматера 4 урок, дз

Подсветка кода Babel внутри HTML

Какой плагин у тебя стоял на Sublime, который делал подсветку синтаксиса в HTML файле внутри скрипта с типом text/babel? Установил https://github.com/babel/babel-sublime, но я так понял, что он работает только с отдельными файлами JS. Но при выносе JS кода в отдельный файл начинает выдавать ошибку babel-core/../browser.min.js.

https://www.amazon.com/

Добрый день, Катя!
Скажи пожалуйста, как называется технология, которая используется при вводе слова поиска на сайте https://www.amazon.com/?
Я имею в виду то, что весь сайт кроме поля поиска и кроме результатов поиска покрывается белым фоном.

5 урок

form react

Привет,Екатерина. Не будет ли у Вас времени глянуть мое небольшое "приложение", а именно обычную формочку. Хотел бы, что бы Вы указали на мои недочеты, которых будет не мало, хотел бы что бы посоветовали что еще можно почитать или может посмотреть толкового после Вашего курса, чтобы дальше расти. Еще хотел бы, чтобы вы подсказали плагины, которые Вы используете для плавности в React (я имею ввиду что-то типа transition в css3). Вот ссылка на репозиторий https://github.com/SergeyWebDeveloper/formReact

Вопрос прекрасному ront-End разработчику

На сколько сейчас актуальный данный курс, что изменилось в 15 версии react и что уже в данном курсе устарело?
Заранее спасибо за ответ.

Небольшой вопрос

Екатерина, добрый день!
Просмотрел ваш курс по ReactJS, (второй урок).
Никак не могу понять для чего вы использовали bind() (для удаления заметок). зачем этот bind() нужен?
Если найдется свободная минутка, объясните в двух словах, если не сложно.
Благодарю

var NotesGrid = ........
.........
render: function() {
var onNoteDelete = this.props.onNoteDelete;
return(

{
this.props.notes.map(function(note){
return(
<Note
key = {note.id}
onDelete = {onNoteDelete.bind(null, note)} // зачем bind()?
color = {note.color}
> {note.text}
);
})
}

);
}

React Essential

Здравствуйте, Екатерина. Хочу задать вопрос по последнему заданию первого урока(калькулятор)
Не могу понять, как записывать состояние разных Input

const InitStateInputs = {
    valueA: null,
    valueB: null
  };

  var Calc = React.createClass({

    getInitialState: function() {
      return {
        initInputs: InitStateInputs
      }
    },
    handleChange: function(e) {

     this.setState({
       initInputs: this.state.initInputs === InitStateInputs
       ? {valueA: e.target.value, valueB: e.target.value}
       : initInputs
     });
    }
    ,
    render: function() {
      return (
        <div>
        <input type="text"  onChange={this.handleChange} value={this.state.initInputs.valueA} />
        <input type="text"  onChange={this.handleChange} value={this.state.initInputs.valueB}  />
        <input type="button" value="Сложить" onClick={this.Summ} />
        <input type="button" value="Вычесть" onClick={this.Substruction} />
        <input type="button" value="Умножить" onClick={this.Multiply}  />
        <input type="text" value={this.initInputs}/>
        </div>

      )
    }
  })

Расширения Chrome

Катерина!
Какими расширениями Хрома ты пользуешься?

Задача про сортировку todo-листа

Екатерина,здравствуйте. Не совсем понимаю как нужно решить задачу фильтрации todo листа. Не могли бы подтолкнуть на мысль, а то в ответах других не хочется копаться.

Проблемы с кодом в третьем уроке. Ломается

Урок номер № 3 : валиться сборка на в src/main.js ... В какой части ломается код? Или уже так не пишут на последних версиях ?
Линтер пишет вот такое :
2. Use the function form of 'use strict'. 'use strict';
3 'require' was used before it was defined. var ReactDOM = require('react-dom');
4 'require' was used before it was defined. var React = require('react');
5 'require' was used before it was defined. var NotesApp = require('./components/NotesApp.jsx');
Браузер и командная строка ругаются так :
D:\Projects\www\200517>webpack
Hash: 48f76d9d7c6a1ac2c056
Version: webpack 2.5.1
Time: 3860ms
Asset Size Chunks Chunk Names
bundle.js 3.34 kB 0 [emitted] main
[0] ./src/main.js 699 bytes {0} [built] [failed] [1 error]

ERROR in ./src/main.js
Module build failed: SyntaxError: D:/Projects/www/200517/src/main.js: Unexpected token (9:4)

7 |
8 | ReactDOM.render(

9 | ,
| ^
10 | document.getElementById('mount-point')
11 | );