CODEWITHSUNDEEP
javascriptreactjs
Mklei
Mklei

Reputation: 75

In ReactJs what is the difference between a component and an element?

I see the 2 terms being used interchangeably a alot. This has caused me a great deal of confusing, could someone please explain to me the differences?

Upvotes: 0

Views: 978

Answers (2)

devserkan
devserkan

Reputation: 17608

An element is something assigned to a JSX value:

const foo = <p>My name is foo</p>;

We can render elements into DOM with:

ReactDOM.render(foo, document.getElementById('root'));

You can create a whole app by combining different elements.

const name = "foo";
const greeting = (
    <div>
        <h1>Hello, {name}</h1>
        <p>Welcome!</p>
    </div>
);
    
ReactDOM.render(greeting, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Of course without flexibility and some other advantages like state and life cycle methods it will be sure very hard to write a whole app. So, this is why we have components.

A component is a function which returns JSX element or element compositions.

const Greeting = ( props ) => (
    <div>
        <h1>Hello, {props.name}</h1>
        <p>Welcome!</p>
    </div>
);

ReactDOM.render(
  <Greeting name={"foo"} />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

So, components actually are functions optionally taking props and return elements. The above code is an example for "functional components". To use state and life cycle methods we have to use "class components".

class Greeting extends React.Component {
  state = {
    name: "",
  }
  
  getName = () => new Promise( resolve =>
    setTimeout( () => resolve( "foo" ), 1000 )
  );
  
  componentDidMount() {
    this.getName().then( name => this.setState( { name } ) );
  }
  
  render() {
  const { name } = this.state;
    return (
      <div>
        <h1>Hello, 
        {
          !name
            ? <span> stranger.</span>
            : <span> {name}.</span>
        }</h1>
        <p>Welcome!</p>
    </div>
    );
  }
 
}

ReactDOM.render(
  <Greeting />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Above component waits for one second, then grab the name value and set it to state. Until it finishes our view says "stranger" instead of the grabbed name. This can be possible thanks to life cycle methods and state.

For React, both of those components are the same. They somehow return JSX in the end of the day. Classes are special functions in Javascript, so this is why I said all of the components are "functions". The difference for React, class based components have states and life cycle methods.

Of course components can return other components as well but main difference with a component and element is one of them is just a JSX value, the other one is a function returns elements.

The big difference is, apart from being a function and returning some other elements, of course we have state and life cycle methods for components. If an element is a brick then a component is something like a wall.

Upvotes: 2

Joel Jaime
Joel Jaime

Reputation: 469

A component is a set of Elements (as the documentation says):

Note: One might confuse elements with a more widely known concept of “components”. We will introduce components in the next section. Elements are what components are “made of”, and we encourage you to read this section before jumping ahead.

Here I could tell you two quick differences:

  1. The Elements do not have Props or states, they are simply something visual (but you can execute Javascript using {}.

  2. At the time of rendering, the elements are used as any variable, unlike a component that is through the labels, for example:

// This is a component
ReactDOM.render(<Element />, document.getElementById('root'));

// This is an Element
ReactDOM.render(element, document.getElementById('root'));

Upvotes: 2

Related Questions