Hey everybody, today you will get familiar with the development environment in Wix Studio and write your very first line of code.
To open the Dev environment, click on the curly braces and then click "Start coding" to initialize the setup of your Dev environment.
The page code contains sections for:
* Front-end Dev Tools Overview
* Code for each page: Master page gives you the ability to add code that should run on every page. Below this you can add CSS, public and backend JavaScript files, and custom extensions.
* Search your codebase, access your CMS collections, import npm packages, VS Code packages and custom apps, connect to GitHub and work locally, and access a variety of other developer tools.
Now let's explore the in-editor IDE:
* This tab indicates which file you are working on.
* There is a reference to the API documentation and below that the `$w.onReady` function. This function is included on every page and is where the majority of your front-end page code will live. It indicates that your page is loaded and ready for interaction.
* To the right, there is a property and events panel. When an element is selected in the visual editor, you will have access to the element ID, default visibility, and event handlers. CSS classes are also found here. Above this panel is a button to connect to the VS code-based IDE, a run button to preview your code, a code formatter, and buttons to maximize and minimize the IDE. Now that we are acclimated, let's write some code:
* If you haven't already, add a button and a text element to the page and update the default text.
* Your first line of code will be a click event handler for the button to update the default text on your text element.
* In your `$w.onReady` function, type `$w` and the ID of your button inside the parenthesis to target the element you are writing the click handler for.
* We have an error on the ID for the button. When you add elements to the visual canvas, they will be given a default ID. A best practice is to add a meaningful ID to each element you will manipulate via code. You can see the ID for any element by clicking on it and checking the properties panel.
* Let's update the button to our preferred ID and before we continue, update the ID for the text element as well. Now you will see that you no longer have an error on your button ID.
* Now let's create a click event on the button. In the body of the click event, let's add a console log statement for testing. * Type `$w` again and this time look through the list of available IDs and pick your text element ID. Any elements in your visual canvas will have their IDs available for autocomplete.
* Now let's click on "Run" to test the code and see it in action in preview mode.
* There is a developer console at the bottom which will display your logs and error messages, and you can interact with most functionality here to ensure everything is as expected before you deploy. * As you can see, the text updates and our log shows the click interaction. * Pushing your code to your production environment on Wix Studio happens in one click with the "Publish" button. Your changes are now live. * Remember, this is just the beginning of your developer journey on Wix Studio. We're excited to see what you create next!
