Meteor по умолчанию поставляется с механизмом шаблонов blaze. Я использую response, поэтому я объясню, как быстро настроить новое приложение Meteor с помощью response. Официальное руководство и учебные пособия скрывают некоторые детали и не делают его настолько простым, насколько могло бы быть - вот для чего предназначен этот пост.
Это минимальные изменения, необходимые для использования React в Meteor. Я также использую файловую структуру, рекомендованную The Meteor Guide. Это минималистичная установка, включающая только самое необходимое.
Создайте новое приложение Meteor и запустите его
Из командной строки запустите:
meteor create --bare newapp cd newapp meteor
Добавьте необходимые пакеты реакции
Опять же из командной строки:
meteor npm install --save react react-dom
Создайте основной компонент приложения
Это основной компонент и точка входа в приложение. Создайте его в import / ui / App.jsx.
import React from 'react' export default class App extends React.Component { render() { return ( <h1>Main App Component</h1> ) } }
Установите компонент запуска
Мы будем хранить большую часть кода нашего приложения в папке импорта и использовать импорт в файлах точки входа метеора для ссылки на нужный нам код.
Создайте client / main.js и вставьте следующее:
import '../imports/startup/client'
Это импортирует файл index.js из папки / imports / startup / client. Теперь мы создадим этот файл.
Создайте файл import / startup / client / index.js и вставьте:
import React from 'react' import { Meteor } from 'meteor/meteor' import { render } from 'react-dom' import App from '../../ui/App' Meteor.startup(() => { render(<App />, document.getElementById('app')) })
Обратите внимание, что в приведенном выше коде мы отображаем компонент App в элемент с идентификатором app. Давайте установим этот тег в теге тела client / main.html.
Создайте файл client / main.html и вставьте:
<head> <title>NewApp</title> </head> <body> <div id="app"></div> </body>
Теперь у вас должно быть запущенное приложение Meteor, которое использует реакцию для пользовательского интерфейса.
Удалите пакеты, которые нам не нужны
Из командной строки запустите:
meteor remove blaze-html-templates
Поскольку приведенная выше команда удалит пакет шаблонов, нам нужно добавить пакет static-html для визуализации необходимого html в нашем приложении.
meteor add static-html
Все сделано
Теперь у вас есть минималистичное приложение Meteor с реакцией на пользовательский интерфейс. Ваша файловая структура должна выглядеть так:
Вы можете найти полный код проекта здесь:
https://github.com/scoozza/meteor-react-minimalist
Спасибо за прочтение.
Если вам понравилась эта история, нажмите кнопку ♡. Следуйте за мной, чтобы увидеть больше сообщений о JavaScript, разработке веб-приложений и мобильных приложений.