Quickstart

Navigate to the 'Edit Component' tab on the Navbar to view the code editors.

Code for a default button will already be placed in the editors for you, if you want to make changes or replace the button with your own custom component go ahead and code the component like normal.

Body: This editor holds everything but the code in the return statement of the component (variables, hooks, functions, etc.)

JSX: This editor holds the JSX in the return statement of the component

Here is a visual aid to show you how your component is being built from the code in the terminal

import 'some_import' from 'somewhere'
// more import statements...

const myComponent = () => {
  /**
   *
   * Body Editor Output goes here
   *
   **/
  return(
  /**
   *
   * JSX Editor Output goes here
   * 
   **/
  );
};

export default myComponent

Once you are happy with your component or just want to check your progress, press update view!

You should see your changes reflected in the component viewing area in the top half of your screen.

To save your component, just choose a name and press 'Save Component'

Congrats!, you just finished building and saving your first component with AthenaJS!

If you want to save your progress for next time remember to navigate to 'Saved Components' and press the 'Save Library' button! Your component library is now saved to your home directory (file name will be AthenaData123.json). If you want to share your component library with your friend, just send them your json and have them place it in their home directory.