CODEWITHSUNDEEP
reactjs
DigoXin
DigoXin

Reputation: 13

Why Hello World is not showing up?

This is the same code as from the youtube tutorial,
but it's not working for me:

Hello World is not showing up in the browser.

import React from 'react';

function myComponent() {
  return(
  <h1>Hello World</h1>
  );
}

class App extends React.Component {
   render(){
    return(
      <myComponent/>
    );
   }
}

export default App;

Upvotes: 0

Views: 162

Answers (1)

SanjiMika
SanjiMika

Reputation: 2724

1) You must define a component name started by a capital letter. It's the rule of React (https://en.reactjs.org/docs/jsx-in-depth.html)

User-Defined Components Must Be Capitalized When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

2) You must insert a enclosed div or React.Fragment for MyComponent in render() of AppComponent/>.

function MyComponent() {
  return(
  <h1>Hello World</h1>
  );
}

class App extends React.Component {
   render(){
    return(
      <div> // OR <React.Fragment>  OR <>
        <MyComponent/>
      </div> // OR </Fragment>  OR </>
    );
   }
}

Upvotes: 1

Related Questions