Wie rendern Sie HTML-Tags in Reagieren mit Coffeescript?

Question

Ich lerne gerade ReactJS und wie man mit Ruby on Rails als Backend arbeitet, also entschuldige ich mich, wenn ich dumme Annahmen mache, fühle mich frei, mich zu schelten.

Ich folge einem Tutorial, wo der Autor Coffeescript anstelle von ES6 verwendet, um seinen ReactJS-Code zu behandeln.

Er liefert ein Beispiel Komponente ähnlich wie diese (Coffee):

@Rows = React.createClass 
    render -> 
    React.DOM.div 
     className: 'rows' 
     React.DOM.h1 
     className: 'title' 
     'Rows' 

Dies hat zwei Fehler. Die erste bezieht sich auf , die ich herausgefunden habe, ist veraltet und funktioniert nicht mehr. Stattdessen verwende ich createReactClass. Gut. Aber jetzt, React.DOM.h1 gibt eine Fehlermeldung, die Uncaught TypeError: Cannot read property 'h1' of undefined, selbe für welches anderes HTML-Tag ich verwende. Ich nehme an, es ist wegen createReactClass, die nicht die notwendige Funktionalität zur Verfügung stellt, die vorher von zur Verfügung gestellt wurde.

Wie auch immer, während für einen anderen Fehler untersucht, um dies indirekt im Zusammenhang, I found someone suggesting to use something like this:

@Rows = React.createClass 
    render -> 
    div 
     className: 'rows' 
     h1 
     className: 'title' 
     'Rows' 

So, das React.DOM Teil abzuschneiden. Dies ergibt eine andere Art von Fehler, nämlich: Uncaught ReferenceError: div is not defined. Wieder nehme ich an, dass es wegen der Änderung zu React.createClass ist.

Gibt es eine Möglichkeit mit Coffeescript verwenden Reaktion, so dass ich es wie folgt verwenden:

@Rows = createReactClass 
    render -> 
    div 
     className: 'rows' 
     h1 
     className: 'title' 
     'Rows' 

ohne HTML-Tags zu öffnen und zu schließen, und ohne React.DOM?

Ich weiß nicht, ob es überhaupt möglich ist, ob es jemals funktioniert hat oder ob es viele Möglichkeiten gibt, etwas mit ähnlichen Ergebnissen zu erreichen. Ich bin nur neugierig zu wissen, ob es einen Weg gibt, dies zu tun, bevor ich tiefer in React eintauche.

Danke!

aktualisieren

ich einige Fortschritte gemacht habe, obwohl ich einen Fehler nach wie vor bin immer. Ich habe versucht, die folgenden:

import React from 'react' 
import ReactDom from 'react-dom' 
{div, h1, p} = ReactDom 

class Rows extends React.Component 
    render: -> 
    h1 
     className: 'col-md-12' 
     'Rows' 

export default Rows 

Dies gibt den folgenden Fehler: Uncaught TypeError: h1 is not a function.

Answer 1

Hier ist, was arbeitete schließlich

React = require('react') 
PropTypes = require('prop-types') 
ReactDom = require('react-dom-factories') 
createReactClass = require('create-react-class') 
{div, h1} = ReactDom 

Rows = createReactClass 
    render: -> 
    div 
     className: 'col-md-12' 
     h1 
     className: 'title' 
     'Rows' 

export default Rows 

So war ich habe mit React 16 und es ist unglaublich, wie viele Dinge sich in den letzten 6 Monaten verändert haben. Ich bin TOTAL neu zu Reagieren, also hatte ich absolut keine Ahnung, wie das funktionierte, aber ich habe es geschafft, den obigen Code ohne Fehler zu verwenden.

Erste:

ReactDom = require('react-dom-factories') 

Das ist das, was ich fehlte. Ich bekam Fehler, dass div und h1 keine Funktionen waren oder nicht definiert wurden. So stellt sich heraus, dass per the documentationReact.DOM ist jetzt als react-dom-factories:

The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow.

Zweite:

Wenn jemand anderes auf diese läuft und Sie Fehler erhalten, die Cannot find module "react-dom-factories" sagen, es bedeutet, dass Sie sie in den Ihre webpacker mit diesem:

yarn add react-dom-factories 

Sie müssen create-react-class und prop-types können auch hinzufügen, wenn Sie folgende Mein Beispiel oben.

Schließlich:

Stellen Sie sicher, die Erweiterung Ihrer Coffeescript-Datei ist einfach .coffee. Wenn Sie .js.coffee oder .jsx.coffee verwenden, erhalten Sie Fehler, dass die Komponente nicht gefunden werden kann.

Ich bin mir nicht 100% sicher, ob das notwendig ist, aber ich habe auch cjsx-loader zu meinem webpacker hinzugefügt, als ich nach einer Lösung suchte. Es ist ein Kaffee-Reaktiv-Transform-Ladermodul für Webpack.

UPDATE: Dieser letzte Teil war nicht notwendig. Ich habe ein neues Projekt gemacht und dies wurde überhaupt nicht benötigt.

Answer 2

Sie können Coffeescript mit React ohne JSX verwenden. Ich denke, es ist für viele sauberen Code macht:

React = require('react') 
ReactDOM = require('react-dom') 
{div, h1} = ReactDom 


class Rows extends React.Component 

    render: -> 
    div 
     className: 'rows' 
     h1 
     className: 'title' 
     'Rows' 

module.exports = React.createFactory Rows 

1. Abhängig von der Version von Reagieren Sie verwenden, können Sie separat müssen schließe das React-DOM Paket
2. DestructureReacDom die DOM-Elemente zu verwenden, um direkt
3. Verwenden Sie die Klassensyntax von Coffeescript anstelle der Legacy-Funktionen.
4. Export eine Fabrik Ihrer Komponente, so dass Sie es einfach in einer anderen Komponente verwenden können:

Rows = require('./rows') 

class OtherComponent extends React.Component 
    . 
    . 
    . 
    render: -> 
    div 
     className: 'container' 
     Rows()