React. Материалы курса

Материалы курса можно скачать из репозитория https://github.com/Juriy/pro-react-redux
Команда для скачивания

$ git clone https://github.com/Juriy/pro-react-redux

Чтобы запустить код, заходим в нужную папку, и выполняем команду

$ npm install

Эта команда позволяет npm скачать нужные зависимости

Следующая команда

$ npm start

Эта команда запускает вебпак и собирает нужные зависимости в один проект

Babel

Babel  - это бесплатный JavaScript-компилятор, который позволяет превратить новый современны код в код, понятный не самым новым и не самым современным браузерам.
Больше того, Babel позволяет использовать даже ещё не вошедшие в финальную стадию предложения по улучшению языка, те возможности, которые ещё только будут включены в стандарты EcmaScript

Компоненты React

React-компоненты - независимые блоки кода, которые могут иметь своё собственное поведение.
Если react-элемент просто кусочек разметки JSX, то react-компонент - класс или функция, у которой есть собственные параметры (props, от англ. properties - свойства), а в случае использования классов ещё может быть и состояние - state.

В React есть несколько разных типов компонентов
Мы начнем с подклассов React.Component:
Два способа объявления React-компонента

1. способ, использующий классы ES6:

class MyComponent extends React.Component {
  render() {
    return <div className = {this.props.className}/>;
  }
}

Пример использования:  

const el = < MyComponent className ="Mark" />;
ReactDOM.render(el, document.querySelector('#root'));

2. объявление компонентов как функций от props:

const MyComponent = props => ( 
  <div className={props.className}/>
);

Второй способ короче.
Ограничением является то, что функциональные компоненты не могут иметь связанное с ними состояние

Мы можем создавать свои компоненты и обращаться к ним так

< MyComponent />

Собственные компоненты, в отличии от стандартных тегов, всегда записываем с заглавной буквы.

Реакт-элемент – самый маленький кирпичик, из которых строятся реакт-компоненты.

Создаём реакт-элемент

1. подключаем библиотеки реакт и реакт дом

import React from ‘react’;
import ReactDOM from ‘react-dom’;

2. создаём реакт-элемент

const el = <h1>Hello world!</h1>

Примечание. Если код элемента состоит из нескольких строк, его нужно обернуть в круглые скобки

3. используем ReactDOM для того, чтобы отобразить элемент на странице

ReactDOM.render(el, document.querySelector('#root'));

Первый аргумент в функции render – какой элемент добавляем, второй – куда добавляем (в элемент с id root в html-разметке)

Примечание. Чтобы изменения мгновенно отображались в проекте, должен быть запущен npm, и в нём запущена команда npm start

npm start мониторит все изменения в проекте и отображает их на экране браузера

Создадим ещё один элемент

import React from 'react';
import ReactDOM from 'react-dom';

const el = (
  <div>
    <h1>My Todo List</h1>
    <input placeholder = 'search' />
    <ul>
      <li>Learn React</li>
      <li>Create Awesome App</li>
    </ul>
  </div>
)

ReactDOM.render(el, document.querySelector('#root'));

Разобьём созданный реакт-элемент на отдельные компоненты

import React from 'react';
import ReactDOM from 'react-dom';

const TodoList = () => {
  return (
    <ul>
      <li>Learn React</li>
      <li>Create Awesome App</li>
    </ul>
  );
};

const AppHeader = () => {
  return <h1>My Todo List</h1>;
};

const SearchPanel = () => {
  return <input placeholder = 'search' />;
};

const el = (
  <div>
    <AppHeader/>
    <SearchPanel/>
    <TodoList/>
  </div>
);

ReactDOM.render(el, document.querySelector('#root'));

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

Переиспользуемые компоненты экономят как время разработчика, так и ресурсы компьютера

*** Примечание.
Получается, прежде, чем приступать к работе над реакт-приложением, нужно чётко уяснить себе его структуру, какие компоненты будут повторяться, какие данные в них мы планируем менять, чтобы вынести их в props - properties - свойства.

Общее правило для создания реакт-компонентов то же, что, что и для создания функций в JavaScript - каждый компонент, как и каждая функция, в идеале должны выполнять только одно действие.

Следующий логичный шаг - вынести блок в отдельный компоненты
Вместо

const el = (
  <div>
    <AppHeader/>
    <SearchPanel/>
    <TodoList/>
  </div>
);

Пишем
const App = () => {
  return (
    <div>
      <AppHeader/>
      <SearchPanel/>
      <TodoList/>
    </div>
  );
};


ReactDOM.render(<App/>, document.querySelector('#root'));

Важно помнить, что первым параметром ReactDOM.render всегда должен быть элемент, то есть один блок кода.
Передать в ReactDOM.render два div, например, не получится, предварительно для них нужно создать общий div-обёртку и рендерить уже его.