Contents

1 Введение в React JS
- 1.1 Создание приложения React JS App
- 1.2 Что такое JSX?
2 Быстрый курс 2020 React JS от Владилена Минина
3 Жизненный цикл React-компонента
- 3.1 Краткое описание жизненного цикла
4 React JS на практике / Создание веб приложения — Гоша Дударь
5 React Hooks — Полный Курс (Про Все Хуки!) от Владилена Минина
- - 5.0.1 Related posts:

Введение в React JS

Всем привет!

В этой статье я постараюсь разложить основы создания приложения на React.JS на составляющие. Начнем с рассмотрения как создать приложение React JS.

Рекомендую почитать официальный туториал React js на русском языке.

Создание приложения React JS App

Для начинающих разработчиков не нужно арендовать хостинг, либо платить за сервисы по развертыванию среды для разработки react js. Достаточно на своем компьютере или ноутбуке установать node.js. Делается это в три клика.

Установка Node.js

Идем на сайт https://nodejs.org/en/

Скачиваем дистрибутив

Далее запускаем инсталлятор, все шаги стандартные, жмем next-next-next. Вот этот пункт можете оставить по умолчанию неактивным:

После завершения установки у Вас в пункте меню появятся программки:

Также в директории C:\Program Files\nodejs\ лежат файлы

Создаем приложение React JS App

Для установки react js нам понадобится консоль. Вы можете запустить Node.js command prompt. Я предпочитаю использовать far manager. Тут кто где привык работать.

Итак, создадим директорию нашего проекта — приложения React JS, например:

D:\#NodeJS#\react_app

Далее в консоли перейдем в эту папку и запустим команду для инсталляции create-react-app

Для этого в консоли запустим команду npm i -g create-react-app

Теперь нам необходимо создать приложение с помощью установленного на предыдущем шаге инструмента create-react-app. Инструмент create-react-app был создан Facebook и является рекомендуемым способом создания нового проекта.

Наше первое приложение будет называться hello_react. Для его создания запустим команду:

npx create-react-app hello_react

Запустится инсталляция приложения. Идет она примерно 5 минут (зависит на самом деле от скорости интернета, т.к. все зависимости скачиваются из интернета). Итак, в конце установки у вас должна появиться запись:

Т.к. вы только учитесь, то можете пока не использовать git. В итоге приложение весит довольно много (в текущей версии почти 250МБ):

Запускаем приложение React

Для того, чтобы запустить приложение, необходимо перейти в директорию D:\#NodeJS#\react_app\hello_react\ и запустить команду:

npm start

После того, как приложение запустится, вы получите сообщение в консоли:

И откроется в браузере страница http://localhost:3000/:

Краткое описание файлов в приложении React JS

Если мы перейдем в директорию нашего приложения React D:\#NodeJS#\react_app\hello_react, то мы увидим следующую структуру:

Общая конфигурация проекта React описана в package.json. Вот как это выглядит:

