React Components - HTML 템플릿을 저장할 위치

Question

newbie를 완료하고 렌더링 메소드에 직접 삽입하는 대신 구성 요소에 HTML을로드하는 방법을 찾으려는 사람에게 완료하십시오. 예 :

import React, {Component} from 'react'; 

export default class Login extends Component { 

    render() { 
    return (
     <!-- how can I provide a link to the HTML template for here? --> 
    ); 
    } 
} 

Answer 1

React에는 HTML이 없습니다. render 메서드에서 작성한 JSX는 실제로 JavaScript로 컴파일됩니다. 핵심에서 React 구성 요소는 모두 JavaScript입니다. 스타일 또한 인라인입니다. 컴포넌트 화는 React에서 깔끔한데, HTML, CSS, 자바 스크립트 (상호 작용)가 모두 자바 스크립트처럼 한 곳에서 있기 때문입니다.

원시 HTML을 삽입하려면 React 속성이 dangerouslySetInnerHTML입니다. 당신은 조직의 일부 유형을 원하는 경우

<div dangerouslySetInnerHTML={createMarkup()} /> 

Answer 2

, 당신은 렌더링 functionalty에 그를 할당 한 후 HTML을 설정하고 변수를 사용하지만, 난 당신이 수도 생각

var hello = React.createClass({ 
    render: yourVariable 
}); 

Answer 3

을 HTML 템플릿을 사용하지 않는 반응 할 수 JSX의 작동 방식에 대해 혼란스러워 할 수 있습니다. JSX가 React.createElement와 같은 React 메소드를 XML 구문과 같은 "구문 설탕"이라고 부르는 이유를 명확히 밝힙니다. 예를 들어 :

var Nav; 
// Input (JSX): 
var app = <Nav color="blue" />; 
// Output (JS): 
var app = React.createElement(Nav, {color:"blue"}); 

그래서, 내 지식의 최선의 JSX 구문은 실제로 렌더링 방법에 속한다 (에서이 docs 반응). 당신이 정말 찾고있는 것은 분리하고 순수하게 표현 적 코드를 재사용하는 가장 좋은 방법 인 경우에, 당신은/벙어리 구성 요소 만있는 컨테이너에 응용 프로그램 및 표현 적 요소

https://medium.com/@learnreact/container-components-c0e67432e005#.dzjqc8yrn https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mn9nf6lz6

비 저장/표현 적 분리에 읽어야 JSX를 리턴하는 함수.

import React from 'react'; 
//you need to import React to use JSX, as it will be expanded into React.createElement calls... 
function Template(props){ 
    return ( 
     //...your template here... 
    ); 
} 

그리고

import React, {Component} from 'react'; 

export default class Login extends Component { 

    render() { 
    return (<Template {...props}/>); 
    } 
} 
} 

말이

다음 클래스 : 그래서 당신은 당신의 템플릿 구성 요소를 가질 수있다?