4# Tu primer componente React

__ Indice __

Definición de componente

Estructura de componente

Programando nuestro componente

__ Definición de componente __

Un componente en React, es un elemento independiente y reeutilizable. Este cuenta con su propia estructura (HTML), su lógica (JS) y diseño (CSS). Dentro de React podemos encontrar dos tipos de componentes.

Componentes funcionales: Solo cuentan con propiedades

Componentes de clase: Tienes propiedades y un ciclo de vida 

 __ Estructura de componente __

Un componente tiene una clase donde estará toda su estructura. Esta clase es la que vamos a exportar cuando sea llamado, es una buena practica llamar a la clase como a nuestro archivo.

Un componente en React, solamente puede renderizar una etiqueta HTML, esta puede tener hijos. pero nunca puede regresar dos etiquetas

class Name extends React.Component   {

        render( )   {

               return (<h1></h1>)

        }

}

__ Programando nuestro componente __

Vamos a crear una carpeta en nuestro proyecto llamada components, en esa carpeta vamos a poner todos nuestros componentes que vayamos creando. Dentro vamos a hacer un archivo js llamado Title

Ya una vez en nuestro archivo JS

Vamos a importar la librería de React para poder utilizar todas sus propiedades, y creamos una clase.

extends: Heredar la propiedad component de React, esta nos permite trabajas con componentes

Hemos dicho que no se puede renderizar dos etiquetas a la par, así que esto es un error y no se puede hacer

Esta es la forma correcta

Vamos a retornar un h1 con el nombre de R3gularWeb y la frase de Sherlock Holmes

En nuestro archivo app.js tenemos que importar nuestro componente

Y ahora, esto es la parte hermosa, podemos utilizar nuestro componente como si fuera una etiqueta html. Solamente hay que borrar hello() que fue el ejemplo pasado

Debería de quedar algo parecido a esto

Listo, podemos ver como se ha creado nuestro primer componente !!