React native. Bridge From Web To Mobile. Intro. How to get started with react native development? How to use your web skills in mobile development? Why react native is easy

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. - мега популярен!
- большое комьюнити, много ответов, всегда найдете решение
- Комфортно и круто
- супер, когда разработка действительно приносит удовольствие
Выводы