# Quick Start

{% hint style="info" %}
**Good to know:** A quick start guide can be good to help folks get up and running with your Library in a few steps. Some people prefer diving in with the basics rather than meticulously reading every page of documentation!
{% endhint %}

## Requirements

Before you start using ReqEase, ensure you meet the following requirements:

* **JQuery ^3.7.0 :** ReqEase relies on jQuery for DOM manipulation and event handling. Make sure jQuery is included in your project.
* **Bootstrap ^4.2.1 : (not always),** ReqEase releis on Bootstrap when using modals or toasts. 

{% hint style="warning" %}
**Bootstrap** is *required* only if the `useReadyModal was setted to` 'bootstrap' . otherwise you can skip it.

learn more about it in [Modals](https://hichemtech.gitbook.io/reqease-docs/reference/reference).
{% endhint %}

## Installation

Before diving into ReqEase, you'll need to include it in your project. Here are a couple of ways to do it:

### Using Package Manager

If you're working in a Node.js environment or using a build tool like Webpack, you can easily include ReqEase in your project using npm:

```bash
npm install @reqease/reqease
```

Once installed, you can import ReqEase into your JavaScript or TypeScript code:

```javascript
import ReqEase from '@reqease/reqease';
```

### Including the Script Directly

Alternatively, you can include ReqEase directly in your HTML file using a script tag:

**From CDN:**

```html
<script src="https://cdn.jsdelivr.net/gh/ReqEase/ReqEase@1.0.0/dist/reqease.min.js"></script>
```

**From Local download:**

```html
<script src="path/to/reqease.min.js"></script>
```

Now that ReqEase is part of your project, let's see how you can use it to simplify your web interactions.

## Basic Usage

To give you a quick overview, let's look at a basic example of using ReqEase. Suppose you have a simple `HTML form`:

```html
<form id="myForm" method="POST" action="/login">
    <input type="text" name="username" required>
    <input type="password" name="password" required>
    <button type="submit">Submit</button>
</form>
```

With ReqEase, you can streamline the process of making an HTTP POST request when this form is submitted. Here's how you can do it:

```javascript
const form = document.getElementById('myForm');
const reqease = new ReqEase({
    form,
});
```

Or you can use the ReqEase JQuery plugin:

```javascript
const reqease = $("#myForm").ReqEase();
```

In this basic example, **ReqEase** simplifies the process of handling form submissions. It automatically looks for a `submit` button or a button with the `#okBtn` id and listens for clicks. When triggered, **ReqEase** initiates the complete cycle, which includes input validation, making an HTTP request, and rendering the response.

ReqEase is highly flexible and customizable. In this quick start, it auto-detects the request URL and method from the form's attributes. However, you can specify these details in the options, as we will explore in more detail in the next sections.

This quick start provides a glimpse of ReqEase's capabilities. In the following sections, we'll dive deeper into its features and explore advanced use cases.

## Server-side responses

ReqEase seamlessly integrates with various backend libraries to handle responses from HTTP requests. These libraries simplify the process of creating and rendering responses compatible with ReqEase.

{% tabs %}
{% tab title="json" %}

```json
{
    version: '1.0.0',
    httpCode: 200,
    type: 'big',
    content: {
        title: 'Congratulation',
        body: 'Your have logged in.'
    },
    color: 'success',
    icon: 'fas fa-check',
    buttons: [
        {
            text: 'OK',
            action: {
                actionType: 'redirect',
                url: 'https://example.com/profile'
            },
            color: 'success'
        }
    ]
}
```

{% endtab %}

{% tab title="PHP" %}

```php
use HichemtabTech\ReqEase\ResponseBuilders\ButtonsBuilder;
use HichemtabTech\ReqEase\ResponseBuilders\MessageContent;
use HichemtabTech\ReqEase\ResponseBuilders\MessageResponseType;
use HichemtabTech\ReqEase\ReqEase;

$phpResponse = ReqEase::createMessageResponse()
    ->setContent(
        new MessageContent(
            'Message Title',
            'Your custom message content here.'
        )
    )
    ->setButtons(
        ButtonsBuilder::addCancelButton("Cancel")
        ->addRedirectButton('https://example.com')
    )
    ->setType(MessageResponseType::BIG)
    ->setHttpCode(200)
    ->setColor('green')
    ->setTimestamp(time())
    ->build();
$phpResponse->send();
```

see ho to install [ReqEase-php](https://hichemtech.gitbook.io/reqease-docs/server-side/reqease-php#installation).
{% endtab %}

{% tab title="Laravel" %}

#### <mark style="color:yellow;">Coming soon</mark>

{% endtab %}

{% tab title="Python" %}

#### <mark style="color:yellow;">Coming soon</mark>

{% endtab %}

{% tab title="Java" %}

#### <mark style="color:yellow;">Coming soon</mark>

{% endtab %}
{% endtabs %}

These backend libraries allow you to create structured responses that **ReqEase** can seamlessly render. For more details on working with backend libraries, refer to the next sections.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hichemtech.gitbook.io/reqease-docs/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.