CODEWITHSUNDEEP
reactjs
J. Moors
J. Moors

Reputation: 1

React.js returns blank page after npm start

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>
  );
}

Upvotes: 0

Views: 747

Answers (2)

J. Moors
J. Moors

Reputation: 1

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>

Upvotes: 0

Muzikdev
Muzikdev

Reputation: 11

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.

Upvotes: 1

Related Questions