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