上一期介紹了怎樣搭建開(kāi)發(fā)環(huán)境，現(xiàn)在正是進(jìn)入開(kāi)發(fā)實(shí)戰(zhàn)環(huán)節(jié)
1唠叛、下面通過(guò)終端鍵入下面命令行語(yǔ)句來(lái)創(chuàng)建一個(gè)名為HelloWorld的工程
react-native init HelloWorld
目錄文件如下圖：
2、找一款適合自己的編輯工具進(jìn)行開(kāi)發(fā)沮稚，本人用的WebStorm11艺沼，當(dāng)然你也可以用其他你喜歡的開(kāi)發(fā)工具。
3蕴掏、窺一斑而知全豹
注：用到的ES6障般，部分會(huì)用到ES7
import React, {
Component
} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
ScrollView,
ListView
} from 'react-native';
以上代碼和我們?cè)赬code項(xiàng)目某個(gè)類(lèi)里面使用其他類(lèi)需要導(dǎo)入頭文件是同樣的道理，不同的是React 是組件開(kāi)發(fā)盛杰，并不是類(lèi)挽荡；其實(shí)說(shuō)白了還是一樣的，我們這個(gè)HelloWorld項(xiàng)目開(kāi)發(fā)完之后即供，這個(gè)HelloWorld就是一個(gè)組件定拟，做的比較嚴(yán)謹(jǐn)?shù)脑?huà)，給外界提供合適的接口逗嫡，也就和Image青自、View組件一樣了，可供外界使用驱证。
class Greeting extends Component {
render() {
return (
//我們?cè)贕reeting組件中將name作為一個(gè)屬性來(lái)定制
<Text>{this.props.name}{this.props.age}</Text>
)
}
}
export default class HelloWorld extends Component {
render(){
return(
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Greeting
name = 'Jack'
age = '21'
/>
<Greeting
name = 'Rose'
age = '21'
/>
</View>
)
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
上面定義了一個(gè)Greeting組件延窜，不要好奇為什么這么寫(xiě)，每個(gè)語(yǔ)言都有自己的特點(diǎn)抹锄，只需記住這么寫(xiě)就可以了逆瑞，以后有的是機(jī)會(huì)深入了解荠藤。
4、小結(jié)
這里需要說(shuō)明一下获高，這需要有一定的js基礎(chǔ)商源，沒(méi)有的話(huà)也不要緊，慢慢來(lái)谋减，相信你一定會(huì)學(xué)會(huì)的！
好了扫沼，現(xiàn)在試一試出爹，運(yùn)行一下看看效果吧
是不是感覺(jué)很別扭，是的因?yàn)槲覀儧](méi)有做任何的布局缎除，HelloWorld顯示在狀態(tài)欄位置的严就，不要緊，下一期我們將會(huì)講到怎么樣布局Ｆ鞴蕖梢为！
