2016-03-21 21 views
0

Yakın bir zamanda Reactjs'i öğrenmeye başladım. Sadece boş bir sayfa gösteren bu basit kod parçasını yazdım. Hata yok, ama tek gördüğüm boş bir sayfa ... Herkes yanlış ne yaptığımı bildirebilir mi? IDE'im Visual Studio'dur.Starter, boş bir sayfayı gösteren örnek olarak tepki veriyor

İşte

benim kodu ... Sen anında senin JSX içeriği ayrıştırmak için JSX trafo senaryoyu bağlamanız gerekir

<html> 
<head> 
    <title>Untitled Document</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.min.js"></script> 

</head> 
<body> 
    <div id="results"></div> 
    <script type="text/jsx"> 
     var hello = React.createClass({ 
     render : function(){ 
     return 
     <h1>this.props.text</h1>; 
     } 
     }); 
     React.render(
     <div> 
      <hello text="Hello Rotls">is hekii 1</hello> 
      <hello text="Hello Rotls">is hekii 2</hello> 
      <hello text="Hello Rotls">is hekii 3</hello> 
     </div> 
     ,document.getElementById('results')); 
    </script> 
</body> 
</html> 

cevap

3

. Bu olmadan, tarayıcı <script type="text/jsx">'un içinde ne olduğunu anlamayacak ve bunu görmezden gelecektir.

çalışabilmesi için sizin örnek olarak, ReactJS komut dosyasından sonra bu komut dosyası eklemek gerekir

<script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 

Kontrol jsbin https://jsbin.com/sicivomigo/edit?html,console,output size js'ye JSX derlemek gerekir üretimde

o testi projeleri için Tamam iken, çalışma zamanı derleme jsx önlemek ve uygulamanızı hızlandırmak.

Artık React, çalışma zamanı JSX dönüşümü kullanılarak kullanımdan kaldırıldı ve Websiteyi veya Browserify'yi jsx'i paketlemeye ve küçültmenin yanında js'ye derlemek için tepki uzantılarıyla kullanmayı önerdi. İşte

kurulum için WebPack ve Babel https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

+0

'Sen tarayıcı içi JSX trafosu kullanan ile tepki konusunda iyi bir yazı. JSX'inizi üretim için önbelleğe aldığınızdan emin olun. – Ionut

İlgili konular