从零开始学React(2)——React语法

前端之家收集整理的这篇文章主要介绍了从零开始学React(2)——React语法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前一章内容是从零开始学React(1)—— http://my.oschina.net/u/2608629/blog/675631

第一章,我们会使用render()方法了,这里。我们做更深入的研究。

先上demo

  1. <!DOCTYPE html>
  2. <html>
  3. <Meta charset="UTF-8">
  4. <head>
  5. <script src="../build/react.js"></script>
  6. <script src="../build/react-dom.js"></script>
  7. <script src="../build/browser.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="hello_name"></div>
  11. <script type="text/babel">
  12. var names=["Joey","Harry","Roxie"];
  13. ReactDOM.render(
  14. <div>
  15. {names.map(function (name){
  16. return <div>Hello {name}!</div>
  17. })}
  18. </div>,document.getElementById("hello_name")
  19. )
  20. </script>
  21. </body>
  22. </html>

上图运行结果如下:

在JXS语句中,有2个标签我们要熟练掌握。<>和{}。<>这个符号是html中最经常遇到的,代表标签。在JXS中,所有被<>括起来的内容。都会被解析为HTML内容

相对的{},这个符号被javascript解析,{}这个符号也挺好玩的,EL表达式,Jquery,angular等需要替换变量的地方使用的都是这个。

就像HTML中,内容嵌套一样,在JXS语句中,<>和{}也是相互嵌套。然后生成了我们想要的HTML页面

map():是一个遍历方法在React中,可以把数组的一个个元素取出来。

接下来的一章是从零开始学React(3)——数组http://my.oschina.net/u/2608629/blog/675799

猜你在找的React相关文章