CODEWITHSUNDEEP
reactjs
user9623401
user9623401

Reputation:

component syntax in React

I'm a beginner in React, just some questions about component Let's say I have a component :

function HelloWorld() {
    return React.createElement('div', {}, 'Hello World!')
}

so my questions are:

1- HelloWorld is the component name, isn't it?

2- then I have the code below:

ReactDOM.render(
    <HelloWorld/>, document.querySelector('#root')
);

what's the syntax of <ComponentName/>? isn't that more sensible to have the render function to be like:

ReactDOM.render(
    HelloWorld(), document.querySelector('#root')
);

Upvotes: 0

Views: 71

Answers (3)

Pedro Paulo
Pedro Paulo

Reputation: 46

When react builds your app and run, it will be something like the last example that you gave.

React compile all components to 

React.createElement('htmlTag' || someOtherComponent(), ...);

So a lot of people find more easy and productive to write your components using the JSX sintax and just use the build command to compile and bundle the code.

Upvotes: 0

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

syntax of ReactDOM.render this : 

ReactDOM.render( <Component />, id of DOM element where component will render );

in React there are 2 types of components :

  • 1) functional components (also called stateless components)
  • 2) class components (also called as stateful components

example of functional component :

function HelloWorld() {
    return React.createElement('div', {}, 'Hello World!')
}

or 

const HelloWorld=()=>{
    return (<div>HelloWorld</div>);
}
export default HelloWorld;

example of class component : 

class HelloWorld extends React.Component{
   render(){
      return (<div>HelloWorld</div>);
   }
}

so passing component like this : 

ReactDOM.render(
    HelloWorld(), document.querySelector('#root')
);

is not correct way , in React you use Component as <ComponentName />

so thats why you have to pass like this : 

ReactDOM.render(
        <HelloWorld/>, document.querySelector('#root')
 );

Upvotes: 0

Chris
Chris

Reputation: 59511

1 - No, that would be the contents (aka "children") of the div tag you are creating. That is <div>Hello World!</div>.

2 - Not sure what the ComponentName you are referring to is. The snippet takes the HelloWorld React component and mounts it to the DOM, which also starts the Reconciliation process.

Also, the purpose of JSX is to have a syntactic sugar that resembles HTML as much as possible. Yes, what you are suggesting is basically what happens behind the scenes (from a pseudo-code point of view), but would defeat the purpose of using JSX.

Upvotes: 0

Related Questions