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 };