Как писать MeteorJS и ReactJS на CoffeeScript?

Question

[Ник В]

Всем день добрый. Начал изучать meteorjs и reactjs и появилась вот такая проблема. Не могу въехать как на coffeescript писать react в meteor'e. Подкиньте пожалуйста гайдов или туториалов или обьясните как это делается.

Последовательность моих действий:

• $ meteor create app
  
• cd app
  
• meteor remove autopublish insecure
  
• meteor add coffeescript stylus mquandalle:jade react jhartma:cjsx
  

Далее следуя этой инструкции создаю файл:

hello.jade

head
  title Todo List
body
  #render-target

и файл

hello.cjsx

if Meteor.isClient
  Meteor.startup ->
    App = React.createClass
      displayName: 'App'
      render: ->
        <div>Hi?</div>
    React.render <App />, document.getElementById 'render-target'

Если делать так, то шаблон рендериться. Если вынести созданый компонент в отдельный файл, то выдает ошибку
Uncaught ReferenceError: App is not defined

hello.cjsx

if Meteor.isClient
    React.render <App />, document.getElementById 'render-target'

app.cjsx

App = React.createClass
  displayName: 'App'
    render: ->
      <div>Hi?</div>

Помогите разобраться.

Comments

[everliving]

Вы же на CS пишите, делайте компонент глобальным '@App'

[Ник В]

everliving: Заработало предварительно обернув всё в "Meteor.startup ->" Так и должно быть?

[everliving]

Я обычно в файле менеджере шаблона делал: Template.dashboard.onRendered ->
React.render , document.getElementById("dashboard-container") но думаю лучший варинат с использвоанием роутера, думаю нагуглите реализацию с flow router

[Ник В]

everliving: Сейчас делаю вот по этому (https://www.youtube.com/watch?v=kVbVBp35keQ&list=L... видео. Пока вроде всё получается. Вы случайно не знаете как сделать нормальную поддержку *.cjsx в WebStorm'e? Нагуглил такую вот вещь (https://github.com/ruswerner/cjsx.tmbundle) поставил. На кортинке html теги отображаются корректно у меня же подчёркивает красным.

[everliving]

Ник Висневский: к сожалению, тут ничем помочь не могу. Не пользуюсь WebStorm'ом

[Ник В]

everliving: И на том спасибо) Помогли. Задам вопрос по cjsx в другой ветке.

Answer 1

[Ник В]

Спасибо everliving. Нужно делать компонент глобальным через @

Answer 2

[Миша Коган]

Надо установить пакет в метеоре

Comments

[Ник В]

Отредактировал вопрос.

Answer 3

[everliving]

Нужные пакеты для CS:
coffeescript
jhartma:cjsx — небольшой туториал
Официальный пакет для React:
react

Вначале тоже начал с CS, но думаю, что лучше ES6

Answer 4

[Амир Бозиев]

Как написать это в cjsx?

renderTasks() {
    return this.getTasks().map((task) => {
      return <Task key={task._id} task={task} />;
    });
}

Исходник Github

Comments

[Ник В]

jsfiddle.net/Nick_v/6xg75jgx

[Амир Бозиев]

Ник Висневский: спасибо