Understanding React Higher-Order Components

A HOC is a function that takes a Component as one of its parameters and enhances that component in some way.

If HOCs create a new enhanced component, can it be possible not to pass in any component as argument at all?

Nope, then it wouldn't be a HOC, because one of the conditions is that they take a component as one of the arguments and they return a new Component that has some added functionality.

In an example such as this, which is the higher order component, the Button or the EnhancedButton.

EnhanceButton is the HOC and FinalButton is the enhanced component.

I tried creating one HOC like this: ... Running this does not show the HOC, only the div

That's because your createSetup function is not a HOC... It's a function that returns a component, yes, but it does not take a component as an argument in order to enhance it.

Let's see an example of a basic HOC:

const renderWhen = (condition, Component) =>  props => condition(props)    ? <Component {...props} />    : null);

And you could use it like this:

const EnhancedLink = renderWhen(({invisible}) => !invisible, 'a');

Now your EnhancedLink will be like a a component but if you pass the property invisible set to true it won't render... So we have enhanced the default behaviour of the a component and you could do that with any other component.

In many cases HOC functions are curried and the Component arg goes last... Like this:

const renderWhen = condition => Component =>  props => condition(props)    ? <Component {...props} />    : null);

Like the connect function of react-redux... That makes composition easier. Have a look at recompose.

In short, If you assume functions are analogues to Components, Closure is analogous to HOC.

Try your createSetup.js with:

const createSetup = options => <p>{options.name}</p>;

and your main.js

const comp = createSetup({ name: 'name' });render((<div>{comp}</div>),  document.getElementById('root'));