Coffeescript에 React에서 HTML 태그를 어떻게 렌더링합니까?

Question

저는 현재 ReactJS를 배우고 있으며 Ruby on Rails를 백엔드로 사용하는 방법을 배우고 있습니다. 그래서 바보 같은 가정을하고 있다면 저를 단죄 할 수 있습니다.

저자가 ReactJS 코드를 처리하기 위해 ES6 대신 Coffeescript를 사용하는 자습서를 수행 중입니다.

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

이 두 가지 오류가 있습니다 :

그는이 (커피 스크립트)와 유사한 구성 요소 예제를 제공합니다. 첫 번째 것은 React.createClass에 관한 것이 었으며, 더 이상 사용되지 않으며 더 이상 작동하지 않습니다. 대신 나는 createReactClass을 사용하고 있습니다. 좋은. 하지만 이제 React.DOM.h1은 Uncaught TypeError: Cannot read property 'h1' of undefined이라는 오류를 표시합니다. 다른 HTML 태그 중 하나와 동일합니다. 나는 그것이 React.createClass에 의해 이전에 제공된 필요한 기능을 제공하지 않고 있기 때문에 그것이 createReactClass이라고 가정한다. 어쨌든

, 다른 오류에 대한 연구가 간접적으로 관련이있는 동안, I found someone suggesting to use something like this : 그래서

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

의 React.DOM 부분을 절단하는 것을 특징으로한다. 그러면 다른 유형의 오류가 발생합니다 (Uncaught ReferenceError: div is not defined). 다시 말하지만, 나는 그것이 React.createClass으로 변경 되었기 때문이라고 가정하고 있습니다.

커피 스크립트와 반응하여 사용하는 방법은 내가 이런 식으로 사용할 수 있다는, 그런 있습니까 : React.DOM없이

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

가까운 HTML 태그를 열고 필요없이, 그리고?

전혀 가능하지 않거나, 효과가 있었는지, 비슷한 결과를 얻는 방법이 여러 가지인지 모르겠다. 내가 React에 깊이 들어가기 전에 이런 식으로 할 수있는 방법이 있는지 궁금합니다.

감사합니다.

업데이트

나는 여전히 오류가 발생하지만 약간의 진전을 보였습니다. Uncaught TypeError: h1 is not a function :

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 

이 다음과 같은 오류를 제공합니다 : 나는 다음 시도했다.

Answer 1

마침내

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 

그래서 내가 있었던 일을 무엇 React 16을 사용하면 지난 6 개월 동안 얼마나 많은 것이 바뀌 었는지 놀랍습니다. 나는 완전히 React에 익숙하다. 그래서 나는 이것이 어떻게 작동하는지 전혀 몰랐다. 그러나 위의 코드를 오류없이 사용할 수 있었다. 먼저

:

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

이것은 내가이 누락 된 것입니다. div 및 h1은 기능이 없거나 정의되지 않은 오류가 발생했습니다. 다른 사람이에 실행되며 Cannot find module "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.

둘째 : 그래서 per the documentationReact.DOM가 사용할 수 react-dom-factories 같다 밝혀 이와 webpacker : 당신이 다음하는 경우

yarn add react-dom-factories 

또한, create-react-class 및 prop-types를 추가 할 수 있습니다 위의 내 예. 마지막으로

:

당신의 커피 스크립트 파일의 확장자해야합니다 단순히 .coffee입니다. .js.coffee 또는 .jsx.coffee을 사용하면 구성 요소를 찾을 수 없다는 오류가 발생합니다.

필요하다면 100 % 확신 할 수 없지만 솔루션을 검색 할 때 cjsx-loader을 웹 패드에 추가했습니다. Webpack을위한 커피 반응 변환 로더 모듈입니다.

업데이트 :이 마지막 부분은 필요하지 않았습니다. 나는 새로운 프로젝트를 만들었고 이것은 전혀 요구되지 않았다.

Answer 2

Coffeescript를 React with JSX와 함께 사용할 수 있습니다. 당신이해야 할 수도 있습니다

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. 사용하는 반작용의 버전에 따라 개별적으로 React-DOM 패키지
2. DestructureReacDom 직접
를 DOM 요소를 사용할 수를 포함 : 나는 그것을 훨씬 청소기 코드를 만드는 생각
3. 레거시 기능 대신 Coffeescript의 클래스 구문을 사용하십시오.
4. 수출 쉽게 다른 구성 요소에서 사용할 수 있도록 구성 요소의 공장 :

다음

Rows = require('./rows') 

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