Hello world!
其实这是我第一次写文章,好紧张 - -
下载react.js
点这个就是地址了
或者用npm install react
注意找出react.min.js 和JSXTransformer.js
然后各位少侠请先新建一个HTML文件,什么名字无所谓吧
<!DOCTYPE html>
<html>
<head>
<title>react start</title>
</head>
<body>
<div id="example"></div>
<script src="react.min.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
很顺利页面就输出了 Hello, world! 我懒得截图了 - -
然后我们开始分析了
<script type="text/jsx">
为虾米 type = text/jsx
这时候我们把
<script src="JSXTransformer.js"></script>
注释掉
发现页面里面什么都没有了 - - 这就对了
会想下script标签加上text里面内容就变成了文本了 不执行了~
那刚才怎么输出呢,肯定和JSXTransformer.js有关咯
哼,我可是过了四级呢!! 一看我就明白了这个是个JSX转换器咯.把jsx类型的文本转换成正常的js
输出 plain javascript对吧 嘿嘿~
这时候把script 的 type去掉 js执行看看
!!报错了 什么鬼
确实js这么写 语法都不通过了
JSX是facebook自己定的协议 通过JSXTransformer.js转换就正常执行了.
好了着时候开始吐槽了!
我明明是来学react 写一个hello world的 为什么多出来一个JSXTransformer啊?
一点心理准备都没有啊! 你叫我学我就学? 这不在我计划之内啊 ,我想一步步来弄啊~。
能不能只用react.js写一个hello world啊!
能
<!DOCTYPE html>
<html>
<head>
<title>react start</title>
</head>
<body>
<div id="example"></div>
<script src="react.min.js"></script>
<!-- <script src="JSXTransformer.js"></script>-->
<script>
var Hello = React.createClass({
render: function(){
return (
React.createElement('div',{},'Hello world!')
)
}
})
React.render(
React.createElement(Hello),
document.getElementById('example')
);
</script>
</body>
</html>
还是用JSX吧 虽然一开始让我用 我是拒绝的,但写了两天发现也习惯了,况且人家是大公司对吧他们这么用一定有他们的道理,以后项目做大,自然会领悟其中的道理。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。