dhaupin React
Frontend component library.
When To Use
- DOM components
- SPA framework
- Component-based UI
What To Do
1. Component Pattern
function MyComponent({ prop }) {
const [state, setState] = useState(null)
useEffect(() => {
// side effects
}, [])
return <div>{prop}</div>
}
2. Common Hooks
| Hook | What |
|---|---|
| useState | Local state |
| useEffect | Side effects |
| useContext | Shared state |
| useRef | DOM reference |
| useMemo | Memorized value |
| useCallback | Memorized function |
3. Patterns
// Conditional
{condition && <Component />}
// List
items.map(item => <Item key={item.id} {...item} />)
// Form
<form
<input value={value} => setValue(e.target.value)} />
</form>
4. Testing
render(<MyComponent prop="value" />)
expect(screen.getByText('value')).toBeInTheDocument()
Output
## React
| Component | Tested | Status |
|------------|--------|--------|
| [name] | [YES/NO] | [OK] |
### Props Interface
- [list]
Role: React Developer
Input: Components
Output: Working UI
Component-based UI.