in Education by
What is the difference between Element and Component?

1 Answer

0 votes
by

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.

The object representation of React Element would be as follows:

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

The above React.createElement() function returns an object:

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

And finally it renders to the DOM using ReactDOM.render():

<div id='login-btn'>Login</div>

Whereas a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

const Button = ({ onLogin }) =>
  <div id={'login-btn'} onClick={onLogin}>Login</div>

Then JSX gets transpiled to a React.createElement() function tree:

const Button = ({ onLogin }) => React.createElement(
  'div',
  { id: 'login-btn', onClick: onLogin },
  'Login'
)

Related questions

0 votes
    What is the difference between HTML and React event handling?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is the difference between state and props in React?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    When to use a Class Component over a Function Component?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    How to pass a parameter to an event handler or callback in REACT?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    How to bind methods or event handlers in JSX callbacks?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is the purpose of callback function as an argument of setState()?...
asked Jun 2, 2021 in General by JackTerrance
0 votes
    Why should we not update the state directly in React?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What are props in React?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is state in React JS?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What are Pure Components in React js1?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is JSX?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    Tell the difference between Domain and Data Element?...
asked Jan 5, 2021 in Technology by JackTerrance
0 votes
    Difference between: 1. Biotic components and Abiotic component 2. Producers and Herbivores 3. Carnivores ... proposed by,electromagnetic theory engineering physics,Science nptel...
asked Nov 7, 2021 in Education by JackTerrance
0 votes
    An element is composed of: a. ON tag and OFF tag b. The content between the opening and closing tag c. Both a and b Select the correct answer from above options...
asked Nov 27, 2021 in Education by JackTerrance
0 votes
    When the phase angle between the Ex and Ey component is 0^0 or 180^0, the polarisation ... proposed by,electromagnetic theory engineering physics,electromagnetic theory nptel...
asked Nov 6, 2021 in Education by JackTerrance
...