{
  "name": "hello_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

{

"name": "hello_react",

"version": "0.1.0",

"private": true,

"dependencies": {

"@testing-library/jest-dom": "^5.11.9",

"@testing-library/react": "^11.2.5",

"@testing-library/user-event": "^12.7.1",

"react": "^17.0.1",

"react-dom": "^17.0.1",

"react-scripts": "4.0.2",

"web-vitals": "^1.1.0"

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

"eslintConfig": {

"extends": [

"react-app",

"react-app/jest"

]

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]

}

В файле находятся следующие атрибуты:

name — представляет имя приложения, которое было передано в create-response-app.
version — показывает текущую версию.
dependencies — список всех необходимых модулей / версий для нашего приложения. По умолчанию npm устанавливает самую последнюю основную версию.
devDependencies — перечисляет все модули / версии для запуска приложения в среде разработки.
scripts — список всех псевдонимов, которые могут использоваться для эффективного доступа к командам react-scripts. Например, если мы запустим npm build в командной строке, он выполнит внутреннюю «react-scripts build«.

Рассмотрим структуру каталога приложения:

Каталог node_modules предназначен для инструментов сборки. Файл package.json в корне приложения определяет, какие библиотеки будут установлены в node_modules при запуске npm install. После сборки приложения (финальная стадия разработки) этот каталог не публикуется в продуктив. Этот каталог добавляется в .gitignore
Все динамические компоненты будут расположены в каталоге src. В этой директории содержится код проекта (вся логика вашего приложения). Именно с ней вам придется большую часть времени работать. Рассмотрим файлы в каталоге src:
- App.js — основной JS-компонент. Каждый компонент, который вы создаете в своем проекте, будет потомком этого компонента.
- App.css — это таблица стилей для css правил. Приложение create-react-app предварительно настроено для использования css таблиц стилей. Также можно использовать scss файлы, просто установив node-sass модуль.
- index.js — точка входа для нашего приложения. Этот файл импортирует код приложения из App.js компонента и делает его в root DIV, расположенном в index.html в public папке.
- index.css — это вторичный css файл с общими данными шрифтов, которые можно удалить или использовать для глобального кода CSS.
- App.test.js и setupTests.js — сборка исходного прилоежния поставляется с предварительно сконфигурированными jest и react-testing-library. В этот setupTest.js файл вы можете включить свои тестовые конфигурации, и App.test.js является основным тестовым файлом. Вы также можете безопасно удалить оба этих файла, если у вас нет опыта в тестировании.
Директория public содержит базовые файлы HTML, JSON и изображений. Это корневые ресурсы вашего проекта:
- manifest.json — этот файл используется для описания нашего приложения.
- favicon.ico — это файл изображения значка, используемый в нашем проекте. Он также связан внутри index.html и manifest.json.
- index.html — базовая HTML страница, является корневой для вашего проекта. Ее практически не придется исправлять, но она является также ключевой частью проекта.

Забегая немножко вперед, опишем как создается сборка проекта. После изменения приложения React и его отладки запускается команда:

npm run build

1	npm run build

Результат работы команды:

В результате у нас появится директория build:

В директории сборки весь код компилируется и минифицируется до наименьшего полезного состояния. Читаемость кода неважна, поскольку этот код не предназначен для чтения человеком.

Что такое JSX?

JSX — синтаксический сахар для функции React.createElement(component, props, ...children).

JSX — это расширение React, которое позволяет нам писать JavaScript, который выглядит как HTML.

JSX позволяет нам писать элементы HTML на JavaScript и размещать их в DOM без вызова методов createElement(), либо appendChild(). JSX преобразует HTML-теги в элементы React. Не обязательно использовать JSX при разработке React, но рекомендуется.

С JSX вы можете писать выражения внутри фигурных скобок { }.

Хотя JSX выглядит как HTML, на самом деле это просто более сжатый способ написать React.createElement().

Быстрый курс 2020 React JS от Владилена Минина

Жизненный цикл React-компонента

Диаграмму жизненного цикла React-компонента можно посмотреть на сайте:

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods Diagram на русском:

или на английском:

Ссылка на github: https://github.com/wojtekmaj/react-lifecycle-methods-diagram

Есть еще такая картинка:

Краткое описание жизненного цикла

Все, что вы видите в приложении React, является компонентом или частью компонента. В React компоненты созданы так, чтобы следовать естественному жизненному циклу. Они создаются (creation), развиваются (updating) и, наконец, умирают (deletion). Это называется жизненным циклом компонента.

Компоненты React — это независимые и повторно используемые блоки кода. Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML через функцию render(). Компоненты бывают двух типов: компоненты класса и компоненты функции. Их я опишу потом.

Для каждого этапа жизненного цикла компонента, React предоставляет доступ к определенным встроенным событиям / методам, называемым перехватчиками жизненного цикла (lifecycle hooks) или методами жизненного цикла (lifecycle methods). Эти методы дают вам возможность контролировать и управлять тем, как компонент реагирует на изменения в приложении.

Рассмотрим три фазы жизненного цикла компонента React: Mounting, Updating иUnmounting.

Важно помнить, что render() это единственный метод, который требуется в компонентах React.

Что такое Mounting?

Mounting (монтирование) — означает размещение элементов в DOM.

В React есть четыре встроенных метода, которые вызываются в указанном порядке при монтировании компонента:

constructor()
getDerivedStateFromProps() — вызывается прямо перед рендерингом элементаов в DOM.
render() — выводит HTML в DOM.
componentDidMount() — вызывается после рендеринга компонента. Вы можете использовать этот метод для настройки любых длительно выполняющихся процессов или асинхронных процессов, таких как выборка и обновление данных.

Метод render() является обязательным и будет вызываться всегда, остальные необязательны и будут вызываться, если вы их определите.

Метод constructor

Метод constructor() вызывается раньше всего, когда компонент запускается, и это естественное место для установки initial state и других начальных значений.

Метод constructor() вызывается с props, в качестве аргументов, и вы всегда должны начинать с вызова super(props) перед любым другим, это инициирует родительский метод конструктора и позволяет компоненту наследовать методы от своего родителя (React.Component).

Пример:

Компонент — это JS-класс. Как и любой класс, у него есть метод constructor, который вызывается React каждый раз, когда вы создаете компонент. Обычно он устанавливает состояние и свойства.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      &lt;h1&gt;My Favorite Color is {this.state.favoritecolor}&lt;/h1&gt;
    );
  }
}

