Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Feb 22

Creando nuestro primer proyecto de ReactJS

  • febrero 22, 2019
  • Alvaro Gomez
  • No Comments
  • Consejos tecnológicos, Desarrollo de aplicaciones, Tecnologías

¡Bienvenidos de nuevo! Ha pasado un tiempo desde que conocimos React y su creciente fama para la implementación de interfaces gráficas. En la entrada anterior conocimos teóricamente la infraestructura de ReactJS, mientras que en esta entrada nos pondremos manos a la obra y crearemos nuestro primer proyecto. Para esto debemos comenzar por configurar nuestro entorno de trabajo.

 

1. Configuración del entorno y primer proyecto

Nota: Todo el proceso de configuración viene especificado en la web de React y puede ser seguido en mayor profundidad en http://reactjs.org

Cierto es que los desarrolladores de React nos ofrecen unas herramientas de aprendizaje bastante sencillas en su web reactjs.org, sin embargo para poder probar su potencial en profundidad os recomiendo configurarlo en vuestro propio equipo.

Para ello comenzaremos descargando node.js para nuestro sistema operativo. Una vez instalado, React ofrece un creador de aplicaciones básicas muy cómodo para comenzar a trastear rápidamente. Para ello utilizaremos la consola o el terminal de nuestro equipo y lo siguientes comandos:

imagen 1

Nos moveremos a la carpeta donde queremos generar el proyecto y lo inicializamos con:

imagen 2

En este momento todos los archivos de nuestro proyecto estarán creados y podremos abrirlos con nuestro editor de textos preferido. Para poder iniciar la aplicación accederemos a la carpeta y ejecutaremos el comando de inicio:

imagen 3

¡Enhorabuena! Has creado tu primera aplicación con React. Es hora de conocer un poco más los entresijos y darle forma a algo más interesante Conocimientos básicos del entorno.

 

2. Estructura básica del proyecto

La estructura básica de un proyecto con React es bastante simple como podemos ver abajo.

imagen 4

 

En los archivos dentro de la carpeta “public” encontramos el archivo “index.html” con la estructura mínima de la aplicación y div identificado como “root” en el cual se insertarán todos nuestros módulos.

imagen 5

 

Más tarde tenemos la carpeta “src” donde encontramos “index.js” el “main” de nuestra aplicación en React. En este se importa React, el React-dom (ya que trabajamos en entorno web) y los existentes de nuestra aplicación. También aquí es donde se inyecta el contenido en el div “root”.

imagen 6

 

Y finalmente nuestro primer componente “App.js”

imagen 7

 

En el que podemos ver que disponemos de una función render que se encarga de mostrar HTML y nos permitirá mostrar unos componentes dentro de otros, como “Navigation” por ejemplo.

Un apunte importante para enlazar un elemento HTML a una clase de CSS usaremos la propiedad className y no class. Esto es para que React no confunda las clases de JavaScript con las de CSS.

 

3. Propiedades de los componentes

Los componentes son mostrados desde la función render() de otro componente con una etiqueta personalizada. Dentro de esta etiqueta se pueden definir propiedades para hacer nuestros componentes más versátiles y reutilizables.

Para esto creamos nuestro componente “Navigation” y dentro de la función render definimos su estructura.

imagen 8

 

Si quisiéramos hacer este titulo editable desde fuera del componente simplemente crearemos una variable dentro de «this.props»:

imagen 9

Con esto podremos acceder a este componente desde cualquier otro importándolo,

imagen 10

y usando la etiqueta con la propiedad que hemos creado.

imagen 11

 

4. Estado de los componentes

Ya hablábamos en la anterior entrada de React sobre su forma de incluir los datos junto con la vista. Esto bastante contrario con las prácticas más extendidas de la programación, sin embargo React insiste en que los componentes son pequeños y aislados y por tanto pueden tener los datos en sí mismos.

Estos datos se definen en el denominado estado de un componente el cual puede almacenar datos, u obtenerlos de algún otro lugar, para luego mostrarlos. En nuestro ejemplo vamos a simular un servicio web que nos devuelve un mensaje en formato JSON y desde este vamos a leer un par de datos.

Nuestro JSON será el siguiente:

imagen 12

 

Lo importamos a nuestro componente «info»:

imagen 13

 

Y accedemos a los datos desde un nuevo método de nuestro componente el constructor.En el cual debemos siempre heredar con “super()” las propiedades de los componentes de React. Y en este constructor actualizamos el estado del componente con nuestros datos.

imagen 14

 

Y finalmente lo utilizamos en nuestra función render.

imagen 15

 

5. Conclusiones

Como hemos podido ver React permite una forma muy sencilla para implementar interfaces gráficas con un patrón de acceso a datos poco habitual. Esta forma directa de acceder a los datos permite que el aprendizaje sea muy sencillo y posiblemente sea el porqué de su gran fama. Sin embargo, para tener un aplicación completa usando React necesitaremos de otras librerías como Redux, Flux, etc, que veremos en próximas entradas. ¿Y vosotros qué opináis?¿Os animáis a usar React en vuestros proyectos?

 

Artículos Relacionados:

  • ipatia-webPresentamos IPatia, aplicación web de gestión de patentes
  • Programa o Compilador | ¿Qué fue primero? ¿Quién lo inventó? | Tribalyte Technologies¿Qué fue primero el programa o el compilador?
  • EthereumNovedades BrightByte v0.5
  • Fissios-appFissios para pacientes de COVID-19
  • Selenium-IDE-Welcome-TribalyteIntroducción a Selenium IDE
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Álvaro es ingeniero de software. Desarrolla aplicaciones Blockchain utilizando tecnologías como TypeScript, Ionic y Solidity. Apasionado por aprender nuevas tecnologías en concreto las relacionadas con cómputo e inteligencia artificial. Su objetivo es siempre estar al día en el mundo del software y utilizar las tecnologías más punteras.

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 910 177 514 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información