[[oktatas:telefon:react_native|< React Native]]

====== React Native telepítés ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A React Native-ról =====


A React Native Android és iOS alkalmazások készítésére készült fejlesztőeszköz.
A React Native alkalmazást alapvetően JavaScript nyelven írjuk. 

Webhely:
  * https://reactnative.dev/


===== Telepítés =====

Telepítés rendszergazdaként:
  npm i -g expo-cli

Ellenőrzés:
  expo --version
Windowson új parancsablakban érhető el a parancs.
===== Kódszerkesztő =====

VS Code esetén a következő bővítmények ajánlottak:

  * React Native Tools
  * React-Native/React/Redux snippets

  * Prettier - Code fromatter
  * Material Icon Theme



===== Android SDK =====
==== Dokumentáció ====

Minden operációs rendszerhez találunk leírást a dokumentációban:


  * https://reactnative.dev/docs/getting-started
  * https://docs.expo.io/versions/latest

Baloldalon a fastruktúrában kattintsunk a 
"**Environment Setup**" elemre, majd az abból
nyíló "**Setting up the development environment**" elemre.
Keressük meg a "React Native CLI Quickstart" fület.


Görgessünk lefele. Találunk egy ilyen fejezetet: "Configure the ANDROID_HOME environment variable".

==== Android Studio ====

Az Android emulátor telepíthető Android Studio nélküli is, ez le van írva a következő fejezetben.

Töltsük le és telepítsük az Android Studio-t. 

Indítás után válasszuk az SDK kezelőt:
  * SDK Manager

A baloldali fastruktúrában ki kell legyen választva
az Android SDK. 

Felül válasszuk a SDK Tools fület. Telepítve kell legyen
  * Android Emulator
  * Android SDK Platform-Tools
  * Intel x86 Emulator Accelerator (HAXM installer)

==== command line Tools ====

Töltsük le a command line tools csomagot innen:
  * https://developer.android.com/studio
Valahol az oldal alján található.

2021. szeptemberben ez egy ilyen nevű állomány:
  * commandlinetools-linux-7583922_latest.zip

Készítsünk a felhasználó könyvtárában egy Android/Sdk könyvtárat.
  mkdir ~/Android/Sdk

Hozzunk létre egy cmdline-tools/latest könyvtárat:
  mkdir -p ~/Android/Sdk/cmdline-tools/latest

Csomagoljuk ki ide a commandlinetools csomagot.

Az ~/Android/Sdk/cmdline-tools/latest/bin útvonalat adjuk a PATH környezeti változóhoz.
Írjuk a ~/.bashrc fájl végére:

<code>
#...
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
</code>


==== Környezeti változók Linuxon ====


Ajánlott beállítások Linuxon:

<code>
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
</code>


==== Környezeti változók beállítása ====

Menjünk vissza a terminálablakba:
  code ~/.bash_prfile

A dokumentáció alapján ezt kell beállítani:

  export ANDROID_SDK=/home/janos/Library/Android/sdk

Ha nem tudjuk hol van az SDK, akkor 
menjünk vissza az Android Studio felületére.
A kezdőablakon, kattintsunk a "Configure" gombra.
Válasszuk az SDK Manager lehetőséget.
Legfelül egy beviteli mezőben szerepel az sdk útvonala,
az "Android SDK Location" után. Másoljuk ezt a
ANDROID_SDK= szöveg után.

Állítsuk be a PATH változót is, a dokumentációnak 
megfelelően. 

Ha zsh-t használunk állítsuk, akkor vegyük fel ez
a két sort a .zshrc fájlba is.

  code ~/.zshrc


Menjünk vissza a terminálablakba, majd 
futtassuk az adb parancsot.

Ha ez nem fut le, akkor az előző beállítások nem
megfelelőek.

==== Telepítés Chocolatey csomagkezelővel ====

  choco install android-sdk android-ndk -y

===== Visual Studio Code =====

Bővítmények:

React Snippets
  * https://marketplace.visualstudio.com/items?itemName=ugross.vscode-react-snippets

Reactjs code snippets
  * https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

ES7 React/Redux/GraphQL/React-Native snippets
  * https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets