Rendering the component in the react as variable vs jsx component

Question

The following code is taken from crate react app

        import React from 'react';
        import ReactDOM from 'react-dom';
        import './index.css';
        import App from './App';
        import * as serviceWorker from './serviceWorker';
        import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
        
        ReactDOM.render(<App/>, document.getElementById('root'));
        
        
        serviceWorker.register()

The below code i have written

const a = 
  (
    <div>
      <h1>Visibility Toogle </h1>
      <button>Show details</button>
  </div>
      );

    
ReactDOM.render(<a/>,document.getElementById('app'));

I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine

ReactDOM.render(a,document.getElementById('app'));

render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed

2)i tryied with {a} also i failed a is also javascript method why it failed

To understand what's going on, you might want to read this: React Components, Elements, and Instances by Dan Abramov — thorn0

quirimmo quirimmo · Accepted Answer · 2019-01-08T16:40:18

You have two issues.

First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.

Second one: you are not rendering any component. The root of a react application must be a component.

So change your code to something like:

const Ex = () =>  
  (
    <div>
      <h1>Visibility Toogle </h1>
      <button>Show details</button>
  </div>
      );


ReactDOM.render(<Ex/>,document.getElementById('app'));

Rendering the component in the react as variable vs jsx component

1 Answers