Cómo Crear un Proyecto en React Native y Comenzar a Codificar

En este tutorial, aprenderemos cómo crear un proyecto en React Native usando la última versión con el comando npx react-native@latest, eliminar el contenido inicial del archivo App.tsx, y cómo usar el comando rafc para generar un template de componente funcional. Además, explicaremos cómo se relacionan los elementos de React Native con los de HTML, y cómo modificar el archivo index.js para importar correctamente el componente.

1. Crear el Proyecto con React Native

Para empezar, necesitamos crear un nuevo proyecto de React Native. Para esto, vamos a utilizar npx, que nos permite ejecutar herramientas sin necesidad de instalarlas globalmente. Usaremos el siguiente comando en la terminal:

npx @react-native-community/cli init MiProyecto

Este comando creará un nuevo proyecto de React Native llamado MiProyecto. Una vez que la instalación esté completa, navegamos al directorio del proyecto:

cd MiProyecto

2. Eliminar el Contenido de App.tsx

Dentro del directorio del proyecto, encontraremos el archivo App.tsx que contiene el código inicial generado por React Native. Vamos a eliminar todo su contenido para comenzar desde cero.

El archivo App.tsx debería quedar vacío, como se muestra a continuación:

// App.tsx

3. Usar el Comando rafc para Generar un Template de Componente Funcional

Ahora vamos a crear un componente funcional usando el comando rafc, que generará un template básico para un componente funcional en React. Para ello, necesitas tener instalado ES7 React/Redux/GraphQL/React-Native snippets en tu editor de código (por ejemplo, Visual Studio Code).

Escribe rafc y presiona Enter. Esto generará un componente como el siguiente:

import React from 'react';
import { View, Text } from 'react-native';

export const App = () => {
  return (
    <View>
      <Text>Hola Mundo</Text>
    </View>
  );
};

Este es un componente funcional que retorna un View con un Text dentro. Es una estructura básica que nos permitirá ver el mensaje “Hola Mundo” en la pantalla de nuestro dispositivo o emulador.

4. ¿Cómo Funciona View y Text en React Native?

En React Native, View y Text son componentes que funcionan de manera similar a div y p en HTML, pero adaptados al entorno móvil. Vamos a explicarlo:

• View: En HTML, un div es un contenedor genérico que usamos para agrupar otros elementos. De manera similar, en React Native, el componente View actúa como un contenedor para otros elementos o componentes. En el ejemplo, View envuelve el componente Text, similar a cómo usarías un div en HTML para envolver un párrafo o cualquier otro contenido.

• Text: El componente Text en React Native es equivalente a la etiqueta p en HTML. Su propósito es renderizar texto en la pantalla. En nuestro ejemplo, Text se usa para mostrar el mensaje “Hola Mundo”.

5. Modificar el Archivo index.js

Cuando utilizamos el comando rafc y exportamos el componente de esta manera:

export const App = () => {
  return (
    <View>
      <Text>Hola Mundo</Text>
    </View>
  );
};

Es importante tener en cuenta que el archivo App.tsx está exportando el componente de forma nombrada (export const App). Esto significa que, en el archivo index.js, no podemos hacer la importación de la siguiente manera:

import App from './App'; // Esto no funcionará con exportaciones nombradas

En lugar de eso, debemos usar la importación con desestructuración para importar el componente correctamente:

import { App } from './App';

Ahora, cuando ejecutemos nuestra aplicación, veremos el mensaje “Hola Mundo” en la pantalla.

6. Resumen de Archivos

A continuación, mostramos cómo deberían quedar los archivos después de seguir todos estos pasos:

App.tsx:

import React from 'react';
import { View, Text } from 'react-native';

export const App = () => {
  return (
    <View>
      <Text>Hola Mundo</Text>
    </View>
  );
};

index.js:

import { App } from './App';
import { AppRegistry } from 'react-native';

AppRegistry.registerComponent('MiProyecto', () => App);