Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics First Steps in React Create a React Element

Ernest Son
Ernest Son
13,532 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

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,532 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>
Ernest Son
Ernest Son
13,532 Points

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

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

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,532 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,532 Points

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