ReactDOM.render(&lt;Header /&gt;, document.getElementById('root'));

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

render() {

return (

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

);

}

ReactDOM.render(<Header />, document.getElementById('root'));

Что такое Updating?

Следующим этапом жизненного цикла является обновление компонента (Updating).

Компонент обновляется всякий раз, когда происходит изменение состояния или свойств компонента.

В React есть пять встроенных методов, которые вызываются в следующем порядке при обновлении компонента:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

Что такое Unmounting?

Следующая фаза в жизненном цикле — это когда компонент удаляется из DOM или размонтируется (unmounting).

В React есть только один встроенный метод, который вызывается при размонтировании компонента:

componentWillUnmount()

state

Компоненты React имеют встроенный state объект.

В state объекте хранятся значения свойств, принадлежащих компоненту.

Когда state объект изменяется, компонент перерисовывается.

Объект state инициализируется в конструкторе:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      &lt;div&gt;
        &lt;h1&gt;My Car&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
}

class Car extends React.Component {

constructor(props) {

super(props);

this.state = {brand: "Ford"};

}

render() {

return (

<div>

</div>

);

}

componentWillMount — этот метод устарел

ComponentWillMount() раньше был методом жизненного цикла и вызывался непосредственно перед методом render(). React отказался от его использования из-за того, что он часто используется небезопасно.

componentDidMount

Метод жизненного цикла componentDidMount() запускается сразу после завершения метода render() и подключения компонента к DOM. Это лучшее место для запуска асинхронной функции. Вот базовый пример того, как вы можете получить данные в компоненте класса:

componentDidMount() {
    fetch("https://example.api.com")
        .then(response =&gt; response.json())
        .then(data =&gt; this.setState({ data }));
}

componentDidMount() {

fetch("https://example.api.com")

.then(response => response.json())

.then(data => this.setState({ data }));

}

componentDidUpdate

Если у вас есть состояние, основанное на props, вам может потребоваться использовать componentDidUpdate() метод, который вызывается сразу после обновления. Используйте его для обновления модели DOM, сравнивая предыдущие свойства с текущими, см. Пример ниже:

componentDidUpdate(prevProps) {
    if (this.props.userName !== prevProps.userName) {
        this.fetchData(this.props.userName);
    }
}

componentDidUpdate(prevProps) {

if (this.props.userName !== prevProps.userName) {

this.fetchData(this.props.userName);

}

componentWillUnmount

todo

props и propTypes

Props — это аргументы, передаваемые в компоненты React.

Свойства передаются компонентам через атрибуты HTML.

React Props похожи на аргументы функции в JavaScript и атрибуты в HTML.

Чтобы отправить props в компонент, используйте тот же синтаксис, что и атрибуты HTML:

Добавьте атрибут «brand» к элементу Car:

const myelement = <Car brand="Ford" />;

React JS на практике / Создание веб приложения — Гоша Дударь

Материалы для курса можно скачать на сайте https://itproger.com/course/react-js-app

Уроки React JS на практике / #1 — Создание приложения с погодой

Уроки React JS на практике / #2 — Работа с компонентами

Уроки React JS на практике / #3 — Работа с API (получение данных про погоду)

Уроки React JS на практике / #4 — Создание формы и работа со свойствами

Уроки React JS на практике / #5 — Вывод погодной информации в компоненте

Уроки React JS на практике / #6 — Вывод ошибки и оптимизация кода

Уроки React JS на практике / #7 — Добавление стилей и завершение

React Hooks — Полный Курс (Про Все Хуки!) от Владилена Минина

Полный курс по React Hooks. Внутри рассказывает про: useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer.

Практические вопросы по QlikView – Часть 2

JavaScript: заметки для web-разработки

Activity-based costing и activity-based budgeting. SAS CPM