React学习笔记(1)

1 React

React是什么东西呢？引用官网的介绍:’一个用来构建用户界面的javascript库’。React起源于FaceBook的内部项目，由于其技术团队对于所有的Javascript MVC框架都不满意，就开发了React。目前应用于FaceBook及Instagram,并在2013年5月开源了。对于前端的发展来看，已经不能说是新技术了，只是在国内的关注及使用来看，太慢了。好了闲言碎语不多讲，咱们就开说了。

2 browser.js和JSXTansformer.js

JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX，当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。

要把带有JSX语法的代码转化为纯Javascript代码，有多种方式,对于内联与HTML中的代码或者是未经过转化的外部文件:(1)在script标签中要加上type=”text/babel”，并引入browser.js文件即可;(2) 在script标签中要加上type=”text/jsx”，并引入JSXTransformer.js文件。

2.1 browser.js：

1	<script type="text/javascript" src="build/browser.min.js"></script>

引入brower.min.js，注意代码type类型：type=”text/babel“

1
2
3

<script type="text/babel">
    // ** Our code goes here! **
</script>

2.2 JSXTransformer.js：

1	<script type="text/javascript" src="build/JSXTransformer.js"></script>

引入 JSXTransformer.js, 可以将包裹在标签中的JSX代码，在浏览器里实现代码转换,不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好。

1
2
3

<script type="text/jsx">
    // ** Our code goes here! **
</script>

下面的命令用于将src目录中的js文件转换成标准的js文件，并放在build文件中。此时，可在html文件中，利用“引入build文件中的js文件。

1 2	$ npm install -g react-tools $ jsx --watch src/ build/