Introduction

Use AgileTs with React and React-Native

❓ react

The react package is an Integration of AgileTs into React. Its main task is to bind States to React Components. This binding ensures that AgileTs rerender the Component, whenever a bound State mutates. It also offers some other useful functions that optimize the workflow with AgileTs in a React Environment.

A distinction is made between Functional and Class Components, as we prefer using React Hooks in Functional Components. But Hooks aren't supported in Class Components, so we came across other solutions, to offer the same features there too.

🐆 Functional Component

In Function Components we recommend using AgileTs Hooks like useAgile, which allows us to bind any State to our React Component

// -- myComponent.jsx ------------------------------------------

// Binds MY_FIRST_STATE to myComponent

const myFirstState = useAgile(MY_FIRST_STATE);

To find out more about useAgile, and other Hooks provided by AgileTs, checkout the AgileTs Hook docs.

🦖 Class Component

In Class Component we currently only support the AgileHOC, which helps us binding States to our Component. It is a Higher order Component that gets wrapped around our React Component.

// -- myComponent.jsx ------------------------------------------

// Binds MY_FIRST_STATE to myComponent

export default AgileHOC(myComponent, [MY_FIRST_STATE]);

To find out more AgileTs in Class Components, checkout the AgileHOC docs.

🚀 Quick Links

• useAgile
• useEvent
• AgileHOC