#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, который мы запускаем слушает изменения файлов и пересобирает проект и перегружает страницу. То есть все наши изменения мы сразу же видим на экране.

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