A Mark-ups, JavaScript controller, a Helper, a Renderer, and other COMPONENTS make up each Lightning Component (Component Bundle). A screenshot of components in the developer console view is shown below.

The Types of Lightning Component Bundles are as follows:

• Component: Components are required while CREATING a Lightning app. Using Lightning Components, it holds the mark-up for the app design.
• Controller: This is a controller that runs on the client's SIDE. A component's events are handled by a client-side controller. Following are the uses of the Controller :
  • Controllers are required to listen to user events as well as other events such as Component Events and Application Events.
  • Allows business logic to be delegated to helper methods.
  • DML operations should not be triggered during component initialization. When we do DML in init(), we risk a CSRF (Cross-Site Request Forgery) attack.
  • In the Controller, the DOM is not changed. If we change the DOM in the controller, it will call the renderer method, which will return an error.
• Helper: The server-side controller is known as a Helper. It's typically utilised for server-side activities and data or task processing. A client-side controller or renderer can invoke Helper's java-script function. It's also included in the component set. Because Helper is shared across all components, it allows us to centralise and share functionality between Controllers and Renderers. It also makes it easier to keep the logic in Controllers and Renderers minimal. We must relocate this logic to Helper whenever we need to invoke one controller function from another controller function. Any other JavaScript in the component bundle can call helper functions. When a component runs, Lightning FRAMEWORK creates a Controller and a Renderer instance for each component, but only creates one copy of the Helper and sends the reference to the Helper into every Controller and Renderer instance.
• Renderer: The client-side controller is the renderer. It's a JavaScript resource that defines all of the component's actions and functions. When an event occurs, it may cause actions to be taken, such as changing data or calling rerender() on impacted components. The rerender() function allows components to update themselves based on other components' updates since they were last rendered. Before adding custom rerendering logic, we usually wish to expand default rerendering by invoking superRerender() from the renderer() function. The rerendering is chained to the components in the body attribute when superRerender() is called.
• Style: The component's styles are stored in CSS Styles. Click the STYLE button in the Developer Console sidebar to add CSS to a component bundle.