Quick Start

Welcome to the Aurora documentation! This page will give you an introduction to the 80% of Aurora concepts that you will use on a daily basis.

Quick Start

Installation

To start using Aurora, you need to have it installed on your system. You can install Aurora via pip:

bashCopy codepip install aurora-lang

Getting Started

Let's dive into the basic concepts of Aurora:

1. Creating and Nesting Components: Components are the building blocks of Aurora applications. You can define components using the component keyword and nest them within each other to create complex UI structures.

   pythonCopy codecomponent Button:
       def render(self):
           return "<button>Click me</button>"
   
   component App:
       def render(self):
           return "<div><Button/></div>"

2. Adding Markup and Styles: You can add markup directly within the render method using HTML-like syntax. Additionally, you can include styles using the style attribute.

   pythonCopy codecomponent Card:
       def render(self):
           return "<div style='background-color: #f0f0f0; padding: 20px;'>Card content</div>"

3. Displaying Data: Aurora allows you to display dynamic data by using curly braces {} within the markup. You can bind data directly from the component's state or props.

   pythonCopy codecomponent UserInfo:
       def __init__(self, props):
           self.props = props
       
       def render(self):
           return f"<div>{self.props['name']}</div>"

4. Rendering Conditions and Lists: You can render content conditionally and iterate over lists using Aurora's control flow features.

   pythonCopy codecomponent ConditionalRendering:
       def __init__(self):
           self.show_message = True
       
       def render(self):
           if self.show_message:
               return "<div>Show this message</div>"
           else:
               return "<div>Don't show this message</div>"

5. Responding to Events and Updating the Screen: Aurora allows you to handle events like clicks and updates the UI accordingly. You can define event handlers within the component.

   pythonCopy codecomponent Counter:
       def __init__(self):
           self.counter = 0
       
       def increment(self):
           self.counter += 1
           self.render()
       
       def render(self):
           return f"<button onclick='{self.increment}'>Clicked {self.counter} times</button>"

6. Sharing Data Between Components: You can share data between components by passing props from parent to child components.

   pythonCopy codecomponent Parent:
       def render(self):
           return "<Child message='Hello from parent'/>"
   
   component Child:
       def __init__(self, props):
           self.props = props
       
       def render(self):
           return f"<div>{self.props['message']}</div>"

These are the fundamental concepts of Aurora that you'll be using frequently. Let's dive deeper into each concept to understand them better.

Concepts

1. Components: Components are the building blocks of Aurora applications. They encapsulate both the UI and the behavior of a part of the application. Components can be nested within each other to create complex UI structures.

2. Markup and Styles: Aurora allows you to write markup directly within the render method using HTML-like syntax. You can also include inline styles using the style attribute.

3. Data Binding: Aurora supports data binding, allowing you to display dynamic data within your components. You can bind data from the component's state, props, or external sources.

4. Control Flow: Aurora provides control flow constructs like conditionals and loops to render content conditionally and iterate over lists.

5. Event Handling: You can define event handlers within Aurora components to respond to user interactions like clicks, keypresses, etc.

6. State Management: Aurora components can maintain internal state using class variables. Changes to the state trigger re-renders, updating the UI.

7. Props: Props are read-only data passed from parent to child components. They allow you to share data between components in a hierarchical manner.

Example Applications

Let's explore some example applications built using Aurora to get a better understanding of its capabilities:

1. Todo List Application: A simple todo list application demonstrating data binding, event handling, and state management.

2. Weather App: An application that fetches weather data from an API and displays it using Aurora components.

3. E-commerce Website: A mock e-commerce website showcasing complex UI structures and data management.

Conclusion

Congratulations on completing the quick start guide to Aurora! You now have a solid understanding of the core concepts and features of Aurora. Feel free to explore the documentation further and start building amazing web applications with Aurora. Happy coding! 🚀

For more detailed documentation and advanced features, please refer to the official Aurora documentation available at link_to_documentation.