Вы хотите создать мощное веб-приложение, используя Ruby on Rails в качестве серверной части и React JS в качестве внешнего интерфейса? Это руководство проведет вас через процесс настройки API Ruby on Rails с помощью React JS, что позволит вам использовать сильные стороны обеих платформ. Давайте погрузимся!

Предварительные условия

Прежде чем мы начнем, убедитесь, что на вашем компьютере установлены следующие необходимые компоненты:

• Ruby (версия 2.6.0 или выше)
• Rails (версия 6.0.0 или выше)
• Node.js (версия 12.0.0 или выше)
• Пряжа (последняя версия)

Шаг 1. Создайте новый Ruby on Rails API

Первым шагом является создание нового проекта API Ruby on Rails. Откройте терминал и выполните следующую команду:

rails new my-api --api

Шаг 2. Настройте базу данных

Далее перейдите в папку проекта:

cd my-api

Настройте свою базу данных, изменив файл config/database.ymlв соответствии с вашими потребностями. Затем выполните следующие команды, чтобы создать базу данных и выполнить миграцию:

rails db:create
rails db:migrate

Шаг 3. Создайте конечную точку API

rails generate scaffold Todo title:string completed:boolean
rails db:migrate

Шаг 4. Настройте CORS

Чтобы разрешить запросы между источниками из вашего интерфейса React JS, нам необходимо настроить совместное использование ресурсов между источниками (CORS). Добавьте драгоценный камень rack-corsв свой Gemfile:

gem 'rack-cors', :require => 'rack/cors'

Затем запустите bundle install, чтобы установить драгоценный камень. Измените файл config/initializers/cors.rbследующим образом:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Шаг 5. Создайте интерфейс React JS

В новом окне терминала перейдите в корневой каталог вашего проекта и выполните следующую команду, чтобы создать новое приложение React JS:

npx create-react-app my-app

После создания приложения перейдите в каталог my-app:

cd my-app

Шаг 6. Подключите интерфейс к API

Чтобы подключить интерфейс к API, нам нужно отправить HTTP-запросы к конечным точкам API. Откройте файл src/App.jsи замените его содержимое следующим кодом:

import React, { useEffect, useState } from 'react';
function App() {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    fetch('http://localhost:3000/todos')
      .then(response => response.json())
      .then(data => setTodos(data));
  }, []);
  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Шаг 7. Запустите серверы разработки

В отдельных окнах терминала перейдите в каталоги my-apiи my-appи запустите их серверы разработки:

# Inside the my-api directory
rails server
# Inside the my-app directory
yarn start

Вот и все! Вы успешно настроили API Ruby on Rails с интерфейсом React JS. Теперь вы можете приступить к созданию своего приложения, добавив больше конечных точек API и компонентов React.

Не забывайте постоянно обращаться к официальной документации Ruby on Rails и React JS для получения более подробной информации и расширенного использования.

Удачного программирования!