react与jsx语法介绍--先行篇

这段时间开始入坑react了，看了官网的jsx语法方面的介绍，恩，确实有点迷迷的，有幸见到一篇歪果仁写的比较详细的有关react和jsx的细节性知识点总结，特地粗略翻译了一下（英语略渣），也顺便加深我的印象。Getting Started with React and JSX

首先先根据官网的一个入门demo来作为这篇博客的打开方式

这个例子很简单，不过这个demo中的程序代码本身含有许多我们需要知道的知识点。

1.React follows component oriented development.
它的简单思路就是把整个UI分离成多个组件。在这个demo中我们只有一个名字为Greeting的组件。在react中，我们通过调用React.createClass来创建一个组件，每个组件都有一个render方法，它是一个用来告诉页面render的标志。在demo中我们仅仅返回<p>Hello, Universe</p>，它会被渲染到页面中。
高能预警：
根据官网的介绍，如果你创建的是一个react组件，那么变量的首字母需要是大写，大写，大写，如果你只是创建一个html标签，那么首字母是小写，小写，小写。下面是我截得中文官网（已经对比0.15版，依然是如此）相关介绍：

大家谨记，别入了这个坑，不然，感觉很难相信bug竟是这个原因。

2.A component doesn’t do anything until it’s rendered
组件在被渲染之前不会做任何事情。调用ReactDOM.render来渲染我们创建的Greeting组件。document.getElementById('greeting-div')这句代码表示，我们将组件渲染的位置，是在Id为greeting-div的盒子中。

3.You might be wondering what <greeting> really is?
这个组件的创建就是用了jsx语法，jsx就是能够让你使用和html类似语法来创建节点。jsx是可选的，你不是一定要使用它这种方式，但是它却又很好的对我们有帮助的特性。

4.Since the browser doesn’t understand JSX natively, we need to transform it to JavaScript first
因为浏览器不能识别jsx，所以我们首先要编译jsx为原生JavaScript代码。在引入的外部文件中有一行代码
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/
babel- core/5.8.34/browser.min.js"></script>
在<script type="text/babel"></script>中babel用于识别jsx代码，并且快速把它编译成JavaScript代码。

到了这，我们基本上把核心代码的每一行的作用给介绍了一下。打开浏览器运行一下代码吧！恭喜成为react一员，大家携手并进来填坑！