DEV Community

Truong Hoang Dung
Truong Hoang Dung

Posted on

2 3

What does a UI Component mean, finally ?

I need to clarify myself some terminologies that i found too ambigous, or useless to apply in daily programming, some of them is: UI, Component, Behaviour, View, Model.

I could describe a Component as:

Component = function(behavior, view)

What does behavior mean ?

behavior = function(props) -> model

Yes, a behavior is a function, which receives props as input, and return a model

A model in this case is just any data structure.

What does a view mean ?

view = function(model) -> UI

A view is a function which receives a model and returns a UI .

UI means User Interface, is what a user could see, feel and interact with.

Example:

Let's make a Counter component with React and Hooks !

This is the makeComponent, which receives a behavior, a view and returns a Component

import React from 'react'

const Component = ({behavior, view, ...rest}) => {
  const props = behavior(rest)
  const View = view
  return <View {...props} />
}
const makeComponent = (behavior, view) => {
  return (props) => <Component {...props} behaviour={behaviour} view={view} />
}

export default makeComponent

The Counter behavior:

import {useState, useCallback} from 'react'

const behavior = ({initialCount}) => {
  const [count, setCount] = useState(initialCount)
  const increment = useCallback(() => setCount(count + 1))
  const decrement = useCallback(() => setCount(count - 1))
  return {initialCount, count, increment, decrement}
}

The Counter view:

const view = ({initialCount, count, increment, decrement}) => {
  return (
    <div>
        <button onClick={increment}>+</button>
        <div>Current count: {count}</div>
        <button onClick={decrement}>-</button>
    </div>
  )
}

Finally, let's make a Counter component:

const Counter = makeComponent(behavior, view)

React.render(<Counter initialCount={0} />, body)

Voilla, i got a clean React component !

But, is this MVC ?

Yes ! The behavior is exactly what does a controller mean.

So, is a Component the same as MVC ?

No ! Component has only two arguments: The V and the C, there's no M.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (1)

Collapse
 
dance2die profile image
Sung M. Kim

Thanks Truong~
Great insight on MVC as I used to consider React to be just a view library.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay