Let's dive in!
You should now see the EDIT page of your newly created component. This is where you can edit things like the component's description, it's inputs & outputs, and the actual script it runs. Normally, we would be interested in the component's specification (the SPEC tab), but in the case of jQuery this isn't necessary. Go ahead and navigate to the spec to see what I mean.
So, there is no need to add jQuery! You've already got it!
Since jQuery is already set up as a dependency, let's edit the script and test your component in a xap to make sure that everything is working as expected.
First, open your component's script by clicking on the SCRIPT tab on the left-hand side of the screen. This is your component's script. This is where you write the code to give life to your component and have it do something awesome.
In the script, you'll see a method called doSomething. We are going to ignore that for now. Instead, turn your attention to the _init method. This method gets fired when your xap loads the component and initializes it. We're going to write our code here so it happens immediately when we add our component to our xap in the next step.
In the _init method add the following:
let $ = this.api.imports.$; let element = $(this.api.layoutElement); element.html("Hello, jQuery!");
This is a simple "Hello, World" example of using jQuery to show that we can use it in our component. The first line accesses our imports (or dependencies) via the name we give it in the spec file. In this case, jQuery has the name $ assigned to it. Then, we use jQuery to get our component's top-level DOM element. In the spec file you will notice that our layout element is defined in the layoutSpec section, and by default, it has a class of my-comp. Thus, we could have also used:
let element = $('.my-comp');
Finally, the last line uses jQuery's html method to modify the inner HTML of our DOM element to say "Hello, jQuery!" This is a very simple example, but it shows that you, as a developer, have access to a very powerful and feature-rich library right out of the gate!
Now let's see it in action!
Using Our Component
Time to see the fruits of our labor! Go back to your studio and click the "+" button again, but this time select "xap." This will bring you directly to the DATAFLOW section of the Studio.
From here, add your component to the DATAFLOW.
Then go to PREVIEW and you will see your "Hello, jQuery!" message. Beautiful, isn't it?
That's it! You've successfully created a jQuery component! Use your newfound powers wisely.