React

Javascript y React

Por su flexibilidad, las posibilidades que ofrece y el camino que he seguido como desarrollador, probablemente sea Javascript el lenguaje de programación que más me gusta. Con Javascript, puedo hacer aplicaciones web, programar en el lado del servidor, aplicaciones móviles, videojuegos… y eso por sí solo ya hacía que programar con Javascript fuese apasionante…

… y luego descubrí React. Dí bastantes vueltas hasta poder dominar este lenguaje. Empecé a aprenderlo usando programación orientada a objetos, hasta que la gente de Facebook dijo que era mucho mejor utilizar programación funcional para programar en React. Por otra parte React hace un uso intensivo de Javascript, así que cuando me puse a aprender React, rehice el curso de Javascript para explicar este lenguaje utilizando su sintaxis más moderna.

react vs jquery

¿Qué es React?

React es una librería Javascript de código abierto desarrollada por Facebook focalizada en el desarrollo de interfaces de usuario.

Básicamente con React podemos hacer lo mismo que hacíamos con Javascript. ¿Pero entonces…

¿Qué nos aporta React frente a Javascript?

  • Nos facilita escribir código de forma más limpia y ordenada.
  • Cuando cambiemos el valor de una variable esta se actualizará automáticamente en la página sin tener que acceder al DOM.
  • Dado que React usa nodeJS, y nodeJS simplifica mucho la carga de librerías en nuestro proyecto, usando React también tendremos esta ventaja.

Dicho de otra forma, con React podremos desarrollar aplicaciones web de forma mucho más l

¿Quién usa React?

Facebook, Instagram, Dropbox, BBC, Airbnb, Netflix…

¿Qué puedes lograr con React?

Tras terminar el curso, podrás programar aplicaciones con Javascript de manera rápida, eficiente y por tanto mucho más divertida, sin acceder al DOM para nada, y profundizando en muchos conceptos fundamentales de Javascript.

Por qué no usar programación orientada a objetos con React

  • Porque es más complejo.
  • Porque escribes más código.
  • Porque lo dice Facebook (su compañía creadora).

Lecciones

Instalación

Instalamos nodejs A partir de aquí, tenemos dos opciones: Crear nuestro proyecto a partir del “creador” standard de aplicaciones React: 2. Hacer la configuración manualmente. Es buena idea partir del siguiente proyecto que ya tiene una configuración con únicamente las cosas que necesitamos habitualmente. Para ejecutar el primer comando necesitaremos […]

JSX

Se usa para declarar componentes utilizando una sintaxis que recuerda a código html. La transformación de nuestro código JSX a un código Javascript que usa la librería de React es llevada a cabo, habitualmente, por el transpilador babel. 1. Declaración básica de una constante: 2. Cuando tenemos varios elementos que queremos […]

useRef

Los Hooks fueron introducidos en la versión 16.8 de React para optimizar en programación funcional el uso de ciertas funcionalidades inherentes a la programación orientada a objetos cuando usábamos la clase Component. Los Hooks fueron introducidos en la versión 16.8 de React para permitir el uso de la API de […]

useState

Cuando actualizamos una variable state, automáticamente, en caso de ser necesario, el código html vinculado a esa variable es actualizado. Los hooks (useState y useEffect)fueron introducidos en la versión 16.8 de react. Por tanto, para utilizarlos, deberemos tener al menos esta versión en el package.json Modificar un estado Cuando queremos modificar un estado, […]

Componentes

Son partes de la interfaz visual. Su nombre debe, obligatoriamente, comenzar por mayúscula. Si no comienza por mayúscula, tendremos un error que es difícil de interpretar. Cada vez que el componente se renderiza, sus funciones se vuelven a crear, por lo que cuantas más funciones podamos definr fuera del mismo, […]

Props

Sintácticamente una prop es similar a los atributos de HTML. children Destructuring del props Ejercicios props 1. Ejercicio – props Crear un componente llamado Post que debe imprimir el valor de las props postTile, author, y contenido (children). 2. Ahora modificaremos los ejercicios que vimos en las secciones anteriores. Vamos a modificar el componente […]

