ReactJS'de bu HTML etiketleri "döndürüldü" ile nasıl çalışır?

Question

React kodu İçerisinde HTML ile return (<form> .. </form>); görüyorum ... Bu geçerli Javascript mi? Bir şekilde bir dizeye mi dönüştürülmüş?

Şu anda Javascript öğreniyorum ve kesinlikle bazı boşluklarım var. Bu, bunun nasıl yapıldığına dair bana bir bulmaca veriyor!

var AddTodoComponent = React.createClass({ 
    render: function() { 
    return (
     <form> 
     <input type="text" disabled={AppStore.isSaving()}/> 
     </form> 
    ); 
    } 
}); 

Answer 1

Bu sözdizimi JSX olarak adlandırılmıştır. Normalde geçerli bir JavaScript değildir, tarayıcınız muhtemelen almaz, ancak bir transpeyra ile uygun JavaScript elde edebilirsiniz.

Yukarıdaki bağlantıda, JSX sözdizimini engelleyen geçerli bir JavaScript'in nasıl yazılacağını da görürsünüz (aktarıcının ne üreteceği).

Aşağıdaki örnek Tepki, Gördüğünüz gibi Facebook'un JSX in Depth guide çıkış bölümünde,

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

yukarıda bağlantılı dan o örneklere sizin için işlemek gerçekleştiren yöntemi, React.createElement