您现在的位置:首页 >> 前端 >> 内容

安装React框架教程、最基本react程序写法

时间:2017/11/3 10:16:09 点击:

  核心提示:安装React首先,这是一门框架,必然要有基于javascript的核心架包。来支持这门语言的语法,一共三个。下面我们来一一介绍第一个.react.min.jsreact.min.js最核心的...

安装React

首先,这是一门框架,必然要有基于javascript的核心架包。来支持这门语言的语法,一共三个。下面我们来一一介绍

第一个.react.min.js

react.min.js最核心的库。这个库支撑了react的最基本的语法。

第二个react-dom.min.js

这个库提供了基于react.min.js的一些与DOM相关的一些方法。把这个方法引用在react.min.js之后,就可以直接用这个方法了。

browser.min.js

browser的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

另外介绍一个babel.min.js(选用)

babel 可以将 ES6 代码转为 ES5 代码,这个就包写出来的目的就是估计,react的源码里大量用了es6的新语法。现有浏览器对es6的支持不是很好,这个包就是解决这种兼容性问题。

react一共三个核心库,还是比较简洁的。按照顺序1,2,3引用,就可以用react进行实验和开发啦

特别注重说明:因为在react中你有两种选择,第一是es6的语法可用用class,继承来定义类,如果你不用就老老实实的用var来定义一个对象。第二是你可以选择用JSX语法,当然可以不用jsx语法,也可以用普通的javascipt。而browser和babel这两个包就是一个转化工具。具体例子回在后面的写到

接下来我们构建属于自己的第一个react项目hello,world!

<!DOCTYPE html>
<html>
  <head>
    <script src="../react.js"></script>
    <script src="../react-dom.js"></script>
    <script src="../browser.min.js"></script>
  </head>
  <body>
    <p id="example"></p>
    <script type="text/babel">
      ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
        );
    </script>
  </body>
</html>

这就是一个最最基本的react程序。界面输入为:

Hello, world!

其中值得解释的是ReactDOM.render 是这React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

其实还是比较好理解,有两部份,第一就是需要插入的代码块‘Hello, world!’这就是典型jsx语法,然后指定容器‘example’。

上面我介绍过,不用jsx语法,用普通javascript写法是如何写的呢?其实经过 browser转化后代码,就是普通javascript写法

ReactDOM.render(
    React.createElement('h1',null,'Hello, world!'),
    document.getElementById('example')
    );

当然不同jsx写法有对应的普通javascript写法。以后用react构建项目,当然还是推荐用jsx语法。

可读性强,也比较简单。通过转化普通的js进行对比,可以加深理解。

Tags:安装 装R RE EA 
作者:网络 来源:AlgernonZh