# Introduction

![](https://932471912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF6zN1P64C9htwOiwl0%2Fuploads%2FaRSv2PwAVcMJJSkKFDA7%2Freactive_logo_white_bg.svg?alt=media\&token=ae8ddab9-df96-4a10-a472-a3ae3f48cd7c)

## Getting Started

**Reactive** aims to provide concise, intuitive way of writing react applications with high performance, embracing a reactivity system and mutations. By taking advantage of reactivity, it also introduces a new way of creating functional components addressing many of the mental complexity brought by functional components with hooks api.

That means no useEffect, no useMemo/useCallback no useState and no redundant repeated renders!!

**Reactive** is based on a reactivity system. It tracks mutations on a reactive data, making sure only necessary components are re rendered, which eventually leads to a highly optimized application out of the box without worrying about pure components, memoization or immutability.

**Reactive** also introduces a new but familiar way of defining components ([component](https://kutlugsahin.gitbook.io/re-active/reactive-components/component)) heavily inspired by Vue 3 composition API. As a matter of fact, reactivity system is based on [@vue/reactivity](https://v3.vuejs.org/api/basic-reactivity.html) package which is a very light library powering Vue3. It's also standalone and completely decoupled with Vue.js.

### Installation

```javascript
npm i @re-active/react
```

### Example

```tsx
import { computed, component, reactive } from '@re-active/react';

export const UserCard = component(() => {
  const user = reactive({
    name: 'John',
    lastName: 'Doe',
  });

  const fullName = computed(() => `${user.name} ${user.lastName}`);

  return () => (
    <div>
      <h2>Welcome {fullName.value} !</h2>
      <label>
        Name:
        <input
          value={user.name}
          onChange={(e) => (user.name = e.target.value)}
        />
      </label>
      <label>
        LastName:
        <input
          value={user.lastName}
          onChange={(e) => (user.lastName = e.target.value)}
        />
      </label>
    </div>
  );
});
```