Índice
- Comenzando con Sanity.io #
- Comunicación bidireccional Sanity-React #
- Configurar y conectar Redux a nuestra aplicación #
- Introducción al lenguaje GROQ de Sanity #
Headless CMS es una forma potente y sencilla de administrar contenido y acceder a API. Construido sobre React, Sanity.io es una herramienta perfecta para la gestión de contenido flexible. Se puede utilizar para crear aplicaciones desde simples hasta complejas desde cero. En este artículo, Ifeanyi explica cómo crear una aplicación de listado sencilla con Sanity.io y React. Los estados globales se gestionarán con Redux y la aplicación se diseñará con componentes con estilo.
La rápida evolución de las plataformas digitales ha impuesto serias limitaciones a los CMS tradicionales como WordPress. Estas plataformas están acopladas, son inflexibles y se centran en el proyecto, más que en el producto. Afortunadamente, se han desarrollado varios CMS sin cabeza para abordar estos desafíos y muchos más.
A diferencia del CMS tradicional, el CMS headless, que puede describirse como software como servicio (SaaS), se puede utilizar para desarrollar sitios web, aplicaciones móviles, pantallas digitales y mucho más. Se pueden utilizar en plataformas ilimitadas. Si está buscando un CMS que sea independiente de la plataforma, que dé prioridad al desarrollador y que ofrezca soporte multiplataforma, no necesita buscar más allá del CMS sin cabeza.
Un CMS headless es simplemente un CMS sin cabeza. Aquí head
se refiere al frontend o la capa de presentación, mientras que se body
refiere al backend o al repositorio de contenido. Esto ofrece muchos beneficios interesantes. Por ejemplo, permite al desarrollador elegir cualquier interfaz de su elección y también puede diseñar la capa de presentación como desee.
Hay muchos CMS sin cabeza, algunos de los más populares incluyen Strapi, Contentful, Contentstack, Sanity, Butter CMS, Prismic, Storyblok, Directus, etc. Estos CMS sin cabeza están basados en API y tienen sus puntos fuertes individuales. Por ejemplo, CMS como Sanity, Strapi, Contentful y Storyblok son gratuitos para proyectos pequeños.
Estos CMS sin cabeza también se basan en diferentes pilas de tecnología. Mientras que Sanity.io se basa en React.js, Storyblok se basa en Vue.js. Como desarrollador de React, esta es la razón principal por la que rápidamente me interesé en Sanity. Sin embargo, al ser un CMS sin cabeza, cada una de estas plataformas se puede conectar a cualquier interfaz, ya sea Angular, Vue o React.
Cada uno de estos CMS sin cabeza tiene planes gratuitos y de pago que representan un aumento de precio significativo. Aunque estos planes pagos ofrecen más funciones, no querrás pagar tanto por un proyecto pequeño o mediano. Sanity intenta resolver este problema introduciendo opciones de pago por uso. Con estas opciones podrás pagar por lo que uses y evitar el salto de precio.
Otra razón por la que elijo Sanity.io es su lenguaje GROQ. Para mí, Sanity se destaca entre la multitud al ofrecer esta herramienta. Las consultas de objetos gráfico-relacionales (GROQ) reducen el tiempo de desarrollo, le ayudan a obtener el contenido que necesita en la forma que lo necesita y también ayudan al desarrollador a crear un documento con un nuevo modelo de contenido sin cambios de código.
Además, los desarrolladores no están limitados al lenguaje GROQ. También puedes usar GraphQL o incluso el tradicional axios
y fetch
en tu aplicación React para consultar el backend. Como la mayoría de los otros CMS sin cabeza, Sanity tiene documentación completa que contiene consejos útiles para desarrollar la plataforma.
Nota: este artículo requiere conocimientos básicos de React, Redux y CSS.
Comenzando con Sanity.io #
Para utilizar Sanity en su máquina, deberá instalar la herramienta Sanity CLI. Si bien esto se puede instalar localmente en su proyecto, es preferible instalarlo globalmente para que sea accesible para aplicaciones futuras.
Para hacer esto, ingrese los siguientes comandos en su terminal.
npm install -g @sanity/cli
La -g
bandera en el comando anterior habilita la instalación global.
A continuación, necesitamos inicializar Sanity en nuestra aplicación. Aunque esto se puede instalar como un proyecto separado, generalmente es preferible instalarlo dentro de su aplicación frontend (en este caso React).
En su blog , Kapehe explicó en detalle cómo integrar Sanity con React. Será útil leer el artículo antes de continuar con este tutorial.
Ingrese los siguientes comandos para inicializar Sanity en su aplicación React.
sanity init
El sanity
comando estará disponible para nosotros cuando instalamos la herramienta Sanity CLI. Puede ver una lista de los comandos de Sanity disponibles escribiendo sanity
o sanity help
en su terminal.
Al configurar o inicializar su proyecto, deberá seguir las instrucciones para personalizarlo. También se le pedirá que cree un conjunto de datos e incluso podrá elegir su conjunto de datos personalizado lleno de datos. Para esta aplicación de listado, utilizaremos el conjunto de datos de películas de ciencia ficción personalizados de Sanity. Esto nos evitará tener que introducir nosotros mismos los datos.
Para ver y editar su conjunto de datos, cd
vaya al subdirectorio Sanity en su terminal e ingrese sanity start
. Esto generalmente continúa https://localhost:3333/
. Es posible que deba iniciar sesión para acceder a la interfaz (asegúrese de iniciar sesión con la misma cuenta que utilizó al inicializar el proyecto). A continuación se muestra una captura de pantalla del entorno.
Comunicación bidireccional Sanity-React #
Sanity y React necesitan comunicarse entre sí para una aplicación completamente funcional.
Configuración de orígenes de CORS en Sanity Manager #
Primero conectaremos nuestra aplicación React a Sanity. Para hacer esto, inicie sesión https://manage.sanity.io/
y ubíquese CORS origins
debajo API Settings
en la Settings
pestaña. Aquí, deberá conectar el origen de su interfaz al backend de Sanity. Nuestra aplicación React se ejecuta https://localhost:3000/
de forma predeterminada, por lo que debemos agregarla al CORS.
Esto se muestra en la siguiente figura.
Conectando la cordura para reaccionar #
Sanity asocia un project ID
a cada proyecto que creas. Esta identificación es necesaria al conectarlo a su aplicación frontend. Puede encontrar el ID del proyecto en su Sanity Manager.
El backend se comunica con React mediante una biblioteca conocida como sanity client
. Debe instalar esta biblioteca en su proyecto Sanity ingresando los siguientes comandos.
npm install @sanity/client
Cree un archivo sanitySetup.js
(el nombre del archivo no importa) en src
la carpeta de su proyecto e ingrese los siguientes códigos de React para configurar una conexión entre Sanity y React.
import sanityClient from "@sanity/client"export default sanityClient({ projectId: PROJECT_ID, dataset: DATASET_NAME, useCdn: true});
Pasamos nuestro projectId
y dataset name
un booleano useCdn
a la instancia del cliente de cordura importado desde @sanity/client
. Esto hace la magia y conecta nuestra aplicación al backend.
Ahora que hemos completado la conexión bidireccional, comencemos a construir nuestro proyecto.
Configurar y conectar Redux a nuestra aplicación #
Necesitaremos algunas dependencias para trabajar con Redux en nuestra aplicación React. Abra su terminal en su entorno React e ingrese los siguientes comandos bash.
npm install redux react-redux redux-thunk
Redux es una biblioteca de gestión de estado global que se puede utilizar con la mayoría de los marcos y bibliotecas frontend como React. Sin embargo, necesitamos una herramienta intermediaria react-redux
para permitir la comunicación entre nuestra tienda Redux y nuestra aplicación React. El procesador Redux nos ayudará a devolver una función en lugar de un objeto de acción de Redux.
Si bien podríamos escribir todo el flujo de trabajo de Redux en un solo archivo, a menudo es más ordenado y mejor separar nuestras preocupaciones. Para esto, dividiremos nuestro flujo de trabajo en tres archivos, a saber, actions
, reducers
y luego el store
. Sin embargo, también necesitamos un archivo separado para almacenar el action types
, también conocido como constants
.
Configurar la tienda #
La tienda es el archivo más importante en Redux. Organiza y empaqueta los estados y los envía a nuestra aplicación React.
Aquí está la configuración inicial de nuestra tienda Redux necesaria para conectar nuestro flujo de trabajo de Redux.
import { createStore, applyMiddleware } from "redux";import thunk from "redux-thunk";import reducers from "./reducers/";export default createStore( reducers, applyMiddleware(thunk));
La createStore
función en este archivo toma tres parámetros: reducer
(obligatorio), el estado inicial y el potenciador (normalmente un middleware, en este caso, thunk
suministrado a través de applyMiddleware
). Nuestros reductores se almacenarán en una reducers
carpeta y los combinaremos y exportaremos en un index.js
archivo en la reducers
carpeta. Este es el archivo que importamos en el código anterior. Revisaremos este archivo más tarde.
- Aproveche la sólida recuperación de datos y el tamaño de paquete optimizado con KendoReact Server Data Grid Probar ahora
Introducción al lenguaje GROQ de Sanity #
Sanity lleva la consulta de datos JSON un paso más allá al presentar GROQ. GROQ significa Consultas de objetos relacionales gráficos. Según Sanity.io , GROQ es un lenguaje de consulta declarativo diseñado para consultar colecciones de documentos JSON en gran medida sin esquemas.
Sanity incluso proporciona GROQ Playground para ayudar a los desarrolladores a familiarizarse con el lenguaje. Sin embargo, para acceder al área de juegos, es necesario instalar Sanity Vision . Ejecute sanity install @sanity/vision
en su terminal para instalarlo.
GROQ tiene una sintaxis similar a GraphQL pero es más condensada y más fácil de leer. Además, a diferencia de GraphQL, GROQ se puede utilizar para consultar datos JSON.
Por ejemplo, para recuperar todos los elementos de nuestro documento de película, usaremos la siguiente sintaxis GROQ.
*[_type == "movie"]
Sin embargo, si deseamos recuperar solo el _ids
y crewMembers
en nuestro documento de película. Necesitamos especificar esos campos de la siguiente manera.
`*[_type == 'movie']{ _id, crewMembers}
Aquí solíamos *
decirle a GROQ que queremos todos los documentos de _type
la película. _type
es un atributo de la colección de películas. También podemos devolver el tipo como lo hicimos con _id
y crewMembers
de la siguiente manera:
*[_type == 'movie']{ _id, _type, crewMembers}
Trabajaremos más en GROQ implementándolo en nuestras acciones de Redux, pero puede consultar la documentación de Sanity.io para GROQ para obtener más información al respecto. La hoja de referencia de consultas de GROQ proporciona muchos ejemplos que le ayudarán a dominar el lenguaje de consulta.
Configurar constantes
Necesitamos constantes para rastrear los tipos de acciones en cada etapa del flujo de trabajo de Redux. Las constantes ayudan a determinar el tipo de acción enviada en cada momento. Por ejemplo, podemos rastrear cuándo se está cargando la API, cuándo está completamente cargada y cuándo ocurre un error.
No necesariamente necesitamos definir constantes en un archivo separado, pero por simplicidad y claridad, esta suele ser la mejor práctica en Redux.
Por convención, las constantes en Javascript se definen en mayúsculas. Seguiremos las mejores prácticas aquí para definir nuestras constantes. A continuación se muestra un ejemplo de una constante para indicar solicitudes de recuperación de películas en movimiento.
export const MOVIE_FETCH_REQUEST = "MOVIE_FETCH_REQUEST";
Aquí, creamos una constante MOVIE_FETCH_REQUEST
que denota un tipo de acción de MOVIE_FETCH_REQUEST
. Esto nos ayuda a llamar fácilmente a este tipo de acción sin usar strings
y evitar errores. También exportamos la constante para que esté disponible en cualquier parte de nuestro proyecto.
De manera similar, podemos crear otras constantes para recuperar tipos de acciones que indiquen cuándo la solicitud tiene éxito o falla. movieConstants.js
En el siguiente código se proporciona un código completo para . Mejores Opiniones y reviews
export const MOVIE_FETCH_REQUEST = "MOVIE_FETCH_REQUEST";export const MOVIE_FETCH_SUCCESS = "MOVIE_FETCH_SUCCESS";export const MOVIE_FETCH_FAIL = "MOVIE_FETCH_FAIL";export const MOVIES_FETCH_REQUEST = "MOVIES_FETCH_REQUEST";export const MOVIES_FETCH_SUCCESS = "MOVIES_FETCH_SUCCESS";export const MOVIES_FETCH_FAIL = "MOVIES_FETCH_FAIL";export const MOVIES_FETCH_RESET = "MOVIES_FETCH_RESET";export const MOVIES_REF_FETCH_REQUEST = "MOVIES_REF_FETCH_REQUEST";export const MOVIES_REF_FETCH_SUCCESS = "MOVIES_REF_FETCH_SUCCESS";export const MOVIES_REF_FETCH_FAIL = "MOVIES_REF_FETCH_FAIL";export const MOVIES_SORT_REQUEST = "MOVIES_SORT_REQUEST";export const MOVIES_SORT_SUCCESS = "MOVIES_SORT_SUCCESS";export const MOVIES_SORT_FAIL = "MOVIES_SORT_FAIL";export const MOVIES_MOST_POPULAR_REQUEST = "MOVIES_MOST_POPULAR_REQUEST";export const MOVIES_MOST_POPULAR_SUCCESS = "MOVIES_MOST_POPULAR_SUCCESS";export const MOVIES_MOST_POPULAR_FAIL = "MOVIES_MOST_POPULAR_FAIL";
Aquí hemos definido varias constantes para buscar una película o una lista de películas, ordenar y buscar las películas más populares. Observe que configuramos constantes para determinar cuándo es la solicitud loading
y successful
.failed
De manera similar, nuestro personConstants.js
archivo se proporciona a continuación:
export const PERSONS_FETCH_REQUEST = "PERSONS_FETCH_REQUEST";export const PERSONS_FETCH_SUCCESS = "PERSONS_FETCH_SUCCESS";export const PERSONS_FETCH_FAIL = "PERSONS_FETCH_FAIL";export const PERSON_FETCH_REQUEST = "PERSON_FETCH_REQUEST";export const PERSON_FETCH_SUCCESS = "PERSON_FETCH_SUCCESS";export const PERSON_FETCH_FAIL = "PERSON_FETCH_FAIL";export const PERSONS_COUNT = "PERSONS_COUNT";
Al igual que movieConstants.js
, establecemos una lista de constantes para buscar una persona o personas. También establecemos una constante para contar personas. Las constantes siguen la convención descrita movieConstants.js
y también las exportamos para que sean accesibles a otras partes de nuestra aplicación.
Finalmente, implementaremos el modo claro y oscuro en la aplicación y así tendremos otro archivo de constantes globalConstants.js
. Echemos un vistazo.
export const SET_LIGHT_THEME = "SET_LIGHT_THEME";export const SET_DARK_THEME = "SET_DARK_THEME";
Aquí establecemos constantes para determinar cuándo se envía el modo claro u oscuro. SET_LIGHT_THEME
determina cuándo el usuario cambia al tema claro y SET_DARK_THEME
determina cuándo se selecciona el tema oscuro. También exportamos nuestras constantes como se muestra.
Configurando las acciones #
Por convención, nuestras acciones se almacenan en una carpeta separada. Las acciones se agrupan según sus tipos. Por ejemplo, las acciones de nuestra película se almacenan movieActions.js
mientras que las acciones de nuestra persona se almacenan en personActions.js
un archivo.
También tenemos globalActions.js
que encargarnos de cambiar el tema del modo claro al modo oscuro.
Busquemos todas las películas en formato moviesActions.js
.
import sanityAPI from "../../sanitySetup";import { MOVIES_FETCH_FAIL, MOVIES_FETCH_REQUEST, MOVIES_FETCH_SUCCESS } from "../constants/movieConstants";const fetchAllMovies = () = async (dispatch) = { try { dispatch({ type: MOVIES_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie']{ _id, "poster": poster.asset-url, } ` ); dispatch({ type: MOVIES_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_FETCH_FAIL, payload: error.message }); }};
¿Recuerdas cuando creamos el sanitySetup.js
archivo para conectar React a nuestro backend de Sanity? Aquí, importamos la configuración para permitirnos consultar nuestro backend de cordura usando GROQ. También importamos algunas constantes exportadas desde el movieConstants.js
archivo en la constants
carpeta.
A continuación, creamos la fetchAllMovies
función de acción para buscar cada película de nuestra colección. La mayoría de las aplicaciones React tradicionales utilizan axios
o fetch
para recuperar datos del backend. Pero si bien podríamos usar cualquiera de estos aquí, estamos usando Sanity GROQ
. Para ingresar al GROQ
modo, necesitamos llamar a sanityAPI.fetch()
la función como se muestra en el código anterior. Aquí sanityAPI
está la conexión React-Sanity que configuramos anteriormente. Esto devuelve a Promise
y por lo tanto debe llamarse de forma asincrónica. Hemos usado la async-await
sintaxis aquí, pero también podemos usar la .then
sintaxis.
Como lo estamos usando thunk
en nuestra aplicación, podemos devolver una función en lugar de un objeto de acción. Sin embargo, optamos por pasar la declaración de devolución en una línea.
const fetchAllMovies = () = async (dispatch) = { ...}
Tenga en cuenta que también podemos escribir la función de esta manera:
const fetchAllMovies = () = { return async (dispatch)={ ... }}
En general, para recuperar todas las películas, primero enviamos un tipo de acción que rastrea cuándo la solicitud aún se está cargando. Luego utilizamos la sintaxis GROQ de Sanity para consultar de forma asincrónica el documento de la película. Recuperamos la _id
URL y la del cartel de los datos de la película. Luego devolvimos una carga útil que contiene los datos obtenidos de la API.
De manera similar, podemos recuperar películas por su _id
formato, ordenarlas y obtener las más populares.
También podemos buscar películas que coincidan con la referencia de una persona en particular. Hicimos esto en la fetchMoviesByRef
función.
const fetchMoviesByRef = (ref) = async (dispatch) = { try { dispatch({ type: MOVIES_REF_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie' (castMembers[person._ref match '${ref}'] || crewMembers[person._ref match '${ref}']) ]{ _id, "poster" : poster.asset-url, title } ` ); dispatch({ type: MOVIES_REF_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_REF_FETCH_FAIL, payload: error.message }); }};
Esta función toma un argumento y comprueba si person._ref
en castMembers
o crewMembers
coincide con el argumento pasado. Devolvemos la película _id
, poster url
, y title
al lado. También enviamos una acción de tipo MOVIES_REF_FETCH_SUCCESS
, adjuntando una carga útil de los datos devueltos, y si ocurre un error, enviamos una acción de tipo MOVIE_REF_FETCH_FAIL
, adjuntando una carga útil del mensaje de error, gracias al try-catch
contenedor.
En la fetchMovieById
función, solíamos GROQ
recuperar una película que coincide con un elemento particular id
pasado a la función.
La GROQ
sintaxis de la función se muestra a continuación.
const data = await sanityAPI.fetch( `*[_type == 'movie' _id == '${id}']{ _id, "cast" : castMembers[]{ "ref": person._ref, characterName, "name": person-name, "image": person-image.asset-url } , "crew" : crewMembers[]{ "ref": person._ref, department, job, "name": person-name, "image": person-image.asset-url } , "overview": { "text": overview[0].children[0].text }, popularity, "poster" : poster.asset-url, releaseDate, title }[0]` );
Al igual que la fetchAllMovies
acción, comenzamos seleccionando todos los documentos de tipo movie
pero fuimos más allá y seleccionamos solo aquellos con una identificación proporcionada a la función. Como pretendemos mostrar muchos detalles de la película, especificamos una serie de atributos para recuperar.
Recuperamos la película id
y también algunos atributos de la castMembers
matriz, a saber ref
,, characterName
el nombre de la persona y la imagen de la persona. También cambiamos el alias de castMembers
a cast
.
Al igual que castMembers
, seleccionamos algunos atributos de la crewMembers
matriz, a saber ref
, department
, job
, el nombre de la persona y la imagen de la persona. También cambiamos el alias de crewMembers
a crew
.
De la misma manera, seleccionamos el texto general, la popularidad, la URL del póster de la película, la fecha de estreno y el título de la película.
El lenguaje GROQ de Sanity también nos permite ordenar un documento. Para ordenar un artículo, pasamos el pedido junto a un operador de tubería .
Por ejemplo, si queremos ordenar las películas por releaseDate
orden ascendente, podemos hacer lo siguiente.
const data = await sanityAPI.fetch( `*[_type == 'movie']{ ... } | order(releaseDate, asc)` );
Usamos esta noción en la sortMoviesBy
función para ordenar en orden ascendente o descendente.
Echemos un vistazo a esta función a continuación.
const sortMoviesBy = (item, type) = async (dispatch) = { try { dispatch({ type: MOVIES_SORT_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie']{ _id, "poster" : poster.asset-url, title } | order( ${item} ${type})` ); dispatch({ type: MOVIES_SORT_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_SORT_FAIL, payload: error.message }); }};
Comenzamos enviando una acción de tipo MOVIES_SORT_REQUEST
para determinar cuándo se carga la solicitud. Luego usamos la GROQ
sintaxis para ordenar y recuperar datos de la movie
colección. El elemento por el que se ordenará se proporciona en la variable item
y el modo de clasificación (ascendente o descendente) se proporciona en la variable type
. En consecuencia, devolvimos la id
dirección URL del cartel y el título. Una vez que se devuelven los datos, enviamos una acción de tipo MOVIES_SORT_SUCCESS
y, si falla, enviamos una acción de tipo MOVIES_SORT_FAIL
.
Un concepto similar GROQ
se aplica a la getMostPopular
función. La GROQ
sintaxis se muestra a continuación.
const data = await sanityAPI.fetch( ` *[_type == 'movie']{ _id, "overview": { "text": overview[0].children[0].text }, "poster" : poster.asset-url, title }| order(popularity desc) [0..2]` );
La única diferencia aquí es que clasificamos las películas por popularidad en orden descendente y luego seleccionamos solo las tres primeras. Los elementos se devuelven en un índice de base cero, por lo que los primeros tres elementos son los elementos 0, 1 y 2. Si deseamos recuperar los primeros diez elementos, podríamos pasar [0..9]
a la función.
Aquí está el código completo para las acciones de la película en el movieActions.js
archivo.
import sanityAPI from "../../sanitySetup";import { MOVIE_FETCH_FAIL, MOVIE_FETCH_REQUEST, MOVIE_FETCH_SUCCESS, MOVIES_FETCH_FAIL, MOVIES_FETCH_REQUEST, MOVIES_FETCH_SUCCESS, MOVIES_SORT_REQUEST, MOVIES_SORT_SUCCESS, MOVIES_SORT_FAIL, MOVIES_MOST_POPULAR_REQUEST, MOVIES_MOST_POPULAR_SUCCESS, MOVIES_MOST_POPULAR_FAIL, MOVIES_REF_FETCH_SUCCESS, MOVIES_REF_FETCH_FAIL, MOVIES_REF_FETCH_REQUEST} from "../constants/movieConstants";const fetchAllMovies = () = async (dispatch) = { try { dispatch({ type: MOVIES_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie']{ _id, "poster" : poster.asset-url, } ` ); dispatch({ type: MOVIES_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_FETCH_FAIL, payload: error.message }); }};const fetchMoviesByRef = (ref) = async (dispatch) = { try { dispatch({ type: MOVIES_REF_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie' (castMembers[person._ref match '${ref}'] || crewMembers[person._ref match '${ref}']) ]{ _id, "poster" : poster.asset-url, title }` ); dispatch({ type: MOVIES_REF_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_REF_FETCH_FAIL, payload: error.message }); }};const fetchMovieById = (id) = async (dispatch) = { try { dispatch({ type: MOVIE_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie' _id == '${id}']{ _id, "cast" : castMembers[]{ "ref": person._ref, characterName, "name": person-name, "image": person-image.asset-url } , "crew" : crewMembers[]{ "ref": person._ref, department, job, "name": person-name, "image": person-image.asset-url } , "overview": { "text": overview[0].children[0].text }, popularity, "poster" : poster.asset-url, releaseDate, title }[0]` ); dispatch({ type: MOVIE_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIE_FETCH_FAIL, payload: error.message }); }};const sortMoviesBy = (item, type) = async (dispatch) = { try { dispatch({ ty
Tal vez te puede interesar:
- Creación de su propia biblioteca de validación de React: las características (Parte 2)
- Introducción a Quasar Framework: creación de aplicaciones multiplataforma
- Creación de un componente web retro que se puede arrastrar con iluminación
- Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta
Creación de una aplicación web con React, Redux y Sanity.io
Comenzando con Sanity.io #Comunicación bidireccional Sanity-React #Configurar y conectar Redux a nuestra aplicación #Introducción al lenguaje GROQ de Sanity
programar
es
https://aprendeprogramando.es/static/images/programar-creacion-de-una-aplicacion-web-con-react-1085-0.jpg
2025-01-15

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente