JSX和声明式的UI
使React能够吸引人的一个特性是它以声明式的UI和优雅的方式来进行代码操作。UI元素就像HTML标签一样通过组建来描述。例如：这个标签<Greeting name='Joe'/> 带了一个参数，它描述了向谁问候的这么一个组建。这些标签可以用JSX的语法的方式直接插入到JavaScript代码中。
JSX 是JavaScript语法的一个扩展。它在React Native包中被预处理成JavaScript。JSX允许直接使用代码优雅的描述UI组件。
<MyButton color="blue" shadowSize={2}> Click Me </MyButton>
编译成：
React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' )
虽然JSX的使用不是必须的，但是为了提供可读性，建议使用JSX语法。
React重要的概念
- Components - 组件是可以在标签中使用的可重用UI元素，例如：
<Greeting/>。React Native提供了像Text和Image一样的内置组建。从React.Component派生出一个类来定义额外的组建。每个组建都有一个返回一系列子组件的React.Component方法。 - Props - 组建可以像
name在<Greeting name='Rexxar'/>中一样作为参数传递，这些参数通常叫做属性或者 props 并且可以通过this.props变量访问。name，在上面的例子中，它可以像{this.props.name}这样访问。 - State - 组建可以保持一个影响组建显示的内部状态。当状态数据变化时，组建就会重新渲染一次。通过React约定，所有可修改的状态都被定义在组件内的
this.state对象内，并且只能通过专用的setState函数进行修改，例如：
this.setState({myStateVariableCounter : 10}) - Events - 组件可以生成在某些UI操作时触发的事件。例如：当光标进入和退出它的区域时，
View组件分别生成onEnter和onExit事件，这些事件可以在组建声明时通过添加属性的方式进行交互处理，例如：
<View onEnter={() => this.setState({hasFocus: true})}> - Layout - React使用flexbox算法和布局规则在2D平面内自动定位组件。此布局通过组建的
dimensions动态获取平台的width和height或者对组建添加样式属性width和height来进行布局(例如：就像添加alignItems样式属性一样)。 - Style - 样式对象可以控制组建的外观和布局。他们通常通过指定一个样式对象。例如：
<View style={{ 100, height: 100, backgroundColor: 'skyblue'}}/>
通过 StyleSheet.create ，可以将样式对象放到外部来声明，而不是直接通过内联样式。这种外部样式可以提供样式代码的复用性。虽然React StyleSheet对象与CSS共享一些属性名称，但它们并无直接的关系。
React 生态系统
尽管最初是为了简化Web的开发而开发的，但React生态系统已经发展到包括几种类型：
- React - 原始库，它主要用于创建支持浏览器渲染的DOM组建。
- React Native - 通过原生组建的使用来开发基于iOS和Android的原生应用程序。React Native是基于React 研发。
- React VR - React VR用于在VR中开发UI。React VR基于React Native研发。
尽管它React VR运行在浏览器中，React VR和React Native的相同之处却多于React，因为它支持和React Native一样的更多的组建，比如：<View>、<Text>。除了2D布局，它还引入了3D场景，变换和全景图的概念，允许将对象放置在3D空间中并在VR中渲染。
明智的是，React VR使用一个简单的OVRUI库，这个库使用了流行的Three.js JavaScript 3D引擎。Three.js在浏览器内部运行，并通过WebGL渲染场景。通过Web VR API提供对VR头盔的访问，可以在Rift，GearVR或其他设备上显示。然而，React VR并不需要VR头盔来运行，在浏览器和手机也可以享有360度的VR体验。
React Native Packager
React JavaScript代码在它通过浏览器运行之前都会提前进行预处理。预处理的执行都是通过React Native packager来执行。React Native Packager和Browserify 、 Webpack类似，并且它提供了一个像CommonJS的模块系统，JavaScript 编译(ES6,Flow,JSX),bundling, 和 asset loading。
对于React VR，我们使用两个关键命令。
-
bundle : 将JavaScript文件进行处理，转换和合并为一个单一的JavaScript静态文件。
-
start : 启动React Native包以充当Web服务器和JavaScript文件动态转换成包文件。
npm start 这个命令是启动package包的命令，它是下面命令的快捷方式。
node node_modules/react-native/local-cli/cli.js start
在这种模式下，packager对于大多数的内容来讲，它就像一个本地的服务器，更重要的是，它能够自动将React 和JSX的代码转换成浏览器支持的JavaScript代码。你可以在你的项目中运行 npm start 这个命令，并且在浏览器中打开http://localhost:8081/index.vr.bundle?platform=vr 以查看效果。
对于静态网站，您需要保存生成的内容。 [npm run bundle](docs / publishing.html)使用以下命令来完成此操作：
node node_modules/react-native/local-cli/cli.js bundle --entry-file index.vr.js --platform vr --dev false --bundle-output index.vr.bundle
打包完的index.vr.bundle文件包含可以由HTML 的 script 标签直接运行的JavaScript代码。