Как использовать ReactJS с PHP?

Дата: 07.01.2018 в 15:58, Категория: ReactJS
  • 4094
  • 9
Как использовать ReactJS с PHP?

Начинающим frontend разработчикам сложно понять, как устроена связь между клиентской и серверной часть. Каким образом скрипт получает данные от сервера? Как он понимает эти данные? Как он их отображает в документе (странице)? И так далее...

В этой статье я постараюсь пояснить эти и некоторые другие вопросы.

# Мотивация

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

Я постараюсь разделить каждый вопрос по заголовкам. И если у вас возникнут какие-либо вопросы, задавайте их в комментариях к этой статье. Начну с самого банального и перейдём постепенно к конечному вопросы.

# Как скрипт получает данные от сервера?

Чтобы понимать, как данные получаются от сервера и отображаются клиенту, вы должны понимать что такое http и ну и понять, что такое AJAX.

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

Скрипт отправляет GET запрос на сервер. К примеру, получение списка продуктов. Сервер выполняет функционал, который в свою очередь вытащить из базы данные продукты, преобразует их в нужный формат (обычно это JSON) и вернет клиенту, то есть - вашему скрипту.

Скрипт получает эти данные и производит какие-то манипуляции. К примеру, сортировку и отображение данных на странице.

# Как скрипт понимает эти данные?

Один крутой чувак - Дуглас Крокфорд (Douglas Crockford) разработал формата обмена данными JSON. С помощью этого формата, многие сервера обмениваются с клиентской частью именно через JSON. 

То есть, чтобы получить список продуктов, к примеру, от китайца, нужно понять его язык. Но заниматься изучением китайского языка, не лучшее решение. И то, ради одного действия. Логично? Для этого, придумали какой-то определённый формат (JSON), который переведет «китайский язык» на понятный вам (то есть, клиенту).

# Как данные от сервера отображаются на странице?

Если вы говорите о мгновенном отображение, к примеру, при клике на кнопку, появляется иконка загрузки и появляются новые данные. Это называется AJAX. Выше я немного объяснил принцип и прикрепил ссылки на видео, где объясняется как работает AJAX.

После того, как сервер вернул JSON с продуктами, их нужно внедрить в саму страницу. Для этого, вы можете использовать фреймворки, библиотеки или написать всё на чистом JavaScript. Но если вы до сих пор читаете эту статью, то, вероятней всего, вам не приходилось работать с серверной частью используя какую-либо технологию. Я постараюсь сейчас вам пояснить.

Помните изображение выше, где идёт отправка GET запроса и получение данных в формате JSON? Так вот, эти данные нужно перевести в HTML.

К примеру, возьмём список продуктов в формате JSON. Я надеюсь, вы знаете, что такое массив и объекты. Если нет, то лучше прочтите об этом подробней.

Для перевода JSON в HTML, есть куча библиотек. Не то что куча. Их дофига! Handlebars, Mustache, List.js, Dust.js, Rivets, Ember, VueJS и т. д.

Я не использую VueJS в своих проектах и заголовок статью не про VueJS, однако, для понимания того, как конвертировать JSON в HTML, я буду использовать именно эту библиотеку в примере ниже. Библиотека очень понятная для начинающих и для опытных разработчиков.

See the Pen MrOZaK by Archakov (@archakov) on CodePen.

Как видите, наш массив с объектами, теперь переконвертировался в уже понятный для человека формат. В обычный список с продуктами.

# Как использовать ReactJS с PHP?

А вот теперь, переходим к финальному вопросу. Если вы прочитали статью полностью, вам будет проще понять, как использовать ReactJS и PHP.

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

# index.php

<?php

  // Подключились к MySQL БД
  include 'db.php';

  // Отправляем запрос к базе данных, на получение списка продуктов
  $query = 'SELECT * FROM products';
  $result = mysql_query($query) or die('Запрос не удался: ' . mysql_error());

  // Тут будем хранить список продуктов
  $products = [];

    // Вносим все продукты из БД в переменную
  while($row = mysql_fetch_assoc($result)) {
    $products[] = $row;
  }

  // Возвращаем JSON со списоком продуктов
  echo json_encode($products);

?>

Представим, что у вас в базе данных есть продукты и скрипт вам вернул примерно такой JSON.

Я решил пример данного приложение разработать в CodeSandbox. Репозиторий данного проекта - react-products-example

У меня есть два файла.

  • index.js - в нём хранится основная логика приложения
  • Product.js - блок с продуктом.

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

componentWillMount() {
    axios
        .get("https://5a523e6850dffb001256e0bf.mockapi.io/products")
        .then(({ data }) => {
            this.setState({
                products: data
            });
        });
}

В момент монтирования основного компонента componentWillMount, я отправляю запрос на получение JSON со списком товаров. Для работы HTTP запросами, я использую стороннюю библиотеку axios. После успешного получения данных, массив сохраняю в состоянии компонента.

render() {
    return (
        <div className="products">
            {this.state.products.map((product, i) => (
                <Product
                    key={i}
                    title={product.title}
                    image={product.image}
                    price={product.price}
                />
            ))}
        </div>
    );
}

Когда данные получены, генерируется N количество компонентов методом .map(). По сути, метод .map() просто заменяет объекты из массива, на React компоненты.

Вот и всё. Это вся магия, которая происходит, при получении данных от сервера. Думаю, я понятно объяснил то, как работает ReactJS с PHP.

Как видите, ничего сложного. Удачного быдлокодинга!