Обзор курса и введение в реакт

Всем привет! В этом курсе мы создадим приложение - «Конструктор PDF документов» на React с полного нуля. Познакомимся с реактом, styled-components, печатью документов и многим другим! А в этом видео поговорим про React и текущий курс, а также рассмотрим способы написания компонентов в реакте.

💭   Предисловие

В этом курсе я расскажу про реакт и на практике покажу, как начать делать SPA на React + Styled Components. Если вы хотите познакомиться с React и mobx глубже, то вот ссылка на полный курс там более сотни видеоуроков, домашки с подробным ревью и еще много всего интересного.

Этот курс не для новичков, и я бы советовал смотреть его после прохождения курса React.js – «С нуля до про». Или хотя бы посмотрите «демо» из курса по реакт+мобкс тк там есть весь базис реакта – от установки ноды и плагинов до полного понимания работы jsx. Иначе, не зная даже базиса, будет очень тяжело проходить текущий курс. Демо-доступ ни к чему не обязывает и полностью бесплатный. Получить демо доступ к полному курсу по реакту можно на промо-странице полного курса.

Немного про Node.js

Вам понадобятся Node.js не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:

При установке Node вы также установили npm для управления пакетами npm. npm установит пакеты JavaScript для вашего проекта и будет отслеживать детали проекта. Если вы хотите узнать больше об npm, воспользуйтесь обучающим руководством Использование модулей Node.js с npm и package.json.

npm также включает инструмент npx, отвечающий за запуск исполняемых пакетов. Это означает, что вы сможете запускать код приложения Create React App без предварительной загрузки проекта.

Скачать ноду можно тут;

Проверить ноду - node -v (в терминале). PS: npm будет установлен вместе с node.js. Проверить его версию можно через npm -v.

Как обновить ноду или npm? Чтобы обновить npm или ноду просто скачайте ноду по новойю

Пример классовых компонентов в реакте:

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

import React from "react";

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.addItem = this.addItem.bind(this);
  }

  render() {
    return (
      <div className="todoListMain">
        <div className="header">
          <form onSubmit={this.addItem}>
            <input
              ref={(a) => (this._inputElement = a)}
              placeholder="enter task"
            />
            <button type="submit">add</button>
          </form>
        </div>
      </div>
    );
  }
}

export default TodoList;

Пример функциональных компонентов в реакте:

import React from "react";

const TodoList = () => {
  const [todos, setTodos] = React.useState([ {text: "Learn about React"}, {text: "Meet friend for lunch"} ]);

  const addTodo = (todo) => {
    // ...
    setTodos(todo);
  };

  return (
    <div className="todo-list">
      {todos.map((todo, index) => (
        <Todo key={index} index={index} todo={todo} />
      ))}

      <TodoForm addTodo={addTodo} />
    </div>
  );
};

export default TodoList;

React классовые vs функциональные компоненты

Пришло время поговорить о том, какой стиль выбрать для компонентов: классовый vs функциональный.

Я отдаю своё предпочтение функциональным тк выглядит красивее, понятнее и работает куда производительнее, чем классовые.

Официальное высказывание команды React (из документации):

When you’re ready, we’d encourage you to start trying Hooks in new components you write. […] We don’t recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs).

Итого:

• новый код должен быть в функциональном стиле с применением хуков;
• старый код может продолжать использовать компоненты класса, если нету желания его переписывать.

Выбор ui фреймворка для react

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

Просто представьте, что верстальщик вместо того, чтобы учить html+css начал бы зазубривать документацию бустрапа… Ничего хорошего из этого бы не вышло, потому что нету понимания основ. С другой стороны, зная работу css+html можно открыть исходники бутстрапа на гитахабе и написать свою ui библиотеку.

В реакте, вью и других Фреймворках это правило работает ещё сильнее, потому что в 99% случаев вы будете писать именно UI и разбираться с утечками памяти и лишней перерисовкой контента в тех же модальных окнах. А отправлять запросы на сервер, получать ответы и тп это невероятно легко, обычно на собесах такого даже не спрашивают.

Поэтому в курсе я буду использовать только css, чтобы не тратить время на стили (ведь курс по реакту, а не по верстке), а весь js будем писать самостоятельно, чтобы отточить реакт и нативный js такому принципу я придерживаюсь во всех своих курсах.

Uimini

Я буду использовать его тк там только css и всего 4кб в зипе или 19кб в “min” версии.

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

Ссылки:

• Дока - https://uimini.github.io/docs/
• Репозиторий - https://github.com/uimini/uimini/

Демо проекта

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

Увидимся в следующем видео!

Исходники курса:

• Репозиторий проекта доступен на гитхабе буду рад вашей звездочке 👋
• Полный плейлист доступен на ютубе