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:

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>"
```
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>"
```

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>"

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>"

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>"

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

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.
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.
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.
Control Flow: Aurora provides control flow constructs like conditionals and loops to render content conditionally and iterate over lists.
Event Handling: You can define event handlers within Aurora components to respond to user interactions like clicks, keypresses, etc.
State Management: Aurora components can maintain internal state using class variables. Changes to the state trigger re-renders, updating the UI.
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:

Todo List Application: A simple todo list application demonstrating data binding, event handling, and state management.
Weather App: An application that fetches weather data from an API and displays it using Aurora components.
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.

NextTutorial : Tic-Tac-Toe

Last updated 1 year ago