Basics
Borrowing from React, Near Components use hooks such as useState and useEffect to handle the state's logic, and props to receive parameters.
Near Components are stored in the blockchain, for which you will use the NEAR VM to retrieve and execute them in the browser.
Using a VM enforces components to be sandboxed, making them very secure since they cannot access your LocalStorage or other elements in the page they are incorporated to. However, because of this, components cannot import external libraries. However, they can import functions from other components.
State
To handle the component's state you can use useState hook. The useState hook returns a tuple of two values: the current state and a function that updates it.
Each time a state variable is updated, the component will be re-rendered. This means that the whole code will run again.
Props
Each component has access to a local variable named props which holds the properties received as input when the component is composed.
useEffect Hook
The useEffect hook is used to handle side effects. It will execute each time one of the dependencies changes.
Import
Components can import functions from other components. This is useful to reuse code and to create libraries of components.
Where the code of the Math component is:
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
return { add, multiply };
