Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) First Steps in React Create a React Element

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

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 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,532 Points
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
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!

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 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

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 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,532 Points
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
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"?