Creating Components

Components are the functional units of the Lightning Component framework.

A component encapsulates a modular and potentially reusable section of UI, and can range in granularity from a single line of text to an entire application.

• Component Names

  A component name must follow the naming rules for Lightning components.

• Create Aura Components in the Developer Console

  The Developer Console is a convenient, built-in tool you can use to create new and edit existing Aura components and other bundles.

• Create Aura Components Using Salesforce CLI

  To develop Aura components, use Salesforce CLI to synchronize source code between your Salesforce orgs and version control system. Alternatively, you can use the Developer Console.

• Component Markup

  Component resources contain markup and have a .cmp suffix. The markup can contain text or references to other components, and also declares metadata about the component.

• Component Bundles

  A component bundle contains a component or an app and all its related resources.

• Component IDs

  A component has two types of IDs: a local ID and a global ID. You can retrieve a component using its local ID in your JavaScript code. A global ID can be useful to differentiate between multiple instances of a component or for debugging purposes.

• HTML in Components

  An HTML tag is treated as a first-class component by the framework. Each HTML tag is translated into an <aura:html> component, allowing it to enjoy the same rights and privileges as any other component.

• CSS in Components

  Style your components with CSS.

• Component Attributes

  Component attributes are like member variables on a class in Apex. They are typed fields that are set on a specific instance of a component, and can be referenced from within the component’s markup using an expression syntax. Attributes enable you to make components more dynamic.

• Using Expressions

  Expressions allow you to make calculations and access property values and other data within component markup. Use expressions for dynamic output or passing values into components by assigning them to attributes.

• Component Composition

  Composing fine-grained components in a larger component enables you to build more interesting components and applications.

• Component Body

  The root-level tag of every component is <aura:component>. Every component inherits the body attribute from <aura:component>.

• Component Facets

  A facet is any attribute of type Aura.Component[]. Use this type as a placeholder for a block of markup. The body attribute is an example of a facet.

• Controlling Access

  The framework enables you to control access to your applications, attributes, components, events, interfaces, and methods via the access system attribute. The access system attribute indicates whether the resource can be used outside of its own namespace.

• Using Object-Oriented Development

  The framework provides the basic constructs of inheritance and encapsulation from object-oriented programming and applies them to presentation layer development.

• Best Practices for Conditional Markup

  Using the <aura:if> tag is the preferred approach to conditionally display markup but there are alternatives. Consider the performance cost and code maintainability when you design components. The best design choice depends on your use case.

• Aura Component Versioning for Managed Packages

  Aura component versioning enables you to declare dependencies against specific revisions of an installed managed package.

• Base Components with Minimum API Version Requirements

  Some Lightning base components require the custom components that use them to be set to a minimum API version. A custom component’s API version must be equal to or later than the latest API version required by any of the components it uses.

• Validations for Aura Component Code

  Validate your Aura component code to ensure compatibility with Aura component APIs, best practices, and avoidance of anti-patterns. There are several ways to validate your code. Minimal save-time validations catch the most significant issues only, while Salesforce DX tools provide more comprehensive static code analysis.

• Using Labels

  Labels are text that presents information about the user interface, such as in the header (1), input fields (2), or buttons (3). While you can specify labels by providing text values in component markup, you can also access labels stored outside your code using the $Label global value provider in expression syntax.

• Localization

  The framework provides client-side localization support on input and output components.

• Supporting Accessibility

• Writing Documentation for the Component Library

  Documentation helps developers use your components to develop their apps more effectively. You can provide interactive examples, documentation, and specification descriptions for a component, event, or interface.