Если вы знаете Rails, вы знаете, что вы можете настроить и запустить веб-API за считанные минуты (или, может быть, вы этого не сделаете, в таком случае почитайте мою статью по этому поводу). Но как насчет подключения этого внутреннего интерфейса к внешнему интерфейсу SPA? или, точнее, с SPA с использованием React? Прочтите эту статью, и вы точно будете знать, как это сделать. Я предполагаю, что у вас уже есть созданный Rails API, и если вы не взглянете на мою статью, вернитесь к этой.

Настройка Реакта

Для настройки React у нас нет лучшего друга, чем create-react-app. Его нужно установить с помощью команды npm install -g create-react-app. Npm поставляется с Node JS, поэтому он также должен быть установлен на вашем компьютере. Выполнив все эти шаги, теперь вы можете:

create-react-app your-application-name

Это создаст кучу файлов внутри папки с именем, которое вы дали своему приложению, и автоматически запустит сервер.

Где происходят чудеса

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

rails s -p portnumber

Это запустит Rails на указанном порту и не будет мешать порту 3000, который является портом React по умолчанию (на самом деле сервер вообще не запустится, если что-то уже запущено на указанном порту).

Теперь убедитесь, что на каждом маршруте API, к которому вы хотите получить доступ, обслуживается JSON. При переходе по этим ссылкам в браузере вы должны увидеть JSON, отображаемый вместо HTML.

Теперь, когда ваш API сделал это правильно, у вас не возникнет проблем с подключением его к React. Как бы Вы это сделали? Точно так же, как вы сделали бы это с ванильным Javascript! Для этого нет секретного способа, специфичного только для React. Вы можете использовать `fetch` или, если вы действительно ленивы (как я), вы можете использовать axios сторонний пакет для выполнения сетевых запросов. В основном выборка работает так:

fetch(“/your-api-route”)
.then((responseFromServer)=> responseFromServer.json()) 
// to convert the response to json
.then((jsonResponse)=>{
// Do whatever the heck you want with the data
})

Теперь будьте осторожны, при использовании React вы не можете размещать этот код там, где хотите. Вы не можете поместить его в метод рендеринга, потому что он вызывается снова и снова каждый раз, когда React обновляет компонент. Вы хотите, чтобы вызов базы данных был выполнен один раз, а затем ваши данные отображались внутри компонента, когда они были доступны. Лучше было бы запустить его еще до того, как функция рендеринга будет выполнена. Как ты это делаешь? Использование жизненных циклов компонентов. Тот, который мы хотим использовать, это `componentDidMount`, который вызывается точно, когда компонент монтируется в DOM. Для примера предположим, что мы получаем список уроков (у урока есть название и содержание) и отображаем его пользователям во внешнем интерфейсе:

import React from ‘react’;
class App extends React.Component{
 state={
   lessons:[]
 }
  componentDidMount(){
    fetch(“/lessons”)
     .then((response)=> response.json())
     .then((jsonReponse)=>{
          this.setState({
           lessons: jsonReponse
      })
     })
  }
render(){
   <div>
      <ul>
        {this.state.users.map((user)=>{
          return (
             <li>{lesson.title}</li>
          )
        })}
     </ul>
   <div/>
  }
}
export default App;

Вставьте этот код в свой файл и протестируйте его. Все должно быть в порядке. Повторите процесс для каждого маршрута вашего приложения.

Спасибо за чтение!