JavaScript React Basics (retired) First Steps in React Our First Application

見綸 陳
見綸 陳
6,333 Points

No child elements?

Since our application contains no child elements we'll make it a self-closing tag

What does this mean in 5:48?

Because some reason we use <Application /> in first parameter. Like following

ReactDOM.render(<Application/>, document.getElementById('container'));

Does it mean in some cases we use <Application><Application/>?

3 Answers

Angelica Hart Lindh
Angelica Hart Lindh
19,373 Points

Hi there,

In React world if a component, in your case <Application />, has no child elements then we are not required to set an explicit closing tag, such as <Application></Application>.

By no child elements, it means within that return block of code there are no child elements such as <div> tags that need to be rendered when the <Application />component is returned.

React docs about components

Let me know if you still require further advice.

Cheers,

見綸 陳
見綸 陳
6,333 Points

Thanks for your reply. For more detail, here is an example

I create a component class and render it into a div with id="treehouse"

var Application = React.createClass({
  render: function(props) {
    return(
      <div className="title">
        <h1>Tilte</h1>
      </div> 
    );
  }
});
ReactDOM.render(
  <Application />,
  document.getElementById('treehouse')
);

In the return block h1 tag is in the div tag but we still can render Application with <Application />

Nick Banford
Nick Banford
2,329 Points

You could have it so that you could use. <Application><MyOtherComponent /></Application>. So in your Application component it would use the <MyOtherComponent /> and render it within your <Application /> component.

This allows you to create flexible components and compose UIs from a combination of components.

What I would suggest is to continue with the course and you'll see examples of this soon I'm sure.