Как связать node js и react

Как связать React с Node js?

есть фронтенд(недоделанный еще) небольшого интернет магазина на реакт редакс, хочу написать сервер на node js, но никогда с этим не работал.Как связать реакт с нодой и если есть какие то туториалы то буду рад ссылкам

Приложение на клиенте запрашивает данные с API сервера посредством ajax-запросов и обрабатывает ответы.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками node.js reactjs или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Связать react js и php. Возможно?

Начал изучать react js, node js. Такая мысль пришла. Если для, условно говоря, создания сайта, SPA нужны некоторые элементы, и потом просто клиент шлёт аякс к серверу а сервер (выступает в роли API) и отдаёт клиенту json который потом уже обрабатывается java script-ом.

API ведь вполне можно реализовать на php? То есть php скрипт будет коннектится например с mysql, получать необходимые данные, формировать json.

Но получается что ещё в клиенте нужно сохранять какие-то значения? Например ID который уйдёт аяксом в php и по нему произойдёт выборка.

Где на клиенте (и на клиенте ли?) хранить этот ID? Как?

Дело в том что JS знаю только примерно на 4 из 10. а вот с php работаю давно и много, но уже одного html, css, php и mysql становиться маловато.

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

React

Создавать интерактивные пользовательские интерфейсы на React — приятно и просто. Вам достаточно описать, как части интерфейса приложения выглядят в разных состояниях. React будет своевременно их обновлять, когда данные изменяются.

Декларативные представления сделают код более предсказуемым и упростят отладку.

Основан на компонентах

Создавайте инкапсулированные компоненты с собственным состоянием, а затем объединяйте их в сложные пользовательские интерфейсы.

Поскольку логика компонента написана на JavaScript, а не содержится в шаблонах, можно с лёгкостью передавать самые разные данные по всему приложению и держать состояние вне DOM.

Научитесь однажды — пишите где угодно

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

React также может работать на сервере, используя Node.js и на мобильных платформах, используя React Native.

Простой компонент

React-компоненты реализуют метод render() , который принимает входные данные и возвращает что-то для вывода. В этом примере используется XML-подобный синтаксис под названием JSX. Входные данные, передаваемые в компонент, доступны в render() через this.props .

JSX необязателен для работы с React. Попробуйте Babel REPL, чтобы увидеть JavaScript-код, полученный на этапе компиляции JSX.

Загрузка примера с кодом.

Компонент с состоянием

Помимо входных данных (доступных через this.props ), компонент поддерживает внутренние данные состояния (доступные через this.state ). Когда данные состояния компонента изменятся, React ещё раз вызовет render() и обновит отрендеренную разметку.

Загрузка примера с кодом.

Приложение

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

Загрузка примера с кодом.

Компонент с использованием внешних плагинов

React позволяет работать с другими библиотеками и фреймворками. В этом примере используется внешняя библиотека remarkable, чтобы в режиме реального времени преобразовать Markdown-синтаксис, введённый в элемент <textarea> .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *