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

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

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