Proyectos con React by Josep-Conesa

Aquí tienes una pequeña muestra de mis primeros proyectos con React

Calculador de Seguros con React

Ejemplo de calculador de Seguros, sin usar api, solo funciones matemáticas para calcular el incremento o decremento de precio base. Utilizados los principios básicos de React para crear componentes, usar el state y props para pasar datos entre componentes y mostrar el resultado final.
El framework usado como CSS es Normalize.

Calculador de Gasto Semanal con React

Ejemplo de calculador de Gasto Semanal con React. Utilizados los principios básicos de React para crear componentes, usar el state y props para pasar datos entre componentes y mostrar el resultado final.
También se ha usado ya PropTypes para controlar el tipo de datos que se envia a través de props entre los componentes. Otra materia vista son los React.Fragment para incluir 2 componentes dentro de otro componente. Hemos utilizado spreadOperator para obtener los datos de un objeto, la fecha en la que se inicia una nueva tarea como unica key...
Los frameworks usados como CSS son Skeleton y Normalize.

Agenda Veterinaria con React

Ejemplo de Agenda Veterinaria con React. En este ejemplo seguimos usando el state y props para pasar datos entre componentes y mostrar el resultado final.
También se ha usado ya PropTypes para controlar el tipo de datos que se envia a través de props entre los componentes. Otra materia vista son los componentDidMount, update, para gestionar las vistas de los componentes y el localStorage para guardar y recuperar los datos desde el propio navegador.
Se ha utilizado Bootstrap

El Tiempo con React

Ejemplo de WebApp del Tiempo con React. En este ejemplo seguimos usando el state y props para pasar datos entre componentes y mostrar el resultado final, validando un formulario, utilizando los ciclos de vida de los componentes para desencadenar funciones como la llamada a la api de OpenWeatherMap que nos da la información del tiempo.
Para ello, se ha usado fetch api para leer los datos, y destructuring para obtener los valores que queremos. Con template strings hemos incluido los datos del formulario en la petición a la API. También nos hemos traido el icono del tiempo que nos ofrece la api para mostrarlo en pantalla. Hemos incluido algunos iconos de FontAwesome y el framework utilizado el Materialize. Como siempre hemos documentado toda la webapp con PropTypes para controlar el tipo de datos que se envia a través de props entre los componentes.

WordPress y React

Mientras estaba creando el siguiente proyecto, el portal de noticias, me he topado con un problema, y es que la api que teniamos que usar, no da noticias de españa. Con aquello de mirar opciones, he decidido usar mi propio wordpress para mostrar articulos en pantalla a través de React. Usamos Rest-API de WordPress para leer los posts, y los renderizamos en pantalla.

Próximo Proyecto

En breve pondré aquí el siguiente proyecto. Un pequeño portal de noticias con un formulario para que el usuario pueda elegir que tipo de noticias quiere que se le muestren. También utilizaremos Fetch API para consultar las noticias y mostrarlas en pantalla, algunas transiciones React Transition Group.
Si quieres saber más de mi, pincha en la imagen y en mi web podrás ver otro tipo de desarrollos web hechos por mi.