react native. bridge from web to mobile. intro
TRANSCRIPT
React-NativeМост от WEB к Mobile
Igor IzraylevychS-PRO http://s-pro.io/
Виды мобильной разработки
native:- ios( swift, objective-c )- android (java, android sdk)
cross platform:- webview & PhoneGap- jQuery Mobile- Ionic + PhoneGap- xamarin- react-native
WebView ;) Native!
Почему React-native?- кросплатформенно- быстро- порог вхождения ниже чем в нативной рзработке- javascript- легко перейти из веб- если у вас есть веб проект, не сложно сделать к нему мобильное
приложение
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> ); }}
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>
Жизнь будет ярче с Redux
Redux Store rules the app
Store
Component Component Component
Жизнь будет ярче с 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 - хранит состояние приложения
Добавим нового друга в состояние
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
React + Redux = love
Кейсы
#1 согласовать с дизайнером элементы UI
#2 заранее выбрать список библиотек
- проверить зависимости
- убедитесь, что они работают
- они точно подходят?
эти скорее всего пригодятся:
- redux + immutable
- redux-form
- native-base
- apisauce, axios
http://github.com/jondot/awesome-react-native
#3 верстка
- сначала верстаем, потом подключаем логику
- пишем jss
- используем переменные
- наследуем стили
#5 планирование State и redux
- очень мощная грабля
- state === DB
- если не спланировал, готовься в какой-то момент переписать все или почти все
#6 redux
Componentsynced with
state
Action State
USE {this.props}! DO NOT USE {this.state}
#7 Actions in Actions
Componentsynced with
state
Action State
#8 forms
- use redux-forms
#9 ios & android
SearchBar.ios.js
SearchBar.android.js
import SearchBar from './SearchBar’;
- мега популярен!
- большое комьюнити, много ответов, всегда найдете решение
- Комфортно и круто
- супер, когда разработка действительно приносит удовольствие
Выводы
