React.js returns blank page after npm start

Question

I'm currently following a YouTuber who has kindly uploaded his codebase to here. I have been following his video closely, but for some reason when I type in npm start in my console I get the project compiling successfully, but nothing appears in the browser. I have tried restarting numerous times, but to no avail and as I'm new to React.js I don't know how to stat debugging this app. My buggy branch is here. Any thoughts or suggestions are greatly appreciated.

UPDATE: I've narrowed the bug to the Button.js component, but I'm not sure why the commented out code isn't working.

// import React from 'react';
// import { Link } from 'react-router-dom';
// import './Button.css';

// const STYLES = ['btn__primary', 'btn__outline'];
// const SIZES = ['btn__medium', 'btn__large'];

// export const Button = ({
//   children,
//   type,
//   onClick,
//   buttonStyle,
//   buttonSize
// }) => {
//   const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
//   const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];

//   return (
//     <Link to='/' className='btn__mobile'>
//       <Button
//         className={`btn ${checkButtonStyle} ${checkButtonSize}`}
//         onClick={onClick}
//         type={type}
//       >
//       {children}
//       </Button>
//     </Link>
//   );
// };

import React from 'react';
import { Link } from 'react-router-dom';
import './Button.css';

export function Button() {
  return (
    <Link to='sign-up'>
      <button className='btn'>Sign Up</button>
    </Link>
  );
}

I cloned your project and it starts fine for me without any modifications. Do you have changes that aren't in the github repo? When you say "nothing appears in the browser" do you mean you just see a blank page at http://localhost:3000? If you open the browser's dev tools do you see any errors in the console? Have you tried reinstalling node_modules? — ray
– ray, Commented Jan 4, 2021 at 22:15
I've tried reinstalling node_modules, but the project just hangs — J. Moors
– J. Moors, Commented Jan 4, 2021 at 22:26

Muzikdev · Accepted Answer · 2021-01-04 22:23:15Z

1

Are you on localhost:3000 in the browser? React runs on port 3000. Confirm that you are at that address in your browser and try to run npm start again in the correct directory where you created your react-app.

answered Jan 4, 2021 at 22:23

Muzikdev

113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J. Moors Over a year ago

I'm on localhost:3000, but the app just hangs

Muzikdev Over a year ago

So on localhost:3000 the browser page is blank white? Also do you have the react app running? Is there any errors in the dev tools? If so what does the error say?

J. Moors · Accepted Answer · 2021-01-05 13:17:54Z

0

It seems I was trying to call the Button component from within itself with the following code:

//       <Button
//         className={`btn ${checkButtonStyle} ${checkButtonSize}`}
//         onClick={onClick}
//         type={type}
//       >
//       {children}
//       </Button>

The Button component should be the HTML element like so:

//       <button
//         className={`btn ${checkButtonStyle} ${checkButtonSize}`}
//         onClick={onClick}
//         type={type}
//       >
//       {children}
//       </button>

answered Jan 5, 2021 at 13:17

J. Moors

11 bronze badge

Collectives™ on Stack Overflow

React.js returns blank page after npm start

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related