{"id":20021488,"url":"https://github.com/dieg0code/react-nativr","last_synced_at":"2025-11-26T19:00:45.610Z","repository":{"id":188197537,"uuid":"561571481","full_name":"Dieg0Code/react-nativr","owner":"Dieg0Code","description":"Apuntes 📒","archived":false,"fork":false,"pushed_at":"2022-11-04T01:31:23.000Z","size":438,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-12T16:25:29.387Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dieg0Code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-11-04T01:30:05.000Z","updated_at":"2022-11-04T01:31:26.000Z","dependencies_parsed_at":"2023-08-14T08:26:27.458Z","dependency_job_id":"b9b7ca9d-e09c-41b3-af87-3219e2914b3e","html_url":"https://github.com/Dieg0Code/react-nativr","commit_stats":null,"previous_names":["dieg0code/react-nativr"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dieg0Code%2Freact-nativr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dieg0Code%2Freact-nativr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dieg0Code%2Freact-nativr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dieg0Code%2Freact-nativr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dieg0Code","download_url":"https://codeload.github.com/Dieg0Code/react-nativr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241455378,"owners_count":19965602,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T08:36:55.924Z","updated_at":"2025-11-26T19:00:45.415Z","avatar_url":"https://github.com/Dieg0Code.png","language":"JavaScript","readme":"# Notas React Native\n\nReact native es un framework para desarrollar aplicaciones móviles nativas para Android y iOS.\n\nExisten dos formas de crear una aplicación con React Native:\n\n- Usando el CLI de React Native\n- Usando Expo\n\nEn este ejemplo se usa expo, ya que es más sencillo de configurar y no requiere de tantas configuraciones.\n\nPara instalar expo se debe ejecutar el siguiente comando:\n\n```bash\nnpm install -g expo-cli\n```\n\nCon esto instalamos el CLI de expo, que nos permite crear proyectos, ejecutarlos y publicarlos mediante el comando `expo`.\n\nPor ejemplo, para crear un proyecto se ejecuta el siguiente comando:\n\n```bash\nexpo init my-project\n```\n\nEl CLI se encarga de instalar todas las dependencias necesarias para crear el proyecto, de crear la estructura de carpetas y los archivos necesarios.\n\nAl ser un proyecto que usa JavaScript, React y Node, podemos ejecutarlo con el comando `npm start`.\n\n## Para debuggear\n\nExisten varias formas de debuggear una aplicación con React Native, pero la más sencilla en mi caso es usar la consola de Chrome, al poner en marcha el proyecto con el comando `npm start` podemos escoger la opción de ejecutar el proyecto en el navegador, de esta forma podemos usar la consola de Chrome para debuggear.\n\n### Linter\n\nEs recomendable usar un linter para mantener un código limpio y ordenado.\n\nPodemos instalar eslint con el siguiente comando:\n\n```bash\nnpm install --save-dev babel-eslint eslint-config-standard eslint-config-standard-jsx eslint-config-standard-react eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react\n```\n\nUna vez instaladas las dependencias, debemos configurar un poco el package.json para que el linter se ejecute correctamente.\n\nAgregamos:\n\n```json\n\"eslintConfig\": {\n    \"parser\": \"babel-eslint\",\n    \"extends\": [\n        \"standard\",\n        \"standard-jsx\",\n        \"standard-react\"\n    ]\n}\n```\n\nDe esta forma el editor nos marcará errores de estilo en el código que escribamos.\n\n## Conceptos básicos de React-native\n\nLa diferencia principal entre React y React-native, está en los componentes disponibles, por ejemplo, no tenemos `\u003cdiv\u003e` o `\u003cp\u003e`, React-native tiene sus propios componentes que mas o menos simulan esa funcionalidad.\n\nPor ejemplo, un componente importante de React-native es `\u003cText\u003e\u003c/Text\u003e` porque es la única manera en la que podemos renderizar textos.\n\nOtro componente importante, quizás el mas, es `\u003cView\u003e\u003c/View\u003e`, con este componente creamos las interfaces, un dato importante es que con este componente por defecto se comporta como un contenedor con flexbox.\n\n`TextInput`, `Button`, `Touchable`, son otros componentes importantes.\n\nTouchable, son todos aquellos componentes que se pueden tocar en la interfaz. Una diferencia de este componente es que en vez de usar onClick, usamos onPress.\n\nOtra cosa importante es que en React normalmente cualquier componente puede ser clickable, pero en React-native cualquier cosa que queramos que sea clickable hay que usar un Touchable, no podemos hacer que una vista sea tocable, ni que un texto sea tocable, pero podemos hacer lo siguiente:\n\n```jsx\n\u003cTouchableWithoutFeedback onPress={() =\u003e console.log('click')}\u003e\n    \u003cText\u003eClick me\u003c/Text\u003e\n\u003c/TouchableWithoutFeedback\u003e\n```\n\nDe esta forma podemos hacer que un texto sea clickable o tocable.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdieg0code%2Freact-nativr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdieg0code%2Freact-nativr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdieg0code%2Freact-nativr/lists"}