Начинающим 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.
Напишем немного PHP и обратимся к этому скрипту, чтобы получить список продуктов. В своих примерах ниже, я не буду обращаться напрямую к PHP скрипту. В моём случае, скрипт будет получать заготовленный JSON, который будет итоговым результатом выполнения PHP скрипта.
_21<?php_21_21 // Подключились к MySQL БД_21 include 'db.php';_21_21 // Отправляем запрос к базе данных, на получение списка продуктов_21 $query = 'SELECT * FROM products';_21 $result = mysql_query($query) or die('Запрос не удался: ' . mysql_error());_21_21 // Тут будем хранить список продуктов_21 $products = [];_21_21 // Вносим все продукты из БД в переменную_21 while($row = mysql_fetch_assoc($result)) {_21 $products[] = $row;_21 }_21_21 // Возвращаем JSON со списоком продуктов_21 echo json_encode($products);_21_21?>
Представим, что у вас в базе данных есть продукты и скрипт вам вернул примерно такой JSON.
Я решил пример данного приложение разработать в CodeSandbox. Репозиторий данного проекта - react-products-example
У меня есть два файла.
Также, посмотрев исходный код, вы можете заметить, что для стилизации компонентов я использую styled-components. Эта штука действительно крутая, особенно, когда тебе не хочется подключать препроцессоры.
_10componentWillMount() {_10 axios_10 .get("https://5a523e6850dffb001256e0bf.mockapi.io/products")_10 .then(({ data }) => {_10 this.setState({_10 products: data_10 });_10 });_10}
В момент монтирования основного компонента componentWillMount, я отправляю запрос на получение JSON со списком товаров. Для работы HTTP запросами, я использую стороннюю библиотеку axios. После успешного получения данных, массив сохраняю в состоянии компонента.
_14render() {_14 return (_14 <div className="products">_14 {this.state.products.map((product, i) => (_14 <Product_14 key={i}_14 title={product.title}_14 image={product.image}_14 price={product.price}_14 />_14 ))}_14 </div>_14 );_14}
Когда данные получены, генерируется N количество компонентов методом .map(). По сути, метод .map() просто заменяет объекты из массива, на React компоненты.
Вот и всё. Это вся магия, которая происходит, при получении данных от сервера. Думаю, я понятно объяснил то, как работает ReactJS с PHP.
Как видите, ничего сложного. Удачного быдлокодинга!