reactjs 基础

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

都不像让人来看的。

尝试边学边挖个坑吧。

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

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

QQ图片20150604155304

就好啦~~

 

 

 

<!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’)就好理解了,找到这个元素,操作。

——————-

待续

 

 

 

 

 

 

 

此条目发表在js分类目录,贴了标签。将固定链接加入收藏夹。