![Жизнь будет ярче с 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 - хранит состояние приложения](https://image.slidesharecdn.com/react-nativeintrofromwebtomobile-160606071921/85/React-native-Bridge-From-Web-To-Mobile-Intro-11-320.jpg)
![Добавим нового друга в состояние
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](https://image.slidesharecdn.com/react-nativeintrofromwebtomobile-160606071921/85/React-native-Bridge-From-Web-To-Mobile-Intro-12-320.jpg)
React native. Bridge From Web To Mobile. Intro
- 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
- 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
- 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. - мега популярен! - большое комьюнити, много ответов, всегда найдете решение - Комфортно и круто - супер, когда разработка действительно приносит удовольствие Выводы