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, разработке веб-приложений и мобильных приложений.