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一员，大家携手并进来填坑！