¡Cómo crear tu propio componente!

Lo primero que debemos hacer es crear nuestro proyecto en react, para este usaremos uno llamado FilterPiker en el cual haremos nuestro propio piker con un filtrado. Sin mas comencemos...

Antes que nada acá les dejo el github del proyecto con el que practicaremos hoy FilterPiker.

Una ves que ya hicimos nuestro

$ Create-react-native-app FilterPiker

Dentro de nuestro proyecto crearemos una carpeta llamada “components” y dentro un archivo que llamaremos FilterPiker.js

Despues no olvidemos importando en nuestro App.js

La idea básica de nuestro componente es un piker que tenga un input para escribir y filtrar la lista. Obviamente necesitaremos poner en muchos lado este tipo de piker para no usar el que nos provee react native, ya que ese no posee filtro para no ver una lista tan larga debido a que es un componente de tipo input es decir que necesitamos que el usuario interactúe con él para recibir un dato; es necesario que dicha selección se guarde en algún lugar

State, Props y defaultProps

Hay dos tipos de variables que maneja un componente, las cuales son los 'state' (que son variables internas del componente) y los 'props' que son las variables que nosotros le pasamos a un componente, mientras que los 'defaultProps' son las variables que definimos como predeterminadas en caso de que no se pase dicha variable al componente. De esta forma no genere un error. Por lo general los 'props' son para manejar de forma más sencilla la personalización de un componente dejando una herramienta como un lienzo en blanco para que así se use como desee.

Estructura básica de un componente

• Un componente tiene un nombre.
• Debe extender de Component que importamos de react.
• Un constructor donde iniciamos nuestros state y todo las cosas antes de que el componente lo cree react.
• Una función render () que sera lo que nuestro componente devuelva al ser llamado.
• “Nombre del componente”.defaultProps donde definiremos los prop que se definirán como por defecto en caso que no sean dados.
• Y un export default que lo que por defecto se importará al importan nuestro componente en otro lado.

Como llamar a mi componente en otro?

Muy sencillo amigos, solo encierra el componente en símbolos de mayor que y menor que. Ejemplo para nuestro componente.

Las cosas coloreadas en verde son las props que le pasamos a nuestro componente. Si seguimos todos estos paso ya tendremos nuestro primer componente :)

Un video de como funciona Youtube

Bueno.. eso es todo por ahora señores, soy Leopoldo Montesinos espero hayan aprendido algo nuevo, me iré para no llegar tarde al trabajo por estar creado componentes en React Native… Adiós.

#saladtech @leomdeveloper