Mostrando entradas con la etiqueta React. Mostrar todas las entradas
Mostrando entradas con la etiqueta React. Mostrar todas las entradas

domingo, 19 de septiembre de 2021

Componentes en React

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

Existen dos tipos de componentes en React:
  • Componentes funcionales: Solo tienen propiedades.
  • Componentes de clase: Tienen propiedades, ciclos de vida y propiedades.
Componentes funcionales.

La forma más sencilla de definir un componente es escribir una función de JavaScript ,por
 convenio se pone el nombre de la función en mayúsculas y para renderizarlo simplemente se pone una etiqueta con el nombre de la función.

Componentes de clase.

Un componente de clase es una clase de javascript que extiende la clase Component de React.

martes, 9 de febrero de 2021

React

Es una librería Javascript desarrollada por Facebook y diseñada para ayudarnos a crear SPA's (Single Page Application), su objetivo es tratar de facilitar la tarea de desarrollar interfaces de usuario. Podríamos decir que React es la V en un contexto en el que se use el patrón MVC.

Para instalar React JS debemos tener instalado nodejs y ejecutar algunos comandos sencillos:

  •  Lo primero que tenemos que instalar es Node.js ya que vamos a utilizar npm para la instalación de los paquetes de ReactJs. Para verificar que se ha instalado correctamente ejecutamos en una consola de comando node -v. 
  • Con el comando npm install -g create-react-app  lo que hacemos es instalar ReactJS en nuestro ordenador de forma global. Si no agregásemos el parámetro -g sólo podríamos usar ReactJS en la carpeta donde hemos ejecutado el código.
  •  Nos vamos a la carpeta donde vamos a tener los proyectos que van a utilizar react y lanzamos el ejecutamos create-react-app nombreproyecto.
  • E inicializamos el proyecto npm start

Si todo esta bien, la aplicación estará corriendo en el puerto 3000. Suele abrirse solo el navegador en esta dirección, pero si no es así, sólo debes ingresar a http://localhost:3000.

Si editamos App.js, los cambios que metamos en ese archivo se reflejaran en el navegador automaticamente, sin necesidad de recargar, esto es debido el Webpack, es un empaquetador de módulos que permite automatizar procesos como transpilación de código, preprocesamiento (de .scss a .css), al instalar node, se obtiene esta funcionalidad.

Las aplicaciones React se construyen mediante componentes, los cuales son elementos independientes y pueden ser reutilizados, además, describen cómo tienen que visualizarse y cómo tienen que comportarse.