Создайте приложение Ruby on Rails 5.1 с помощью Webpack, React 16 и React Router.
В последнее время мы создавали проекты как два отдельных приложения на Elixir и ReactJS. Однако для недавнего небольшого проекта я чувствовал, что это перебор. Желая использовать правильный инструмент для работы, я оглянулся на свои корни Rails, так как слышал, что было много улучшений в реализации правильного инструментария Javascript.
Я был приятно удивлен тем, насколько мне понравилось работать над этим проектом. Однако настройка была довольно сложной задачей, поскольку не было никакого руководства, которое помогло бы мне пройти весь путь, и некоторые ошибки, которые нужно было преодолеть, вероятно, должны быть частью генерации приложения реагирования по умолчанию в Rails. В конце концов, я получил кое-что, что отлично работало и быстро решило проблему.
Это руководство проведет вас через настройку среды разработки с использованием Ruby on Rails 5.1 и React 16, так что вам не придется испытывать те же головные боли, что и я.
Мы также обойдем маршрутизацию представлений Rails и обработаем практически все из приложения React с помощью React Router. Вы также получите дополнительное преимущество в виде горячей перезагрузки, ура!
Мы будем использовать Rails в качестве API, и эти два приложения по-прежнему будут существовать как отдельные задачи, однако они будут развертываться как единое приложение. Это позволит фронтенду двигаться независимо от выполняемой бэкэнд-работы.
Рекомендуемые предпосылки
Ruby 2.5.0
Rails 5.1+
PostgreSQL
Foreman
Пользователи macOS / OSX
Если во время этого процесса вы столкнетесь с проблемой при установке гема PostgreSQL, выполните следующие команды:
- Install Xcode command line tools (Apple Developer site) - brew uninstall postgresql - brew install postgresql - ARCHFLAGS=”-arch x86_64" gem install pg
Установить какой нибудь менеджер версий
Я рекомендую либо rbenv, либо rvm. Я все еще использую rvm, поэтому мы и будем использовать его здесь.
\curl -sSL https://get.rvm.io | bash
Установить Ruby
rvm install ruby-2.5.0
Установить Rails
На момент написания этой статьи будет установлена 5.1.5
gem install rails
Установить Форман
Я ВАЖНО: СДЕЛАЙТЕ ЭТО ВНЕ КАТАЛОГА ПРОЕКТОВ
gem install foreman
Создайте новый проект Rails 5.1 с ReactJS и Postgres
Сначала нам нужно создать новый проект. Если вы не хотите использовать здесь Postgres, вы можете использовать то, что вам удобнее всего.
rails new example_app --webpack=react --database=postgresql
Создайте свою базу данных
rake db:create
Настройка Rails
По моему опыту, Turbolinks вызывает больше головной боли, чем того стоит, при создании SPA в Rails. Из-за этого я всегда с самого начала отключаю его. Я также не использую сценарий кофе и предпочитаю ES6, поэтому нет причин использовать его для создания файлов сценария кофе.
Удалите следующие строки из Gemfile.
Оставление этих файлов в вашем Gemfile вызовет у вас головную боль и сгенерирует ненужные файлы в вашем приложении при использовании генераторов рельсов.
драгоценный камень "coffee-rails", "~› 4,2 "
драгоценный камень" turbolinks "," ~ ›5"
Открыть app > assets > javascripts > application.js
Удалите следующую строку кода:
//= require turbolinks
Добавить необходимые библиотеки и загрузчики Javascript
На момент написания последней версии webpack-dev-server в rails / webpacker есть ошибка. Поскольку при создании нового приложения устанавливается последняя версия, нам необходимо перейти на более раннюю версию, как показано ниже.
Вы можете следить за этой проблемой Github, чтобы знать, когда можно безопасно выполнить обновление: https://github.com/rails/webpacker/issues/1303
yarn add react-router react-router-dom webpack-cli resolve-url-loader yarn upgrade webpack-dev-server@^2.11.1 -D
Настроить Webpack
Откройте app > config > webpack > environment.js и добавьте следующий код:
const { environment } = require('@rails/webpacker')
module: {
rules: [
{
test: /\.js(\.erb)?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
['env', { modules: false }]
]
}
},
]
}
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader',
options: {
attempts: 1
}
});
module.exports = environment
Создайте proc-файл для Foreman
В корневом каталоге вашего приложения создайте новый файл с именем Procfile.dev и добавьте в него следующий код. Вы также захотите создать его для производства при развертывании.
web: bundle exec rails s webpacker: ./bin/webpack-dev-server
Создайте корень вашего приложения
Мы не создаем здесь обычное приложение для рельсов, и вскоре вы поймете, почему. Мы собираемся сгенерировать единственный маршрут представления, называемый root, который будет сокращен до React Router для всех маршрутов представления.
rails g controller pages root
Укажите Rails в своем приложении React
Откройте config > routes.rb
Удалите все маршруты, сгенерированные в этом файле, и добавьте следующее:
root to: "pages#root"
Откройте views > pages > root.html.erb и добавьте следующий код:
<div id='example-app'></div>
Это div, в который будет выполнять рендеринг нашего приложения.
Настройте структуру приложения React
Когда вы создали свое приложение, оно создало папку, которую вы, возможно, не видели в своих приложениях rails до того, как namedjavascript. Внутри этого каталога находится папка с именем packs.. Здесь будет жить ваше новое приложение React.
Откройте его и создайте папку с именем exampleApp. Это структура папок, которую я использовал некоторое время во многих крупных проектах, и она действительно хорошо работает.
Внутри папки exampleApp создайте три папки с именами assets components и middleware. Если вы планируете использовать Redux, вам также понадобятся папки actions reducers и constants.
Создайте два новых файла в папке exampleApp с именами routes.js и index.js. Наконец, добавьте две папки в каталог ресурсов с именами images и stylesheets и добавьте файл в таблицы стилей с именем app.scss. Это корневой файл scss, из которого вы будете импортировать.
Теперь он должен выглядеть, как на примере, показанном здесь. Пока вы здесь, откройте application.js и удалите журнал демонстрационной консоли.
Визуализируйте ваши новые Javascript и SCSS файлы в своем приложении
Открыть app > views > layouts > application.html.erb
добавьте следующие строки кода между тегами заголовка:
<%= javascript_pack_tag 'exampleApp/index' %> <%= stylesheet_pack_tag 'exampleApp/assets/stylesheets/app' %>
Настройка React Router
Откройте только что созданный файл с именем routes.js и добавьте следующее:
import React from 'react'
import {
BrowserRouter as Router,
Route,
} from 'react-router-dom'
import LandingPage from './components/landingPage';
const App = (props) => (
<Router>
<div>
<Route exact path='/' component={LandingPage} />
</div>
</Router>
)
export default App;
Откройте файл index.js и добавьте следующее:
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<Routes />, document.getElementById('example-app'),
)
});
Создайте файл с именем landingPage.jsx в папке components и следующий код:
import React from 'react';
class LandingPage extends React.Component {
render() {
return(
<div>
<h1>Hello World</h1>
</div>
)
}
}
export default LandingPage
Запустите ваше новое приложение
Откройте свой терминал и запустите следующие строки кода
foreman start -f Procfile.dev -p 3000
Если все пойдет хорошо, теперь вы сможете загрузить свое новое приложение React / Rails по адресу localhost:3000, и вас должны приветствовать нашим сообщением Hello World, которое мы установили в LandingPage.jsx
Дополнительная организация приложений
Если у моих компонентов есть дочерние компоненты, я создаю папку с именем, которое соответствует родительскому компоненту. Например, если бы landingPage имел дочерние компоненты с именами pitch и pricing, я бы создал папку в компонентах с именем landingPage и добавил бы туда дочерние компоненты. Это позволяет мне легко находить и систематизировать мои компоненты React в больших приложениях. Я включил пример изображения того, как это может выглядеть.
Создайте landingPage / pricing.jsx
import React from 'react';
class Pricing extends React.Component {
render() {
return(
<div>
<h1>Price: $5.99</h1>
</div>
)
}
}
export default Pricing
Создайте landingPage / pitch.jsx
import React from 'react';
class Pitch extends React.Component {
render() {
return(
<div>
<h1>Hello World</h1>
</div>
)
}
}
export default Pitch
Обновите landingPage.jsx
import React from 'react';
// Components
import Pricing from './landingPage/pricing';
import Pitch from './landingPage/pitch';
class LandingPage extends React.Component {
render() {
return(
<div>
<Pitch {...this.props} />
<Pricing {...this.props}/>
</div>
)
}
}
export default LandingPage
Создание промежуточного программного обеспечения API
Я попросил вас создать папку middleware в процессе установки. Здесь я обычно храню служебные файлы andapi.js, который является слоем оболочки для API. Это значительно упростит работу с любым API в приложении React.
Пример мог бы выглядеть примерно так:
// Private API
let post = (payload) => {
console.log(payload);
}
// Public API
const helloWorld = () => {
let payload = 'Hello World!'
post(payload)
}
// Export Api
export const Api = {
helloWorld
}
Вы должны импортировать свою оболочку API с ES6 в верхней части любого файла, который требует этого, как показано ниже.
import {Api} from '../middleware/api'
Api.helloWorld();
Заключение
Теперь у вас должно быть полностью работающее приложение Rails / React с SASS, React 16, React Router, Rails 5.1 и Hot Reloading. Большая часть вашей рабочей нагрузки будет связана с React.
Единственное, для чего вам следует вернуться в приложение Rails, - это создание контроллеров и моделей для обработки ваших вызовов API и указание новых представлений на страницах # root. Все маршруты просмотра будут указывать на ваши страницы # root view, и React-Router будет обрабатывать их оттуда.
Для небольших приложений или быстрых прототипов это отличный набор для работы. Поступая таким образом, вы также обойдете конвейер ресурсов Rails, который для меня всегда был огромной проблемой и одной из основных причин, по которым я перешел на создание сайтов так, как мы это делаем сейчас. Введение ES6 и правильного инструментария Javascript действительно сделало Rails намного лучшей средой, если вы ищете комплексный пакет.
Если вы не знакомы ни с одной из технологий в этом стеке, любые руководства должны указать вам правильное направление отсюда.
Если у вас есть какие-либо вопросы, комментарии, проблемы или обновления, не стесняйтесь оставлять их в комментариях ниже, и я внесу необходимые изменения.
