前兩篇已經(jīng)把安裝環(huán)境及IDE配置好了，接下來(lái)就開(kāi)始編寫(xiě)第一個(gè)React Native 吧瘤睹。（提前說(shuō)一下目前水平朱灿，搞了4年Android開(kāi)發(fā)，在學(xué)習(xí)React Native之前從沒(méi)接觸過(guò)React攻臀，JSX這些東西焕数，自學(xué)過(guò)一點(diǎn)點(diǎn)JS，可以說(shuō)是零基礎(chǔ)學(xué)習(xí)React Native）刨啸。
接下來(lái) 按照我們學(xué)習(xí)一門(mén)語(yǔ)言的古老傳統(tǒng)堡赔，我們先來(lái)寫(xiě)一個(gè)Hello World吧！
打開(kāi)subline 设联，啟動(dòng)Terminal終端善已，進(jìn)入你想創(chuàng)建工程的目錄下，執(zhí)行
react-native init HelloWorld
等待工程創(chuàng)建完畢离例。（很多人說(shuō)這個(gè)過(guò)程太慢换团，有時(shí)還會(huì)創(chuàng)建失敗，其實(shí)只要在配置安裝環(huán)境時(shí)設(shè)置好鏡像宫蛆，還是很快的）
使用subline 打開(kāi)工程目錄艘包，并打開(kāi)index.android.js
刪除默認(rèn)程序，編寫(xiě)如下程序：
import React,{Component} from 'react';
import{
AppRegistry,
Text
}from 'react-native';
class HelloWorld extends Component{
render(){
return(
<Text>Hello World!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);
終端中
cd HelloWorld
react-native run-android
程序運(yùn)行如下：
好了耀盗，雖然還不知道上面那段代碼什么意思想虎，但現(xiàn)在已經(jīng)成功的運(yùn)行了HelloWorld。現(xiàn)在看不懂沒(méi)關(guān)系叛拷，不要慌舌厨，就像官網(wǎng)說(shuō)的Don't panic. This is the future.哈哈！
下面來(lái)分析一下這個(gè)代碼
首先import, from, class, extends這些關(guān)鍵字以及（）=>這個(gè)句法均是ES6中的固定語(yǔ)法胡诗，現(xiàn)在只要知道這個(gè)是固定語(yǔ)法就行了邓线。而且
import React,{Component} from 'react';
import{
AppRegistry,
... ....
}from 'react-native';
這個(gè)算是固定寫(xiě)法吧
class HelloWorld extends Component 意思就是定義一個(gè)名為HelloWorld 的新組件淌友，好像我們Android里標(biāo)準(zhǔn)的類(lèi)繼承寫(xiě)法啊。
render(){}這是一個(gè)渲染函數(shù)骇陈，每一個(gè)組件都必須有這個(gè)渲染函數(shù)震庭，否則組件是無(wú)法顯示的，在render()中還有一個(gè)return函數(shù)你雌，里邊包含了我們寫(xiě)的JSX代碼器联；
其次是<Text>Hello World!</Text> 這個(gè)是JSX語(yǔ)法，一種在JS中使用XML的語(yǔ)法婿崭，首先是在import中導(dǎo)入了聲明拨拓，然后才可以使用，這不和我們java一個(gè)道理嘛氓栈。這里的<Text>其實(shí)就是類(lèi)似于我們Android中的TextView用來(lái)顯示文本渣磷。
最重要的事最后一句AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);
這是應(yīng)用的啟動(dòng)入口，就像每個(gè)Android程序的啟動(dòng)Activity一樣授瘦，意思是我們的HelloWorld被注冊(cè)成為一個(gè)新的組件醋界，并且為啟動(dòng)入口，AppRegistry.registerComponent()在整個(gè)程序中只可能出現(xiàn)一次提完。
到現(xiàn)在為止形纺，雖然我還不知道JSX，ES6這些語(yǔ)法徒欣，但已經(jīng)大概搞清楚了HelloWorld 這個(gè)工程的大概結(jié)構(gòu)逐样，其實(shí)和我們Android還是有些相似地方的。
下一篇搞定Props和State打肝。
