Explore Lightning Components in the Force.com IDE | Force.com IDE Developer Guide

Enable My Domain in Your Development Org
For security purposes, Lightning components require you to define a custom Salesforce domain name for your org. Setting up a new domain is simple, but it takes a few minutes before it’s available for use. When you enable My Domain, references and links to Lightning resources are in the format https://yourDomain.lightning.force.com. Use a Developer Edition org for this exercise.

Create an Apex Controller Class in the Force.com IDE
Create a class to access data from contacts.

Create a Lightning Component Bundle in the Force.com IDE
A Lightning component is a combination of markup, JavaScript, and CSS. Create a Lightning component bundle that contains these files.

Add an Event Handler in the Force.com IDE
The event handler calls your myAction function when the handler is initialized and retrieves a list of contacts.

Create a Lightning Application in the Force.com IDE
Render and preview your contact list in a Lightning application.

Customize Your Style Sheet in the Force.com IDE
A Lightning component can specify its own cascading style sheet (CSS). The .css file is included when you create a component bundle in the Force.com IDE.

Wrap Up Your Exploration of Lightning Components in the Force.com IDE
You’ve now learned how to create a Lightning component that renders a list of contacts from your org. You created an Apex controller class, and then added a Lightning component and an event handler. You rendered the list of contacts in the component, both with and without pizazz. What’s next?