JSX를 사용하지 않고 react-jade 가상 DOM을 통해 출력

4724 단어 ReactJavaScript
리액트를 적절히 쓰면*.jsx에는 render() JSX가 가득하다.
이 JSX는 엔지니어에게 그렇게 고통스럽지 않다(대략)
하지만 디자이너(인코더)와 공을 던지면서 할 때는 최선이 아닐 수도 있어요...살짝 조사해 봤는데 react-jade를 사용하는 방법도 있는 것 같아요.
jadejs/react-jade
jade 형식의 파일(문자열)을 가상 DOM을 반환하는 함수로 컴파일합니다.
기본적으로 README에 적힌 것과 같으니 한번 해 보겠습니다.
cd /path/to/app

npm init -y
npm install react react-jade --save-dev
HTML에서 간단한 문자열을 꺼내 보십시오.
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="./bundle.js"></script>
  </body>
</html>
index.js.(이후 브라우저ify로 bundle.jsindex.js
var React = require('react');
var jade  = require('react-jade');

var template = jade.compileFile(__dirname + '/template.jade');

var Hoge = React.createClass({
  render: function() {
    return (
      template({ foo: 'bar' })
    );
  }
});

React.render(React.createElement(Hoge), document.getElementById('container'));
변환할 문자열(≈HTML)을 같은 레벨template.jade에 쓰고 가상 DOMcompileFile()의 함수를 반환합니다.README에 compileFile라는 캐릭터가 적혀있어요.
Compile a jade file into a function that takes locals and returns a React DOM node.
거의 쓰지 않았지만 jade의 파일은 다음과 같습니다.
template.jade
h1(class=foo)
  | Hello, world!!
h2
  | Hello, react-jade!
index.js에서template의 매개 변수를 전달합니다. 이것은 jade 측에서 사용하는 로컬 변수입니다.
따라서 h1 라벨의class는'bar'가 된다.
browserify.
browserify -t react-jade index.js -o bundle.js
이렇게 하면 bundle.js되므로 브라우저에서 최초의 HTML을 엽니다.
결과는 다음과 같다.

reactjs-react-jade를 통해 jade 템플릿에서 가상 DOM 내보내기
↑ 이 글을 읽고서야 알았고, 리액트 측이 발표한 함수를 변수로 자드 측에 전달할 수도 있었다.
이거 좋은 것 같아요.

끝맺다


짧지만 이상입니다.
평소 Rails를 쓰는 템플릿 엔진은 eb와 슬림만 접촉했기 때문에 결국 jade를 기억했지만 JSX를 솔직하게 배우는 것 외에 다른 방법이 있다는 것을 알고 있습니다.
js의 논리적 부분과 가상DOM의 부분이 잘 분리될 수 있을 것 같아서 협업의 의미에서 좋을 수 있습니다.
왜 나는 JS 수조 중의 한 대상의 원소 값만 바꾸었는지, 다른 대상의 원소 값은 모두 따라서 변했다
Cracker Jokes as a Service with Python

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage