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
6. Почему React-native?
- кросплатформенно
- быстро
- порог вхождения ниже чем в нативной рзработке
- javascript
- легко перейти из веб
- если у вас есть веб проект, не сложно сделать к нему мобильное
приложение
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>
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
16. #2 заранее выбрать список библиотек
- проверить зависимости
- убедитесь, что они работают
- они точно подходят?
эти скорее всего пригодятся:
- redux + immutable
- redux-form
- native-base
- apisauce, axios
25. - мега популярен!
- большое комьюнити, много ответов, всегда найдете решение
- Комфортно и круто
- супер, когда разработка действительно приносит удовольствие
Выводы