En este artículo, vamos a aprender cómo podemos agregar un lienzo de dibujo en ReactJs. React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.
Enfoque: para agregar nuestro lienzo, vamos a usar el paquete react-canvas-paint. El paquete react-canvas-paint nos ayuda a integrar el lienzo de dibujo en nuestra aplicación. Primero, instalaremos el paquete react-canvas-paint y luego agregaremos un lienzo en nuestra página de inicio.
Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:
npx create-react-app gfg
Instale el paquete requerido: ahora instalaremos el paquete react-canvas-paint usando el siguiente comando:
npm i react-canvas-paint
Estructura del proyecto: Se verá así.
Agregar el lienzo de dibujo: después de instalar el paquete, podemos agregar fácilmente un lienzo en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar un lienzo a nuestra página de inicio.
Agregue el siguiente contenido en el archivo App.js :
Javascript
import React from "react"; import ReactCanvasPaint from 'react-canvas-paint' import 'react-canvas-paint/dist/index.css' export default function DrawingCanvasGfg(){ return ( <div> <h1>ReactJs Drawing Canvas - GeeksforGeeks</h1> <ReactCanvasPaint /> </div> ); };
Explicación: en el ejemplo anterior, primero estamos importando el componente ReactCanvasPaint y luego estamos usando el componente instalado en una nueva función para agregar nuestro lienzo de dibujo.
Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.
npm start
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA