#1 React - react-create-app пишем простой компонент

poster
В этом уроке мы познакомимся с пакетом react-create-app от фейсбука. Создадим первый компонент на react. Узнаем что такое jsx синтаксис.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. Сегодня мы начинаем уроки по реакту, и в этом уроке мы разберем как отрендерить самый простой компонент на реакте.

Для того, что упростить настройку окружения, транспайл файлов и все остальные процессы я воспользуюсь пакетом от фейсбука create-react-app. Он позволяет генерировать заготовку проекта и не отвлекатся на его настройку, а просто писать код. Вот собственно его Страничка

Для того, чтобы установить пакет нужно написать

npm install -g create-react-app

Я ее выполнять не буду так как я этот пакет уже поставил.

Теперь давайте сгенерируем проект hello-world. У меня этот проект уже сгенерирован. Он называется hello-world. Я его не буду конкретно сейчас генерировать, потому что это достаточно долго, все пакеты ставятся минуты 3. Для того, чтобы его создать нужно выполнить команду

create-react-app hello-world

Это сгенерирует вам новую папку, сложит туда необходимые стартовые файлы и скачает все npm пакеты. Теперь заходим в папку с проектом и пишем

npm start

Оно запускает сервер, говорит что у меня что-то ранится на 3000 порту и предлагает заранить проект на другом порту. Я говорю да и оно запускает нам страничку в браузере и мы видим надпись "Welcome to React".

Теперь давайте посмотрим на содержимое проекта. Пока нас интересует только файл index.js в папке src. Я не буду сейчас углублятся в синтаксис es6, весь проект будет писаться на ес6 и я надеюсь, что вы с ним знакомы.

Что же происходить в этом файле, чтобы страничка, которую вы видели у нас зарендерилась. В этом файле мы импортируем react, react-dom из node_modules. Импортируем компонент App. Это как раз компонент, который мы будем с вами писать. Импортируем мы импортируем какой-то глобальный css. И вызываем метод render у пакета ReactDOM, куда передаем App компонент и дом елемент, куда мы хотим, чтобы он отрендерился.

Теперь давайте напишем с ноля код компонента App. То, что вы видите здесь - это базовая заготовка абсолютно любого react приложения. Дальше просто создается компонент App, в него вкладываются другие компоненты, и так далее.

Давайте зайдем в файл App.js, удалим все и будем писать класс с ноля.

Давайте опишем класс App.

class App extends Component {
}
export default App;

Создаем класс App и наследуем его от Component, а так же експортируем этот класс. Теперь нам нужно импортировать Component и React в этот файл.

import React, { Component } from 'react';
class App extends Component {
}
export default App;

Этим мы испортировали реакт и Component, с помощью деструктуризации. Т.е. Component, просто одно из значений пакета react. В данном случае класс.

Теперь добавим метод render. Это самый важный метод класса. Обязательно в методе render нужно писать return. Все что будет написано в return, будет отрендерено.

import React, { Component } from 'react';
class App extends Component {
  render() {
    return <div>Hello world</div>;
  }
}
export default App;

Мы отписали метод render и вернули в нем кусок html. Но на самом деле это не обычный html, так как тогда бы этот javascript был не валидным. Это спрециальный jsx синтаксис, который позволяет писать в javascript файлах html. На самом деле этот код конечно же транспайлится потом в валидный javascript, который выполняется браузером.

Если мы посмотрим в браузер, то увидим, что у нас вывелось сообщение Hello world. Так как по умолчанию, create-react-app, который мы запускаем слушает изменения файлов и пересобирает проект и перегружает страницу. То есть все наши изменения мы сразу же видим на экране.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Egor Suzanovich
5 месяцев назад
В уроках вы описываете создание компонента таким путем: import React, { Component } from 'react'; class MyComponent extends Component {} Но можно и так import React from 'react'; class MyComponent extends React.Component {} Есть ли разница какой подход использовать?
monsterlessons
5 месяцев назад
Разницы нет. Но есть разница в плане читабельности. Никто не читает импорты, но все читают код extends Component читать легче чем extends React.component. Тоже самое с деструктуризацией const {a: {b: {c: {d}}}} = this.props читать нереально, но это без разницы так как if (d === 1) проще читать чем if (a.b.c.d === 1)
Moe Green
10 месяцев назад
подскажите, что значит такая запись - const highSchools = schools.map(school => ({ name: school })) я привык, что после => всегда идут фигурные скобки (тело функции). а здесь?
monsterlessons
10 месяцев назад
Это однострочный return school => school.id Но когда вы хотите вернуть обьект, то вам нужно заврапить в круглые скобки, чтобы javascript не сломался. Поэтому написано не school => {name: school} а school => ({name: school})
Moe Green
10 месяцев назад
спасибо! у меня до сих пор иногда голова "ломается" от es6-es7 ))
monsterlessons
10 месяцев назад
Жизнь боль))
Владислав
1год назад назад
А как сделать тоже самое на проекте yii2 + composer? В консоли пишу composer require bower-asset/react он ставится в папку vendor, как не используя Asset.php в файле backend/web/js/app.js вызвать composer require bower-asset/react?
monsterlessons
1год назад назад
Я не работал с php последние лет 6 так что не подскажу. В любом случае вы можете после сборки фронтенда просто подключить собраный файл в ваш php шаблон, который рендерит вам страницу.
Владислав
1год назад назад
Нигде не могу найти ответ, где у вас в index.html подрубается скрипт? В вашем проекте нет файлов react.js, то откуда происходит импорт "import React, { Component } from 'react';"?
monsterlessons
1год назад назад
Так как create-react-app, это генератор, то все эти библиотеки, например react, устанавливаются сразу же, когда вы пишете yarn install. Все эти файлы устанавливаются в node_modules и подключаются оттуда. Так обычно работает npm. Соответственно внутри webpack он ищет зависимости как в проекте, так и в папке node_modules.
Владислав
1год назад назад
Спасибо большое за ответы :)