Para instalar o ambiente do react native você precisa ter o node.js e o npm instalatados e precisa instalar os pacotes react-native-cli e expo.
O Expo é um programa que você pode usar para testar o app no celular, da para alterar o aplicativo e ver o resultado na hora no celular ou em uma página web no computador. Da para testar sem precisar ter um emulador de android ou ios instalado.
Se quiser rodar no emulador de android, precisa instalar o ambiente do android studio.
O código do react native não é muito difícil de entender, é javascript misturado com html e css no mesmo código.
As partes do aplicativo são divididas em componentes.
Esse tutorial explica um pouco do expo: http://www.matera.com/blog/post/aplicacoes-mobile-multiplataforma-com-react-native-e-expo
Esses audios explicam como o react.js e o react native funcionam:
Esses tutoriais ensinam como instalar o Node.js, o o ambiente do React Native e do React.js no Ubuntu:
https://www.edivaldobrito.com.br/nodejs-no-ubuntu/
https://www.edivaldobrito.com.br/visual-studio-code-no-ubuntu/
https://www.techomoro.com/how-to-install-and-setup-a-react-app-on-ubuntu-18-04-1/
https://androidwave.com/install-and-setup-react-native-on-ubuntu/
Dependendo da versão do sistema operacional e das versões do node.js e npm que você instalar, podem ocorrer problemas durante a instalação, certifique-se de estar usando as versões mais novas do Node.js, do npm e do Ubuntu.
Se for começar usando o expo, pode pular a as partes dos tutoriais referentes a instalação do ambiente de desenvolvimento nativo do Android e iOS por enquanto.
esse video ensina a instalar o expo: https://www.youtube.com/watch?v=bTfaLDDLCqQ
funciona assim:
expo init nome-da-pasta-a-ser-criada | cria a pasta com os arquivos base do projeto
Para executar, é só abrir a pasta e usar o comando:
npm start
Vai aparecer uma tela com um qrcode, precisa instalar o app do expo no celular e ler o qrcode, quando fizer isso, as alterações que vc fizer no código vão aparecer quase em tempo real no celular.
Se for usar só o React.js(sem o native) só precisa instalar o create-react-app com o comando
npm install -g create-react-app (precisa ter o node.js já instalado)
no react.js pra criar um projeto é | create-react-app nome-projeto
e pra rodar é o comando npm start
Para o React Native, o expo funciona dessa forma:
expo init nome-da-pasta-a-ser-criada (cria o projeto)cd nome-da-pasta-a-ser-criada (abre a pasta do projeto)code . (abre no VS Code)npm start (executa)
Esse tutorial explica melhor como funciona o expo:
http://www.matera.com/blog/post/aplicacoes-mobile-multiplataforma-com-react-native-e-expo
o código do react native começa no arquivo App.js que fica dentro da pasta que o expo ou o react-native-cli criam.
A partir daí pode chamar os outros componentes
pelo expo da pra rodar no smartphone usando o qrcode para abrir
a opção w roda o projeto no navegador no próprio computador.
o código básico é esse:
export default function App() {return (<View style={styles.container}><Text>Open up App.js to lll start working on your app!</Text></View>);}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: ‘#fff’,alignItems: ‘center’,justifyContent: ‘center’,},});
Esses videos ensina algumas coisas básicas sobre como criar os componentes da tela do app:
Recomendo também os vídeos dessa playlist no youtube, principalmente os vídeos sobre mapas, interface e integração com API: https://www.youtube.com/watch?v=iOitq0mDaLc&list=PL85ITvJ7FLojBfY7TifCq7P417AZdsP4k&index=2
É possível usar o React Native junto com junto com outras linguagens no back-end como PHP, Java, C#, Python, Javascript com Node.js ou qualquer outra linguagem Web, pode aproveitar grande parte do código de sistemas web legados que já está pronto.
Precisa separar o front-end do back end, desacoplar o código, o react native fica com o front-end para os smartphones e no back-end pode usar outra linguagem mas ao invés de exibir os dados em formularios html e usar formularios para para gravar dados, precisa criar uma API para transferir os dados do que vai ser exibido ou alterado entre o react native e o back-end usando JSON ou XML.
Se você sabe ingles, eu recomendo também os vídeos do curso de React Native do Harvard CS50 que estão disponíveis no youtube e o podcast React Native Radio.
