reactjs 基础

reactjs这个东西的教程找了一圈都太拗口了！

都不像让人来看的。

尝试边学边挖个坑吧。

首先参考http://www.ruanyifeng.com/   下载这个

搭个服务器环境，然后把这个解压缩进去。先运行demo01/index.html

就好啦～～

 

 

 

<code class=" language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
 <strong>   <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../build/react.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../build/JSXTransformer.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span></strong>
  <span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>body<span class="token operator">&gt;
</span>
    <span style="color: #0000ff;"><span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"example"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;
</span></span>
    <span style="color: #339966;">&lt;script type="text/jsx"&gt;</span>
<span style="color: #339966;">                  React.render(</span>
<span style="color: #339966;">                         &lt;h1&gt;Hello, world!&lt;/h1&gt;,</span>
<span style="color: #339966;">                             document.getElementById('example')</span>
<span style="color: #339966;">                   );</span>
<span style="color: #339966;">            &lt;/script&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span></code>

这个就是hello world ^

可以看出区分了三部分。

第一部分是加载reactjs环境。两行。

第一行react.js是主环境。
第二行JSXTransformer.js是将jsx转化为js.这个过程，其实应该在发布前就转化好，因为这个转化实在太慢。不过刚开始嘛，才不管呢～

第二部分是，一个普通的div，要是没这个，就会报错啦～很重要的

第三部分就是核心啦

<code class=" language-javascript"><span style="color: #339966;">&lt;script type="text/jsx"&gt;
//------
 &lt;/script&gt;</span></code>

恩，不同于下边的js，使用上边的jsx.

<code class=" language-javascript">&lt;script type="text/javascript"&gt;
//------
 &lt;/script&gt;</code>

然后就是更核心啦

<code class=" language-javascript"><span style="color: #339966;"> React.render(</span>
<span style="color: #339966;">                         &lt;h1&gt;Hello, world!&lt;/h1&gt;,</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’)就好理解了，找到这个元素，操作。

——————-

待续