图中是JSX,就是javascriptXML,是facebook为react开发的一套语法糖,语法糖是计算机语言的语法,对语言的功能没有影响,只是方便程序猿使用,增加程序的可读性,减少出错的几率。类似的有CoffeeScript、微软的TypeScript,最终都被解析成js,才能被浏览器理解和执行。
图上div 和Hello为react components,我们可以生成类html的诸如Hello的自定义标签,react components不是真实的dom节点,在react看来它就是相应react components的一个实例,它是通过React.render呈现出来的,第一个参数是我们要渲染的组件,第二个参数是组件插入的位置。
既然是语法糖,那么就必须有解析库,然后告诉浏览器这是jsx,如图:
1.解析js库;2.告诉浏览器这里面是jsx。
JSX让我们可以在js里直接写类dom的结构,比原始的拼接字符串,在用正则表达式替换方便了很多。