How to create a lwc component
Topics
To create a new lightning web components, open visual studio code editor and follow the steps below:
- Open your sfdx command prompt by pressing on CTRL/Command + SHIFT + P together and enter lightning on the prompt.
- Choose SFDX: Create lightning web components from the dropdown.
- Enter a name for your component, e.g helloWorld. The component name must start with a lowercase letter.
- Choose the default path for the component directory to continue.
The visual studio code will now create an lwc component with three files and a __tests__ folder. The __tests__ will contain unit tests for the component.
- Html
- Javascript
- Metadata
Html file
The HTML file within an LWC component defines its user interface (UI), determining what users see on the screen when the component renders. This includes various HTML elements such as headings, paragraphs, input fields, buttons, images, and more. HTML tags are the building blocks for LWC components.
Javascript file
Every lwc component must include a javascript file.JavaScript files in Lightning web components are ES6 modules. The javascript file defines the interactivity for the HTML elements.
The javascript file helps in:
- Responding to user events like button clicks, entering values in text fields etc.
- Submit html forms to salesforce org.
- Retrieve data from salesforce org to your lwc component using salesforce platform API's.
Metadata/configuration file
Every component must have a configuration file.The configuration file includes the api version,supported targets, the design configuration for Lightning App Builder and Experience Builder.
Click here to see the full configurations for lwc components.
Completing your hello world lwc component
To display a hello world text in your component, just add the following lines of code in your component created from the above step.
//helloWorld.html
<template>
<p>Hello World!</p>
<template>