lwc recipes
1.0.0
Una colección de ejemplos de código fáciles de digerir para componentes web Lightning. Cada receta demuestra cómo codificar una tarea específica en la menor cantidad de líneas de código posible siguiendo las mejores prácticas. Un enlace "Ver código fuente" lo lleva directamente al código en GitHub. Desde "Hello World" hasta el acceso a datos y bibliotecas de terceros, ¡hay una receta para eso!
Obtenga más información sobre esta aplicación completando el Inicio rápido: explore el proyecto Trailhead de la aplicación de muestra de recetas de LWC o viendo este breve video de presentación.
Esta aplicación de muestra está diseñada para ejecutarse en Salesforce Platform. Si desea experimentar Lightning Web Components en cualquier plataforma, visite https://lwc.dev y pruebe nuestra aplicación de muestra Lightning Web Components LWC Recipes OSS.
Instalación de la aplicación usando una organización Scratch: esta es la opción de instalación recomendada. Utilice esta opción si es un desarrollador que desea experimentar la aplicación y el código.
Instalación de la aplicación usando un paquete desbloqueado: esta opción permite que cualquiera experimente la aplicación de muestra sin instalar un entorno de desarrollo local.
Instalación de la aplicación mediante una organización Developer Edition o un Trailhead Playground: útil al abordar las insignias de Trailhead o si desea implementar la aplicación en un entorno más permanente que una organización Scratch.
Instrucciones de instalación opcionales
recorridos de código
Configure su entorno. Siga los pasos del Inicio rápido: proyecto Trailhead de componentes web Lightning. Los pasos incluyen:
Habilite Dev Hub en su Trailhead Playground
Instalar la CLI de Salesforce
Instalar código de Visual Studio
Instale las extensiones de Visual Studio Code Salesforce, incluida la extensión Lightning Web Components
Si aún no lo ha hecho, autorice su organización central y proporciónele un alias ( myhuborg en el siguiente comando):
sf org login web -d -a myhuborg
Clona el repositorio lwc-recipes:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Cree una organización borrador y proporciónele un alias ( lwc-recipes en el siguiente comando):
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
Inserte la aplicación en su organización borrador:
sf project deploy start
Asigne el conjunto de permisos de recetas al usuario predeterminado:
sf org assign permset -n recipes
Importar datos de muestra:
sf data tree import -p ./data/data-plan.json
Abra la organización borrador:
sf org open
En Configuración , en Temas y marca , active el tema Recipes Lite o Recipes Blue .
En el Iniciador de aplicaciones, haga clic en Ver todo y luego seleccione la aplicación LWC .
Siga este conjunto de instrucciones si desea implementar la aplicación en un entorno más permanente que una organización Scratch o si no desea instalar las herramientas de desarrollo local. Puede utilizar organizaciones sin seguimiento de fuentes, como una organización gratuita Developer Edition o Trailhead Playground.
Asegúrese de comenzar desde un entorno completamente nuevo para evitar conflictos con cualquier trabajo anterior que haya realizado.
Inicie sesión en su organización
Haga clic en este enlace para instalar el paquete desbloqueado de Recetas en su organización.
Seleccione Instalar para todos los usuarios
Importar datos de cuentas y contactos:
Haga clic aquí para acceder al archivo Cuentas-Contactos.csv . Haga clic derecho en la ventana del navegador y guarde el archivo como Accounts-Contacts.csv .
En Configuración , escriba Importación de datos en el cuadro Búsqueda rápida y haga clic en Asistente de importación de datos .
Haga clic en Iniciar asistente .
Haga clic en Cuentas y contactos y haga clic en Agregar nuevos registros .
Arrastre el archivo Accounts-Contacts.csv que acaba de guardar al área de carga.
Haga clic en Siguiente , Siguiente e Iniciar importación .
Si está intentando realizar el Inicio rápido en Trailhead, este paso es obligatorio; de lo contrario, omita:
Vaya a Configuración > Usuarios > Conjuntos de permisos .
Haga clic en recetas .
Haga clic en Administrar asignaciones .
Verifique su usuario y haga clic en Agregar asignaciones .
En Configuración , en Temas y marca , active el tema Recipes Lite o Recipes Blue .
En el Iniciador de aplicaciones, haga clic en Ver todo y luego seleccione la aplicación LWC Recipes .
Siga este conjunto de instrucciones si desea implementar la aplicación en un entorno más permanente que una organización Scratch. Esto incluye organizaciones sin seguimiento de fuentes, como una organización gratuita Developer Edition o Trailhead Playground.
Asegúrese de comenzar desde un entorno completamente nuevo para evitar conflictos con trabajos anteriores que haya realizado.
Clona este repositorio:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Autorice su organización Trailhead Playground o desarrollador y proporciónele un alias ( mydevorg en el siguiente comando):
sf org login web -s -a mydevorg
Ejecute este comando en una terminal para implementar la aplicación.
sf project deploy start -d force-app
Asigne el conjunto de permisos recipes al usuario predeterminado.
sf org assign permset -n recipes
Importe algunos datos de muestra.
sf data tree import -p ./data/data-plan.json
Si su organización aún no está abierta, ábrala ahora:
sf org open -o mydevorg
En Configuración , en Temas y marca , active el tema Recipes Lite o Recipes Blue .
En el Iniciador de aplicaciones, seleccione la aplicación LWC .
Este repositorio contiene varios archivos que son relevantes si desea integrar herramientas modernas de desarrollo web en sus procesos de desarrollo de Salesforce o en sus procesos de integración/implementación continua.
Prettier es un formateador de código que se utiliza para garantizar un formato coherente en toda su base de código. Para usar Prettier con Visual Studio Code, instale esta extensión desde Visual Studio Code Marketplace. Los archivos .prettierignore y .prettierrc se proporcionan como parte de este repositorio para controlar el comportamiento del formateador Prettier.
Advertencia La versión actual del complemento Apex Prettier requiere que instale Java 11 o superior.
ESLint es una popular herramienta de linting de JavaScript que se utiliza para identificar errores de estilo y construcciones erróneas. Para usar ESLint con Visual Studio Code, instale esta extensión desde Visual Studio Code Marketplace. El archivo .eslintignore se proporciona como parte de este repositorio para excluir archivos específicos del proceso de linting en el contexto del desarrollo de componentes web Lightning.
Este repositorio también viene con un archivo package.json que facilita la configuración de un gancho de confirmación previa que aplica el formato y el linting del código ejecutando Prettier y ESLint cada vez que git commit .
Para configurar el gancho de confirmación previa de formato y linting:
Instala Node.js si aún no lo has hecho
Ejecute npm install en la carpeta raíz de su proyecto para instalar los módulos ESLint y Prettier (Nota: los usuarios de Mac deben verificar que las herramientas de línea de comandos de Xcode estén instaladas antes de ejecutar este comando).
Prettier y ESLint ahora se ejecutarán automáticamente cada vez que realice cambios. La confirmación fallará si se detectan errores de linting. También puede ejecutar el formateo y el linting desde la línea de comandos usando los siguientes comandos (consulte package.json para obtener la lista completa):
npm run lint npm run prettier
Code Tours son recorridos guiados que le ayudarán a comprender mejor el código de la aplicación. Para poder ejecutarlos, instale la extensión CodeTour VSCode.
