React Native. Основной код приложения. Тестирование и отладка

Содержание

Слайд 2

Think Results.

Примеры приложений

https://facebook.github.io/react-native/showcase.html

Think Results. Примеры приложений https://facebook.github.io/react-native/showcase.html

Слайд 3

Think Results.

Отличия React от React Native

React

React Native

Знает, что такое компонент
Знает, как заставить

Think Results. Отличия React от React Native React React Native Знает, что
работать компоненты вместе

Знает, как отрисовать компоненты на экране
Предоставляет набор базовых компонентов

Слайд 4

Think Results.

Пример простейшего приложения на React Native

https://github.com/simple17/Metronome

Think Results. Пример простейшего приложения на React Native https://github.com/simple17/Metronome

Слайд 5

Think Results.

Установка библиотеки и инициализация приложения

npm install -g react-native-cli
react-native init MyMobileApp
cd MyMobileApp
react-native

Think Results. Установка библиотеки и инициализация приложения npm install -g react-native-cli react-native
run-ios

Слайд 6

Think Results.

Импорт зависимостей

Think Results. Импорт зависимостей

Слайд 7

Think Results.

Стили и пара констант

Think Results. Стили и пара констант

Слайд 8

Think Results.

Основной код приложения

Think Results. Основной код приложения

Слайд 9

Think Results.

Пример многоэкранного приложения

https://github.com/simple17/Metronome

Think Results. Пример многоэкранного приложения https://github.com/simple17/Metronome

Слайд 10

Think Results.

Think Results.

Слайд 11

Think Results.

Взаимодействие с сетью

Fetch

Другие

WebSocket
XMLHttpRequest
Frisbee
Axios

Think Results. Взаимодействие с сетью Fetch Другие WebSocket XMLHttpRequest Frisbee Axios

Слайд 12

Think Results.

Тестирование и отладка

Jest как средство написания unit тестов
Call стек
Chrome dev tools

Think Results. Тестирование и отладка Jest как средство написания unit тестов Call стек Chrome dev tools

Слайд 13

Think Results.

Ограничения

iOS > 7, Android > 4.1
Есть зависимые от платформы свойства компонентов
Есть

Think Results. Ограничения iOS > 7, Android > 4.1 Есть зависимые от
компоненты доступные только для определённых платформ
При отсутствии необходимого компонента придётся самому писать Bridge

Слайд 14

Think Results.

Ссылки

https://facebook.github.io/react-native

https://github.com/reactjs/redux

https://github.com/react-community/react-navigation

https://reactjs.org

https://expo.io

https://css-tricks.com/snippets/css/a-guide-to-flexbox

Think Results. Ссылки https://facebook.github.io/react-native https://github.com/reactjs/redux https://github.com/react-community/react-navigation https://reactjs.org https://expo.io https://css-tricks.com/snippets/css/a-guide-to-flexbox