reactjs这个东西的教程找了一圈都太拗口了!
都不像让人来看的。
尝试边学边挖个坑吧。
首先参考http://www.ruanyifeng.com/ 下载这个
搭个服务器环境,然后把这个解压缩进去。先运行demo01/index.html
就好啦~~
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
这个就是hello world ^
可以看出区分了三部分。
第一部分是加载reactjs环境。两行。
第一行react.js是主环境。
第二行JSXTransformer.js是将jsx转化为js.这个过程,其实应该在发布前就转化好,因为这个转化实在太慢。不过刚开始嘛,才不管呢~
第二部分是,一个普通的div,要是没这个,就会报错啦~很重要的
第三部分就是核心啦
<script type="text/jsx">
//------
</script>
恩,不同于下边的js,使用上边的jsx.
<script type="text/javascript">
//------
</script>
然后就是更核心啦
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
这个 React.render是 React 的最基本方法
用来转化模板并操作上边的div。
这个大括号里边用逗号分开两句。
第一句<h1>Hello, world!</h1>
在reactjs里边遇到的大括号就用react定义,遇到尖括号就是html或者被定义的类。
只要定义了我用<abc/>也可以的。
后边的document.getElementById(‘example’)就好理解了,找到这个元素,操作。
——————-
待续