{"id":7190,"date":"2022-06-09T16:40:36","date_gmt":"2022-06-09T14:40:36","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/react-native-how-to-get-started-with-react\/"},"modified":"2024-01-09T17:53:07","modified_gmt":"2024-01-09T16:53:07","slug":"react-native-how-to-get-started-with-react","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/react-native-how-to-get-started-with-react\/","title":{"rendered":"React Native: com comen\u00e7ar amb React"},"content":{"rendered":"\n

<\/p>\n\n

Qu\u00e8 \u00e9s React Native?<\/h2>\n\n

React Native \u00e9s un marc popular i en r\u00e0pida expansi\u00f3 per crear aplicacions m\u00f2bils<\/a> multiplataforma. Utilitza JavaScript i React per representar interf\u00edcies d’aplicacions i inclou els seus propis components d’interf\u00edcie d’usuari. Aquest marc permet als desenvolupadors aprofitar els avantatges de l’\u00fas de JavaScript, com ara un temps de desenvolupament r\u00e0pid i una gesti\u00f3 senzilla de dades, alhora que permet als usuaris utilitzar els seus SDK m\u00f2bils natius preferits. Els desenvolupadors poden compartir codi entre plataformes amb React Native, que \u00e9s absolutament impecable per als equips que treballen en diversos projectes.<\/p>\n\n

Tamb\u00e9 us pot interessar: “AWS Cloud Development Kit using Java”<\/a><\/p>\n\n

React Native: components b\u00e0sics i components natius<\/h2>\n\n

\u00c9s un marc de desenvolupament d’aplicacions m\u00f2bils de codi obert per a qu\u00e8 els usuaris desenvolupin aplicacions per a Android i iOS mitjan\u00e7ant React i les capacitats de la plataforma nativa. Aquest marc us permet utilitzar JavaScript per accedir a les API de la vostra plataforma i descriure l’aspecte de la vostra interf\u00edcie d’usuari mitjan\u00e7ant components React: blocs de codi imbricat reutilitzable.<\/p>\n\n

Components natius<\/h3>\n\n

Utilitzem Java o Kotlin per escriure vistes al desenvolupament d’Android; al desenvolupament d’IOS fem servir Swift o Objective C. Podem invocar f\u00e0cilment aquestes vistes amb JavaScript mitjan\u00e7ant components React amb Native. Crea les vistes d’Android i iOS corresponents per a aquests components en temps d’execuci\u00f3. Com que els components natius estan recolzats per les mateixes vistes que Android i iOS, les aplicacions natives es veuen, senten i funcionen com qualsevol altra aplicaci\u00f3. Aquests s\u00f3n components recolzats per la plataforma, components natius<\/strong><\/a> .<\/strong><\/p>\n\n

Components b\u00e0sics<\/h3>\n\n

React inclou un conjunt de components natius importants i llestos per utilitzar que podem utilitzar per comen\u00e7ar a crear la nostra aplicaci\u00f3 a l’instant. Aquests s\u00f3n els components b\u00e0sics<\/strong><\/a> de React Native. Tanmateix, React ens ofereix l’oportunitat de crear els nostres propis components natius tant per a Android com per a iOS per adaptar-nos a les necessitats individuals de la nostra aplicaci\u00f3. React Native t\u00e9 molts components b\u00e0sics, us mostrarem els components b\u00e0sics m\u00e9s utilitzats:<\/p>\n\n

Components de la interf\u00edcie d’usuari nativa de React<\/strong><\/td>Visualitzaci\u00f3 d’Android<\/strong><\/td>Vista d’IOS<\/strong><\/td>Web anal\u00f2gic<\/strong><\/td>Descripci\u00f3<\/strong><\/td><\/tr>
<View><\/code><\/td><ViewGroup><\/code><\/td><UIView><\/code><\/td>Un no-despla\u00e7ament <div><\/code><\/td>Un contenidor que admet disseny amb flexbox, estil, alguns controls t\u00e0ctils i controls d’accessibilitat<\/td><\/tr>
<Text><\/code><\/td><TextView><\/code><\/td><UITextView><\/code><\/td><p><\/code><\/td>Mostra, estilitza i forma nius de cadenes de text i fins i tot gestiona esdeveniments t\u00e0ctils<\/td><\/tr>
<Image><\/code><\/td><ImageView><\/code><\/td><UIImageView><\/code><\/td><img><\/code><\/td>Mostra diferents tipus d’imatges<\/td><\/tr>
<ScrollView><\/code><\/td><ScrollView><\/code><\/td><UIScrollView><\/code><\/td><div><\/code><\/td>Un contenidor de despla\u00e7ament gen\u00e8ric que pot contenir diversos components i vistes<\/td><\/tr>
<TextInput><\/code><\/td><EditText><\/code><\/td><UITextField><\/code><\/td><input type=\"text\"><\/code><\/td>Permet a l’usuari introduir text<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

Configuraci\u00f3 de l’entorn de desenvolupament<\/h2>\n\n

Hi ha dues maneres de configurar la participaci\u00f3 en el desenvolupament del vostre primer projecte React Native.<\/p>\n\n

Expo CLI<\/h3>\n\n

La millor manera per als principiants de comen\u00e7ar \u00e9s desenvolupar una aplicaci\u00f3 mitjan\u00e7ant Expo CLI<\/strong> . Expo \u00e9s un conjunt d’eines creades per a React Native, i el m\u00e9s \u00fatil per a nosaltres ja que ens permet crear aplicacions utilitzant aquest marc a temps. Nom\u00e9s necessiteu una versi\u00f3 actualitzada de Node.js<\/strong> i un tel\u00e8fon o un emulador. Si voleu provar Native directament al vostre navegador web sense instal\u00b7lar cap eina, podeu provar Snack.expo.dev<\/strong> per comen\u00e7ar amb qualsevol projecte que inclogui React Native.<\/p>\n\n

Reacciona CLI nativa<\/h3>\n\n

Si teniu experi\u00e8ncia en desenvolupament m\u00f2bil, podeu utilitzar React Native CLI<\/strong> . Xcode o Android Studio \u00e9s necessari per comen\u00e7ar amb React Native CLI<\/strong> . Si ja teniu instal\u00b7lada una d’aquestes aplicacions, haur\u00edeu de poder comen\u00e7ar en pocs minuts. Si encara no estan disponibles, espereu passar una hora instal\u00b7lant-los i configurant-los.<\/p>\n\n

Comen\u00e7ant amb l’Expo CLI a Windows<\/h2>\n\n

Si teniu instal\u00b7lat el Node 12 LTS o la darrera versi\u00f3, podeu utilitzar npm per instal\u00b7lar la utilitat de l\u00ednia d’ordres Expo CLI. En cas contrari, primer haureu d’instal\u00b7lar Node 12 LTS o la versi\u00f3 m\u00e9s recent. Podeu comprovar la vostra versi\u00f3 del node que feu servir escrivint aquesta ordre a continuaci\u00f3:<\/p>\n\n

C:Usersuser>node -v\nC:Usersuser>node --version<\/code><\/pre>\n\n
\"
Nota: si veieu que la vostra versi\u00f3 de Node \u00e9s 12 o superior, ja esteu a punt. En cas contrari, \u00e9s possible que h\u00e0giu d’actualitzar la versi\u00f3 de Node.<\/figcaption><\/figure>\n\n
Ara executeu l’ordre seg\u00fcent per instal\u00b7lar l’ Expo CLI<\/strong> a la vostra m\u00e0quina.<\/p>\n\n
C:Usersuser>npm install -g expo-cli.<\/code><\/pre>\n\n
\n
\"<\/figure>\n<\/figure>\n\n
Depenent de la configuraci\u00f3 del vostre ordinador i la velocitat d’Internet, pot trigar una estona a instal\u00b7lar Expo CLI<\/strong> al vostre ordinador (uns 5-10 minuts).  <\/p>\n\n
Despr\u00e9s de completar el proc\u00e9s d’instal\u00b7laci\u00f3, escriviu aquesta ordre per veure la versi\u00f3 de l’Expo CLI<\/strong> .<\/p>\n\n
C:Usersuser>expo --version<\/code><\/pre>\n\n
\"<\/figure>\n\n
Ara que tot est\u00e0 configurat i funcionant, estem b\u00e9 per crear el nostre primer projecte amb React Native<\/strong> .<\/p>\n\n
Creant la nostra primera aplicaci\u00f3 nativa React<\/h2>\n\n
Podeu crear la carpeta del projecte all\u00e0 on vulgueu, i dep\u00e8n de vosaltres. Crear\u00e9 una carpeta al meu escriptori anomenada ” ReactNative<\/strong> ” Ara escriviu les ordres seg\u00fcents per crear la vostra primera aplicaci\u00f3:<\/p>\n\n
C:UsersuserDesktopReactNative>expo init MyFirstApp<\/code><\/pre>\n\n
\"
Nota: us permetr\u00e0 seleccionar una opci\u00f3. Despr\u00e9s d’aix\u00f2, podeu triar quin preferiu. Escollir\u00e9 el “en blanc” amb una configuraci\u00f3 m\u00ednima d’aplicaci\u00f3 tan neta com un llen\u00e7 buit.<\/figcaption><\/figure>\n\n
Ara el projecte est\u00e0 llest! Per executar el projecte, hem d’anar al directori del projecte i executar les ordres seg\u00fcents.<\/p>\n\n
C:UsersuserDesktopReactNative>cd MyFirstApp<\/code><\/pre>\n\n
Ara escriviu les ordres seg\u00fcents a continuaci\u00f3 per iniciar el servidor de desenvolupament. Podeu obrir iOS, Android o Web des d’aqu\u00ed o executar-los directament amb l’ordre espec\u00edfica.<\/p>\n\n
C:UsersuserDesktopReactNativeMyFirstApp>npm start\nC:UsersuserDesktopReactNativeMyFirstApp>npm run android\nC:UsersuserDesktopReactNativeMyFirstApp>npm run ios\nC:UsersuserDesktopReactNativeMyFirstApp>npm run web<\/code><\/pre>\n\n
El resultat podria ser el seg\u00fcent:<\/p>\n\n
\"<\/figure>\n\n
http:\/\/localhost:19002\/<\/a> \u00e9s l’URL de les eines de desenvolupament. Visiteu aquest URL al vostre navegador web preferit. I fes clic a l’enlla\u00e7 on vulguis per veure el resultat. Vaig a fer clic a ” Executar al navegador web<\/strong> “, el resultat hauria de ser el seg\u00fcent:<\/p>\n\n
\"<\/figure>\n\n
Ara obriu el fitxer App.js<\/strong> amb el vostre editor de codi preferit a la carpeta del projecte. L’obrir\u00e9 al Bloc de notes ++<\/em><\/strong> i afegir\u00e9 algun codi b\u00e0sic.<\/p>\n\n
import {StatusBar} from 'expo-status-bar';\nimport {StyleSheet, Text, View} from 'react-native';\n\nexport default function app(){\n    return(\n        <View style = {styles.container}>\n            <Text style = {style.cong}> Congratulations! <\/Text>\n            <Text> You've built your first React Native App. <\/Text>\n            <StatusBar style = \"auto\"\/>\n        <\/View>\n    );\n}\n\nconst style = StyleSheet.create({\n    container: {\n        flex: 1,\n        backgroundColor: '#fff',\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    cong:{\n        backgroundColor: 'red',\n        padding: '10px',\n    },\n});<\/code><\/pre>\n\n
\"<\/figure>\n\n
Com React Native ajuda a construir una carrera fant\u00e0stica en el desenvolupament d’aplicacions<\/h2>\n\n
React Native us permet orientar directament a dispositius m\u00f2bils en comptes de navegadors, i podeu utilitzar aquesta funci\u00f3 per compondre aplicacions natives per a Android i iPhone. \u00c9s una tecnologia fant\u00e0stica per entrar-hi. Si voleu aprendre React, a continuaci\u00f3 hi ha alguns motius pels quals haur\u00edeu de triar construir una carrera fant\u00e0stica en el desenvolupament d’aplicacions.<\/p>\n\n