Unable to view any output React Js?-CodePudding

I was watching a youtube tutorial for react everything was working fine then i refreshed my react app page and suddenly everything disappear from the browser, tried everything i and nothing works pls help.

code of App.js file:

import './App.css';
import Greet from './components/Greet';
import meet from './components/meet';


function App() {
  return (
    <div >
      <Greet />
      <meet />
    </div>
  );
}

export default App;

code of Greet.js:

import React from 'react';

// function Greet(){
//     return <h1> hello </h1>
// };

const Greet = () => {
    <div>
         <h1> Hello this is mj</h1>
    </div>
};

export default  Greet;

code of meet.js:

import React , { Component } from 'react';

class meet extends Component {
    render() {
        return <h1> writing react </h1>
    }
};

export default meet;

latest terminal

output

CodePudding user response：

//Greet.js

import React from "react";

// function Greet(){
//     return <h1> hello </h1>
// };

const Greet = () =>(
  <div>
    <h1> Hello this is mj</h1>
  </div>
);

export default Greet;

//Meet.js

import React, { Component } from "react";

class Meet extends Component {
  render() {
    return <h1> writing react </h1>;
  }
}

export default Meet;

Your Greet and Meet file should look like this. In Greet.js you are not returning anything.

CodePudding user response：

You're defining the meet component using lowercasing, note that in ReactJS component names should be in Pascal Case. That's to capitalize every first letter of a word by convention. So meet component should be and of course change the respective class name.

And the Greet.js file component doesn't return the component. In functional components, you have to return the result of the component to be rendered.

The following is the correct code:

Greet.js

import React from 'react';

// function Greet(){
//     return <h1> hello </h1>
// };

const Greet = () => {
   return (
    <div>
         <h1> Hello this is mj</h1>
    </div>
    );
};

Meet.js

import React , { Component } from 'react';

class Meet extends Component {
    render() {
        return <h1> writing react </h1>
    }
};

export default Meet;

And finally, App.js

import './App.css';
import Greet from './components/Greet';
import meet from './components/meet';


function App() {
  return (
    <div >
      <Greet />
      <Meet />
    </div>
  );
}