Документ обсуждает использование React Native для мобильной разработки, выделяя его преимущества, такие как кросс-платформенность и низкий порог вхождения для веб-разработчиков. Он также знакомит с основами компонента, хранения состояния с помощью Redux и лучшими практиками разработки. В заключение, автор подчеркивает важность планирования состояния и выбора библиотек для эффективной работы с React Native.

1. React-Native
Мост от WEB к Mobile
Igor Izraylevych
S-PRO http://s-pro.io/

4. Виды мобильной разработки
native:
- ios( swift, objective-c )
- android (java, android sdk)
cross platform:
- webview & PhoneGap
- jQuery Mobile
- Ionic + PhoneGap
- xamarin
- react-native

5. WebView ;) Native!

6. Почему React-native?
- кросплатформенно
- быстро
- порог вхождения ниже чем в нативной рзработке
- javascript
- легко перейти из веб
- если у вас есть веб проект, не сложно сделать к нему мобильное
приложение

7. React & React-native?
- template engine, native elements
- <View> == <div>
- <Text> == <span>
- <Image /> == <img />
- ...etc
class MyComponent extends Component {
render() {
return (
<View>
<Image source={{uri: 'http://fb.com/123.png'}} />
<View>
<Text>
React Native
</Text>
<Text>
Build high quality mobile apps using React
</Text>
</View>
</View>
);
}
}

8. UI & blocks
New York
Steve
Paul
friend name
city
submit
Mike
Los Angeles
Friends header
divider
list item
form
class Friends extends Component {
render() {
return (
<Container>
<Header>
<Title>Friends</Title>
</Header>
<List>
<Divider>New York</Divider>
<ListItem>
<Text>Steve</Text>
</ListItem>
<Divider>Los Angeles</Divider>
<ListItem>
<Text>Paul</Text>
</ListItem>
<ListItem>
<Text>Mike</Text>
</ListItem>
</List>
<AddFriendForm>
<TextInput />
<TextInput />
<Button>Submit</Button>
</AddFriendForm>
</Container>

9. Жизнь будет ярче с Redux

10. Redux Store rules the app
Store
Component Component Component

11. Жизнь будет ярче с Redux
New York
Steve
Paul
friend name
city
submit
Mike
Los Angeles
Friends
{
FRIENDS: [{
name: 'Steve',
cityId: '0'
},{
name: 'Paul',
cityId: '1'
},{
name: 'Mike',
cityId: '1'
}],
CITIES: [{
id: 0,
name: 'New York'
},{
id: 1,
name: 'Los Angeles'
}]
}
Redux - хранит состояние приложения

12. Добавим нового друга в состояние
New York
Steve
Paul
friend name
city
submit
Mike
Los Angeles
Friends {
USERS: [{
name: 'Steve',
cityId: '0'
},{
name: 'Paul',
cityId: '1'
},{
name: 'Mike',
cityId: '1'
},{
name: Monica,
cityId: '1'
}]],
CITIES: [{
id: 0,
name: 'New York'
},{
id: 1,
name: 'Los Angeles'
}]
}
Monica
Monica

13. React + Redux = love

14. Кейсы

15. #1 согласовать с дизайнером элементы UI

16. #2 заранее выбрать список библиотек
- проверить зависимости
- убедитесь, что они работают
- они точно подходят?
эти скорее всего пригодятся:
- redux + immutable
- redux-form
- native-base
- apisauce, axios

17. http://github.com/jondot/awesome-react-native

18. #3 верстка
- сначала верстаем, потом подключаем логику
- пишем jss
- используем переменные
- наследуем стили

19. #4 use redux
- http://redux.js.org/

20. #5 планирование State и redux
- очень мощная грабля
- state === DB
- если не спланировал,
готовься в какой-то момент
переписать все или почти
все

21. #6 redux
Component
synced with
state
Action State
USE {this.props}!
DO NOT USE {this.state}

22. #7 Actions in Actions
Component
synced with
state
Action State

23. #8 forms
- use redux-forms

24. #9 ios & android
SearchBar.ios.js
SearchBar.android.js
import SearchBar from './SearchBar’;

25. - мега популярен!
- большое комьюнити, много ответов, всегда найдете решение
- Комфортно и круто
- супер, когда разработка действительно приносит удовольствие
Выводы