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

====== React Native - Kezdés react-native ======

  * **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

===== Bevezetés =====

Ha React Native alkalmazást szeretnénk készíteni két projektkezelő paranccsal dolgozhatunk:

  * expo
  * react-native

Itt most az utóbbit fogjuk használni.

===== A react-native-cli parancs =====

Ha korábban telepítve volt a react-native-cli távolsítsuk el:

Ha nincs telepítve, telepítsük:
  npm uninstall -g react-native-cli


Projekt létrehozására az npx parancsot fogjuk használni, ami alapértelmezetten támogatja a react-native csomag létrehozását.
===== Emulátor indítása =====

==== Parancssorból ====

Listázzuk az elérhető eszközöket:
  emulator -list-avds

Indítsuk el a kiválasztott emulátort:
  emulator @Pixel_3a_API_30_x86

A @ után írjuk a telefonemulátor nevét.

Vagy így is lehet:
  emulator -avd Pixel_3a_API_30_x86

Parancssorból futtatva minimális memóriafoglalás: 2,2 GB.


===== A react-native parancs =====

A projekt kezelését a react-native paranccsal fogjuk elvégezni.

A react-native paranccsal szemben az Expo egyik előnye, hogy van hova feltölteni a fejlesztői
változatunkat, a Google Play-en publikálás nélkül. Így mások
és kipróbálhatják a programunkat, még közzététel előtt. 

Ha expo nélkül dolgozunk a fejlesztői változatok számára, egy lehetséges feltöltőhely:
  * https://appcenter.ms/ (2021)
    * https://github.com/Microsoft/react-native-code-push

==== Projekt ====

Új projekt:
  npx react-native init app01

Ha elkészült a projekt, lépjünk be a könyvtárba, majd indítsuk el a Metro-t:
  npx react-native start
A Metro nem adja vissza a várakozási jelet (prompt), addig fut, amíg Ctrl+C billentyűkombinációval meg nem szakítjuk. 


Ha fut a Metro, indítsuk el az alkalmazást:
  npx react-native run-android

Az új projekt tartalmaz egy sablon alkalmazást. Indítás után ez megjelenik.



===== Kódszerkesztő =====

Tetszőleges kódszerkesztőt használhatunk. Itt most **Visual Sutudo Code** kódszerkesztővel dolgozunk.

Ha futtattuk az react-native init parancsot, a többi parancsot (Metro indítása, alkalmazás indítása), futtathatjuk a VSCode termináljából is.

==== VSCode ====

A VSCode ESLint bővítménye nem ajánlja több sorba írni a kódot, pedig néhol szükséges.
  * ESLint - tiltva


==== VSCode snippets ====

A VSCode bővítményei között van olyan, amelyik tud beszúrni már kész kezdő forráskódot.
Használhatjuk azokat is, de azok általában osztályokkal dolgoznak. Mi most készítünk egy
forráskódot, amely függvénnyel dolgozik.

Egy felhasználói snippet bejegyzést fogunk készíteni:
  * File > Preferences > User Snippets
  * Kiválasztjuk a JavaScript nyelvet
  * Létrejön egy javascript.json fájl a következő útvonalon:

  ~/.config/Code/User/snippets/javascript.json

Tartalma legyen:
<code javascript ~/.config/Code/User/snippets/javascript.json>
{
	"React Native komponens": {
		"prefix": "rns",
		"body": [
			"import React from 'react';",
			"import {Text, View, StyleSheet} from 'react-native';\n",
			"export default () => {",
			"\treturn (",
			"\t\t<View style={styles.container}>",
			"\t\t\t<Text>Tartalom</Text>",
			"\t\t</View>",
			"\t);",
			"}\n",
			"const styles = StyleSheet.create({",
			"\tcontainer: {",
			"\t\tflex: 1,",
			"\t\tbackgroundColor: '#fff',",
			"\t\talignItems: 'center',",
			"\t\tjustifyContent: 'center',",
			"\t},",
			"});"
		],
		"description": "React Native komponens beszúrása"
	}

}
</code>

A kódot javítsuk ahogy szeretnénk. A forráskód beszúrásához írjuk a szerkesztőbe: **rns**.
Erre megjelenik egy lista, amiből válasszuk a következőt:
  * rns     React Native Komponens

A következő kódot kapjuk:
<code javascript>
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default () => {
  return (
    <View style={styles.container}>
      <Text>Tartalom</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
</code>

===== A program állományai =====

A program belépési pontja az **index.js**. Itt van regisztrálva az App függvény ami az App.js fájlban van leírva.

Az index.js tartalma:
<code javascript index.js>
/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
</code>

Az App.js fájlban található egy sablon, mi indítható React Native program.

===== App.js =====

Az App.js fájlt tartalmát törölhetjük és elkezdhetjük saját alkalmazásunk írását. 

Ha beállítottuk a fentebb leírt rns snippet-t, az üres szerkesztő ablakba
gépeljük be, majd válasszuk:
  rns    React Native komponens

Ha nincs beállítva a snippet, írjuk be szerkesztőbe:

<code javascript>
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
 
export default () => {
  return (
    <View style={styles.container}>
      <Text>Tartalom</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
</code>


Próbáljunk meg változtatni a beállításokon. Tegyünk be újabb Text komponenst.

===== Munka osztállyal =====

Az eddigi példákban függvényt hoztunk létre a munka elkezdéséhez. 
Dolgozhatunk osztállyal is. Keressük meg az alábbi példában mit változtattunk az osztály használatához.

<code javascript App.js>
import React, { Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Helló Világ</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

</code>

  * Importáltuk a Component osztályt.
  * Az export parancs most egy App osztályt exportál.
  * Egy render függvény törzsébe került a return.

===== Metro =====

Minden mentéskor automatikusan újratöltődik az alkalmazás az emulátorban.

A Metro lehetővé teszi az alkalmazás újratöltését a "r" billentyűvel. Ehhez kattintsunk a terminálba, ahol indítottuk. 

==== Konzol ====

A console.log() vagy console.debug() függvények kimenete megtekinthető a Metro felületén.


===== Linkek =====

Ha szeretne expo nélkül dolgozni, látogassa meg az alábbi linkek valamelyikét:
  * https://reactnative.dev/docs/getting-started (2021)
  * https://dev.to/shivams136/create-react-native-app-for-android-ios-and-web-without-expo-48lc (2021)
  * https://www.developers-zone.com/start-react-native-without-expo/ (2021)
  * https://apiko.com/blog/expo-vs-vanilla-react-native/