What is the use of components in ReactJS instead of a single variable

Question

I started to study ReactJS and can't understand the purpose of components. for instance lets have a component:

var QuoteMaker = React.createClass({
 render: function () {
return (
  <blockquote>
    <p>
      The world is full of objects, more or less interesting; I do not wish to add any more.
    </p>
    <cite>
      <a target="_blank"
        href="#">
        Douglas Huebler
      </a>
    </cite>
  </blockquote>
);}});

why can't we just use

var thisVar = (
<blockquote>
<p>
  The world is full of objects, more or less interesting; I do not wish to    add any more.
  </p>
 <cite>
  <a target="_blank"
    href="#">
    Douglas Huebler
  </a>
</cite>
</blockquote>
)

instead of that component.

Answer 1

React allow you to get a composant approach. So you can use as a new balise text (composant) in react. You can reuse this component, it will have the same behavior everywhere.

Answer 2

You could. That would be just fine.

What you couldn't do is have a list of those, built from dynamic data. What if you wanted multiple quotes from multiple people?

What if you wanted a button that randomized which quote appeared?

What if you wanted a twitter feed, or a blog roll, or a comment section?

You don't necessarily need the createClass . That's a particularly old way of looking at things, and you should really be using a Babel build pipeline; full stop.

You can simply say:

const Quote = (props) => (
  <blockquote>
    <p>{ props.quote }</p>
    <cite >{ props.author }</cite>
  </blockquote>
);

ReactDOM.render(<Quote quote="..." author="..." />, rootEl);

Now you can happily build a randomizer, or a quote API, or a quote editor, or whatever. The component does what it should, and it leans on input from the outside world for what it shouldn't do.

Answer 3

1. Functional components

That way that you have in example can be created function, or stateless components, where we can use props object, that can be passed from the parent object.

const Component = (props) => {
    //access to props
}

2. Class component

Class components allows to store thier own state and use it to rerender the component, via this.setState() function:

class Component extends React.Component {
   constructor(props) {
      super(props);
      this.state = {};
   }
   //access to both state and props
}

Why we must use components instead of js objects? Because react has its own DOM - virtual DOM , where it listening to changes and rerendering your real DOM, you can reuse or extend this component anywhere and its also semanticly awesome.

Take a look to thedocumentation about React components.

Answer 4

There are lots of uses for components. These are few:

1. Allegedly, if your component has no logics or special use, just flat html, so can pass using component, although it is more encapsulated and looks more neat.
2. If now or in the future you'll want to use some logics for your component, so it can be handled in the component. That is the Object Oriented approach for using html block of code. If your'e coming from Angular, you can think of it as "directive", from .Net "User control". Well, not exactly, but the purpose is same.
3. Calls and uses to different libraries. It is a better practice not to require libraries as global variable, but only for your use in the component.
4. And of course the most important factor: You can take advantage of the react "digest loop". You can choose what to do on constructing, before rendering, after rendering, and much more. You can look it up here: https://facebook.github.io/react/docs/react-component.html

As i said before, there are lots of uses for components over flat html, and basically this is the whole point of ReactJS as component based :)