react工具集

React支持多平台, 多语言使用.

它能在web. iOS, Android, NodeJS, Nashorn等平台上使用.

同时, 它也支持在像JavaScript, TypeScript, ClojureScript等语言中使用.

为了构建许多优秀的应用, 大神们开发了许多的工具可够大家使用, 常见的工具分类有:

  1. 语言工具. 把当前语法转换成对应语言能识别的语言. 代表作: Babel转换jsx.
  2. 包管理工具.  更好地管理React在项目中依赖的包文件.
  3. 服务端环境配置工具.

 

一, 语言工具介绍:

　　ES2015 with JSX

　　目前的浏览器, 基本上只能识别ES2015的JavaScript代码, 对JSX语法不能直接解析, 之前提供的Babel5就可以实现把JSX转化成对应的ES2015语法. 他可以直接从CDNJS中应用, 在页面中只需要加上<script type="text/babel"></script>标签, 然后把代码写在里卖弄就可以了. 

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../build/react.js"></script>
    <script type="text/javascript" src="../build/react-dom.js"></script>
    <script type="text/javascript" src="../build/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
        );
    </script>
</body>
</html>

 

注意:

　　这种直接写在页面中的, 在浏览器解析的时候, 会有很大的压力, 会延迟对应的渲染, 影响浏览器响应速度, 有什么更好的方法可以解决这个问题呢?

 

解决--预编译JSX:

　　就是在浏览器渲染前, 先把对应的JSX代码转换成浏览器可以识别的样子, 也就是说, 不用等页面加载后再去编译JSX, 这一点Babel可以帮助我们.

使用方法:

如果电脑中已经安装了npm的话, 使用npm install -g babel-cli , 全局安装babel.

babel6与babel5不同, 使用babel6 必须调用babel命令或者写一个.babelrc文件, 里面预设置一些需要完成的配置信息.

最后使用babel --watch src/ --out-dir lib就可以运行编译了.

详细配置可以参考: http://es6.ruanyifeng.com/#docs/intro#Babel转码器

 

 

 

参考文档: http://reactjs.cn/react/docs/tooling-integration.html

 

posted @ 2017-02-23 11:12  此生依然  阅读(320)  评论(0)  编辑  收藏  举报