component syntax in React

Question

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')
);

JSX is compiled to React.createElement calls. You don't have to use it if you don't want to. — Tholle
– Tholle, Commented Feb 13, 2019 at 12:14
Check the doc of react to see what's the 3rd argument is corresponding to. reactjs.org/docs/react-api.html#createelement — Alexis
– Alexis, Commented Feb 13, 2019 at 12:16

Saurabh Mistry · Accepted Answer · 2019-02-13 12:27:09Z

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')
 );

Chris · Accepted Answer · 2019-02-13 12:19:44Z

0

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.

answered Feb 13, 2019 at 12:19

Chris

59.7k20 gold badges121 silver badges144 bronze badges

2 Comments

user9623401 Over a year ago

but what does the syntax of <.../> mean?

Treycos Over a year ago

You should read the basics of React in their doc : reactjs.org/docs/introducing-jsx.html

Pedro Paulo · Accepted Answer · 2019-02-13 12:27:09Z

0

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.

answered Feb 13, 2019 at 12:27

Pedro Paulo

464 bronze badges

Collectives™ on Stack Overflow

component syntax in React

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related