React + Redux. Профессиональная Разработка


Автор курса — Юрий Бура, курс доступен на Udemi, его хвалят на dou и рутрекере.

Итак, что я узнала. React это библиотека, а не фреймворк.
Если фреймворк, вроде Angular имеет под капотом всё необходимое для тестирования, настройки сервера и т.д, то реакт выполняет только одну задачу — создание пользовательских интерфейсов (UI), а для других задач нужно подключать другие библиотеки.

React позволяет создавать одностраничные приложения single-page application и считается несложным в освоении.

Страницы в React создаются на основе модулей.

Особенности модулей:

  1. Модули должны быть небольшими - буквально 2-3 дива с текстом или картинка с описанием или ещё какая-то мелочь. Потом маленькие модули складываем в большие. 
  2. Ещё одно требование к модулям - универсальность, один и тот же модуль будем использовать в разных местах страницы. 
  3. Если в обычном сайте мы разделяем разметку и логику, помещая их в отдельные файлы index.html script.js, то в React каждый модуль содержит и разметку и логику.


Создавать первое приложение на React будем в песочнице: https://codesandbox.io/dashboard/

В файле index.js пишем код

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

function TodoItem(){
  return (
    <span>Drink coffee</span>
  );
}

ReactDOM.render(<TodoItem/>, document.getElementById("root"));

Мы импортировали библиотеку React из модуля "react", библиотеку ReactDOM из модуля "react-dom" создали функцию TodoItem, которая будет возвращать модуль - один пункт списка дел, и сейчас внутри неё можем писать код, который очень напоминает обычный html. Это возможно благодаря JSX — расширению JavaScript для удобного создания компонентов в React. JSX нравится всем, отзываются о нём исключительно в превосходной степени.

JSX позволяет миксовать разметку и JavaScript. Примеры можно посмотреть здесь.

Любое JavaScript выражение можно встроить в JSX, обернув его в фигурные скобки:

    function formatName(user) {
      return user.firstName + ' ' + user.lastName;
    }

    const user = {
      firstName: 'Harper',
      lastName: 'Perez'
    };

    const element = (
      <h1>
        Hello, {formatName(user)}!
      </h1>
    );

Оборачивать код в круглые скобки не обязательно, но рекомендовано.

Сами JSX-выражения являются JavaScript-объектами.

Создадим ещё одну функцию TodoList - список дел.

function TodoList(){
  return(
    <ul>
      <li><TodoItem/></li>
      <li><TodoItem/></li>
      <li><TodoItem/></li>
    </ul>
  )
}

Отрендерим её:
ReactDOM.render(<TodoList/>, document.getElementById("root"));

Здесь функция ReactDOM.render принимает два параметра:

  • что рендерим <TodoList/> Закрывающая косая черта в одиночных тегах обязательна.
  • и куда document.getElementById("root") Это div с id="root", который прописан в файле index.html.

Дополнительные материалы: сайт https://learn-reactjs.ru/