Данная статья розчитана только на новичков. Если вы когда-то задумывались над тем стоит ли начинать разрабатывать кроссплатформенные приложения и не имели опыта работы с вебом, милости прошу.
Не большая предыстория.
До этого я разрабатывал игры и приложения на Unity и .Net под Windows, Android, iOS. И волей случая познакомился с React Native. На старте я не знал почти ничего и углубился в ресерч.
Что же я нашел на просторах интернета?
Что это такое вы можете прочитать тут
Выбор среды.
Здесь выбор большой, главное выбрать что-то удобное, самое главное выбор есть. Это Atom + Nuclide, sublime text, visual studio code, Web Storm. Если вы готовы платить 129$ в год, я думаю стоит остановиться на нем, если же нет, выберите удобную себе среду. Мой выбор пал на Visual studio code – так как я почти все время писал в visual studio. Так же там есть терминал, через который я могу запускать приложение на устройстве и т. д.
Какие языки и технологии используются?
Если вы верстальщик — то эта технология для вас. Главная бизнес логику нужно реализовывать на java script, для верстки вы можете использовать jsx и css. Jsx не особо отличается от hmtl, и те кто с ним знакомы, не должны столкнуться с трудностями.
Так же, в этом фреймворке используется react native.
Создание первого проекта
Здесь я воспользовался гайдом от разработчиков, который вы можете увидеть здесь. Далее открыл эту папку в visual studio code. Данный проект уже можно запустить и протестировать на устройствах. Я немного изменил код и в итоге получил вот такое
import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
import { Button, Alert} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<PricingCard
color='#4f9deb'
title='Free'
price='$0'
info={['1 User', 'Basic Support', 'All Core Features']}
button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
/>
<Text>Hi, it`s app for anroid</Text>
<Text>CAMERA START</Text>
<Text></Text>
<Button
onPress={() => {
Alert.alert('You tapped the button!');
}}
title="Press Me"
color="#841584"
/>
<Button
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 4,
backgroundColor: '#FFE4C4',
alignItems: 'center',
justifyContent: 'center',
},
});
К сожалению, не доступен сервер mySQL