react-vac v0.3.0
react-vac (prototype)
This component is a debugging tool that helps you develop components without View(JSX). It provides an optimal solution for VAC Pattern development.
Install
npm install react-vac --save-dev
or
yarn add react-vac --dev
Usage
VAC Debugger
analyzes Props Object
and then constructs UI for debugging.
See [VAC Debugger Usage] for more details.
import { VAC } from "react-vac";
const ExampleView = () => {
// props object of VAC
const viewComponentProps = {
// properties
value: "test value",
someValue: { foo: "var" },
// callbacks
onClick: (event) => console.log("click!"),
onSomeEvent: (event) => console.log("onSomeEvent!"),
};
// VAC Debugger
return <VAC name="Dummy View" data={viewComponentProps} />;
// real VAC
// return <ViewComponent {...viewComponentProps} />
};
Development Process (for View Asset Component)
View Asset Component
View Asset Component(VAC
) is a rendering component to manage JSX and Style, and is isolated from UI functionality or business logic.
VAC Features
- It only performs processes related to rendering, such as iterative creation, conditional exposure, and style control.
- It is a stateless component that does not change its View by itself. Only controlled by props of component.
- It does not do any additional processing when binding the callback function to the component's element event.
VAC Pattern
Step1
Create a component to develop, then define a Props Object
and enter it into the data
property of VAC Debugger
.
const SpinBoxUI = () => {
// props object of VAC
const spinBoxViewProps = {};
// VAC Debugger
return <VAC name="SpinBoxView" data={spinBoxViewProps} />;
// VAC to be developed
// return <SpinBoxView {...spinBoxViewProps} />;
};
Step2
Develop UI functions or business logic in the component. And in the Props Object
, define properties and callback functions that are needed in VAC
.
const SpinBoxUI = () => {
const [value, setValue] = useState(0);
const add = (n) => {
setValue(value + n);
};
// props object of VAC
const spinBoxViewProps = {
value,
onIncrease: () => add(1),
onDecrease: () => add(-1),
};
// VAC Debugger
return <VAC name="SpinBoxView" data={spinBoxViewProps} />;
};
Step3
Develop VAC
by checking the properties defined in the Props Object
.
const SpinBoxView = ({ value, onIncrease, onDecrease }) => (
<div>
<button onClick={onDecrease}> - </button>
<span>{value}</span>
<button onClick={onIncrease}> + </button>
</div>
);
Step4
Apply VAC
to the component.
const SpinBoxUI = () => {
const [value, setValue] = useState(0);
const add = (n) => {
setValue(value + n);
};
// props object of VAC
const spinBoxViewProps = {
value,
onIncrease: () => add(1),
onDecrease: () => add(-1),
};
// VAC
return <SpinBoxView {...spinBoxViewProps} />;
// VAC Debugger
//return <VAC name="SpinBoxView" data={spinBoxViewProps} />;
};
Examples
Demo
Codes
Changelog
License
MIT © Park U-yeong