JavaScript React Basics First Steps in React Create a React Element

Ernest Son
Ernest Son
13,518 Points

getting 404 for favicon, not able to complete console.log exercise

I basically followed the instructions to a T, preview workspace, and all I get is a grey screen and a 404 from the console. I did notice that the CDN links are highlighted in red, which I thought was strange..

4 Answers

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 18,894 Points

Hi Ernest

a favicon (favourite icon) is an icon associated with a particular page, your browser is looking for a link in the head tag on the page you're looking at.

See in your browser on Treehouse page, the treehouse logo on the tab is a favicon for a desktop browser.

e.g.

<!doctype html>
<html lang="en">
<head>
    <link rel="icon" href="its/looking/for/this">
    [...]
</head>
<body>
    [...]
</body>
</html>

This is what Treehouse's looks like on this current page:

<link type="image/x-icon" rel="icon" href="data:image/png......">

That being said, a 404 favicon will not impact the rest of the page, can you paste your full code, please.

Ernest Son
Ernest Son
13,518 Points

Thanks Liam, yes, I was more concerned that the console was empty...here's my code

app.js

const title = React.createElement(
  'h1',
  {id: 'main-title', title: 'This is a title.'},
  'My First React Element!'
);

console.log(title);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./app.css" />
  </head>

  <body>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="./app.js"></script>
  </body>
</html>
Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 18,894 Points

I have tested this locally and in my console, I get the title object.

How are you setting up your project?

I use npx create-react-app my-app from the react documentation. to set up a boilerplate react app.

Ernest Son
Ernest Son
13,518 Points

Oh, I didn't realize I needed to set it up....I was just previewing workspace. I thought the necessary files were retrieved via CDN....

Ernest Son
Ernest Son
13,518 Points

So I'm confused. Is there a setup necessary or can you simply write the code in the workspace and "preview"?

Ernest Son
Ernest Son
13,518 Points

Nevermind, I wasn't seeing the object in the console, but it was there.....thank you for withstanding my ignorance!

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 18,894 Points

Sorry i thought you was using your own text editor.

In the workspace, your code works correctly and when i run it in the browser I see the object for title