Renderizado condicional

No es posible poner un if en JSX. En su lugar, tenemos las siguientes opciones: Con estados. Si el estado o la propiedad existe, lo muestro, si no no hago nada Con estados II. Si el estado o la propiedad existe, lo muestro, si no, hago otra cosa Ejercicios renderizado […]

Cargar una imagen

(o un video, un sonido, etc…) Si quisieramos cargar la imagen a partir de un listado de objeto (tipo json), deberemos usar un ficheros js en el que importaremos las imágenes:

Style

Es posible utilizar objetos para definir estilos

Styled Components

Usaremos el siguiente plugin de visual studio code: vscode-styled-components from Julien Poissonnier. Hacer hover Heredar de otro componente Usando props Para personalizar el comportamiento de los styled componentes, usaremos siempre props con valores booleanos, con el propósito de no complicar la lógica que va dentro de la definición del styled component. Estilos […]

Valores por defecto

Valor por defecto de una combo Valor por defecto de un checkbox La propiedad defaultChecked sólo funciona en el render inicial. Si queremos cambiar el valor inicial de la checkbox (por ejemplo, porque hemos hecho una petición al servidor con useEffect, usaremos checked en lugar de defaultChecked).

React router

Nos permite cargar unos componentes u otros en función de la url. Documentación de react-router Configuración básica src/App.js src/application/routes.js src/pages/home/home.js Cuando hagamos un build del proyecto las rutas definidas en el fichero routes.js, no funcionarán si el proyecto está en una subcarpeta del servidor. Podemos salvar este problema añadiendo el siguiente […]

Fetch API (axios)

Cuando queremos recuperar datos de un servidor, debemos usar el método useEffect para ejecutar la petición al servidor sólo cuando el componente se monta. De lo contrario, lo que ocurriría es: Al renderizar el componente App se haría la petición al servidor. Cuando la información llega del servidor, cambiaría el estado de la variable name […]

Context API

Nuestro objeto Provider se encargará de hacer visible el objeto que le pasemos para todos los componentes anidados en él. El valor que recibe el provider, es único. Por eso, si queremos almacenar varios valores, lo que haremos será usar un objeto con múltiples propiedades. ./app.js ./src/application/provider.js ./src/pages/login.js ./src/pages/showstate.js

Redux

Permite definir estados globales. No tiene sentido usar Redux y useState para una misma variable. Si una variable es global a nivel de aplicación, no tiene sentido hacerla global a nivel de componente. Estaríamos guardando la aplicación dos veces. Necesitaremos instalar el siguiente módulo para poder usarlo: Diferencia entre Context API y Redux Redux […]

React Developer Tool

Es un plugin que podemos añadir al navegador y que nos permitirá inspeccionar los componentes React de la página, ver sus prop, saber si una página está hecha con React, etc.

Sockets

Funciona en ReactJS y React Native. Documentación

Login

Pasos: Tendremos una página con un componente Login que recogerá el nombre y el usuario de un formulario y se los mandará al servidor. El servidor le enviará de vuelta un token generado con jwt a partir de la id de ese usuario. Guardaremos ese token globalmente usando redux. Tendremos una segunda página en la que […]

Build

Esto crea en la carpeta build un compilado de nuestra aplicación. Sin embargo, el index.html de la aplicación generada utiliza rutas relativas y sólo funcionará si añadimos un punto al inicio de cada url. Para evitar esto en cada compilado, podemos añadir la siguiente línea al package.json:

Styleguidist

Nos permite probar módulos de manera independiente. package.json ./src/components/titanpad/README.md ./src/components/titanpad/index.js Referenciamos todos los componentes que queremos evaluar. styleguide.config.js

Empaquetar con NPM

Creamos una carpeta en nuestro ordenador en la que añadiremos el código del módulo. Dentro de esta carpeta, crearemos la carpeta src, que es donde almacenaremos los ficheros fuente que vamos a compilar para que estos compilados sean accesibles a través de npm. 2. 3. Creamos el fichero cuyas funciones […]

Aviso Legal | Política de privacidad