Extracting components in React

ES6 introduces classes and inheritance to the language whereas in ES5 it does not possess them, it makes the difference between the definition of a React component in ES5 and ES6, although in both cases they are doing the same thing semantically (defining a component), technically React does two very different things, in ES5 you are using a React .createComponent function that receives an object where you provide the implementation of the base methods together with your own methods of the new React component, this method .createCompnent is responsible for manufacturing the component for you while in ES6 if you are using classes and inheritance to create a Component.

Now to make this clear, both this function

function User(props) {
    return (<li>{props.userName}</li>);
}

and this code snippet

User: function(props) {
    return (<li>{props.userName}</li>);
}

they are not equivalent nor does one replace the other by strictly speaking regarding ES6 and ES5, but speaking of React they are close.

Here is an example of creating a React component in ES5

const MiModal = React.createClass(
  {
    render: function() {
      return (
        <div>Mi Modal.</div>
      );
    }
  }
);

As I mentioned in ES5 there are no classes or inheritance therefore several libraries provide their own mechanism to emulate them, all these libraries implement the mechanism factory pattern to emulate inheritance.

In React's case this mechanism ( factory pattern ) is exposed by the createClass function, it receives an object where you "overwrite" and define your own methods, but what you send is a object (key -> value), therefore this snippet of code that you write.

User: function(props) {
    return (<li>{props.userName}</li>);
}

is a fragment of the definition of an object.

{
  User: function(props) {
      return (<li>{props.userName}</li>);
  }
}

object that in React is used as parameter of the method manufactures .createClass so that this manufactures the component.

const MiModal = React.createClass(
  {
    render: function() {
      return (
        <div>Mi Modal.</div>
      );
    },

    User: function(props) {
      return (<li>{props.userName}</li>);
    }
  }
);

If you want to call this "method" of the MiModal component, you must do it this way, inside the component (you can call the function outside the component but I can not see it.)

const MiModal = React.createClass(
  {
    render: function() {
      return (
        <div>
          <h1>Cuenta.</h1>
          <ul>
            {this.User(this.props)}
            <li>Cerrar Sesión.</>
          </ul>
        </div>
      );
    },

    User: function(props) {
      return (<li>{props.userName}</li>);
    }
  }
);

If you want to do it in ES6 because the thing is much easier, here the language supports classes and inheritance therefore everything is simplified syntactically and is more natural.

class MiModal extends React.Component {
  ...
  render(){
    return (
        <div>
          <h1>Cuenta.</h1>
          <ul>
            {this.User(this.props)}
            <li>Cerrar Sesión.</>
          </ul>
        </div>
      );
    }
  }

  User = (props) => {
    return (<li>{props.userName}</li>);
  }
}

After the explanation I can point out the confusions that I can notice in your question.

1- In your first code snippet

function User(props) {
    return (<li>{props.userName}</li>);
}

You can use it in a component in this way.

function User(props) {
    return (<li>{props.userName}</li>);
}

const MiModal = React.createClass(
  {
    render: function() {
      return (
        <div>
          <h1>Cuenta.</h1>
          <ul>
            <User {...this.props} />
            <li>Cerrar Sesión.</>
          </ul>
        </div>
      );
    }
  }
);

also does not correspond to the definition of a method of a class in ES6 but you can still use it.

function User(props) {
    return (<li>{props.userName}</li>);
}

class MiModal extends React.Component {
  ...
  render(){
    return (
        <div>
          <h1>Cuenta.</h1>
          <ul>
            <User {...this.props} />
            <li>Cerrar Sesión.</>
          </ul>
        </div>
      );
    }
  }
}

In ES6 there is a feature called Method Properties that allows you to define the methods of an object such as:

obj = {
    foo (a, b) {
        …
    },
    bar (x, y) {
        …
    },
    *quux (x, y) {
        …
    }
}

With the equivalent in ES6:

obj = {
    foo: function (a, b) {
        …
    },
    bar: function (x, y) {
        …
    },
    //  quux: no equivalent in ES5
    …
};

Keep in mind that this is only valid when you list the properties of an object.

Now, about the JSX notation that allows us to expand a component as if it were HTML, consider that the equivalent to

<User user={props.user} />

It's:

React.createElement(User, { user: props.user });

Remember that JSX is not JS and requires compilation. You can try the compiler online here .