react native. bridge from web to mobile. intro
TRANSCRIPT
![Page 1: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/1.jpg)
React-NativeМост от WEB к Mobile
Igor IzraylevychS-PRO http://s-pro.io/
![Page 2: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/2.jpg)
![Page 3: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/3.jpg)
![Page 4: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/4.jpg)
Виды мобильной разработки
native:- ios( swift, objective-c )- android (java, android sdk)
cross platform:- webview & PhoneGap- jQuery Mobile- Ionic + PhoneGap- xamarin- react-native
![Page 5: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/5.jpg)
WebView ;) Native!
![Page 6: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/6.jpg)
Почему React-native?- кросплатформенно- быстро- порог вхождения ниже чем в нативной рзработке- javascript- легко перейти из веб- если у вас есть веб проект, не сложно сделать к нему мобильное
приложение
![Page 7: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/7.jpg)
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> ); }}
![Page 8: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/8.jpg)
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>
![Page 9: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/9.jpg)
Жизнь будет ярче с Redux
![Page 10: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/10.jpg)
Redux Store rules the app
Store
Component Component Component
![Page 11: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/11.jpg)
Жизнь будет ярче с 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 - хранит состояние приложения
![Page 12: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/12.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
![Page 13: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/13.jpg)
React + Redux = love
![Page 14: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/14.jpg)
Кейсы
![Page 15: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/15.jpg)
#1 согласовать с дизайнером элементы UI
![Page 16: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/16.jpg)
#2 заранее выбрать список библиотек
- проверить зависимости
- убедитесь, что они работают
- они точно подходят?
эти скорее всего пригодятся:
- redux + immutable
- redux-form
- native-base
- apisauce, axios
![Page 17: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/17.jpg)
http://github.com/jondot/awesome-react-native
![Page 18: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/18.jpg)
#3 верстка
- сначала верстаем, потом подключаем логику
- пишем jss
- используем переменные
- наследуем стили
![Page 20: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/20.jpg)
#5 планирование State и redux
- очень мощная грабля
- state === DB
- если не спланировал, готовься в какой-то момент переписать все или почти все
![Page 21: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/21.jpg)
#6 redux
Componentsynced with
state
Action State
USE {this.props}! DO NOT USE {this.state}
![Page 22: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/22.jpg)
#7 Actions in Actions
Componentsynced with
state
Action State
![Page 23: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/23.jpg)
#8 forms
- use redux-forms
![Page 24: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/24.jpg)
#9 ios & android
SearchBar.ios.js
SearchBar.android.js
import SearchBar from './SearchBar’;
![Page 25: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/25.jpg)
- мега популярен!
- большое комьюнити, много ответов, всегда найдете решение
- Комфортно и круто
- супер, когда разработка действительно приносит удовольствие
Выводы
![Page 26: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/26.jpg)
![Page 27: React native. Bridge From Web To Mobile. Intro](https://reader036.vdocuments.net/reader036/viewer/2022062902/58efb8a11a28aba01a8b45e9/html5/thumbnails/27.jpg)