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

General Discussion

Posted by Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

I get no console output

Showing results for: JavaScript> React Basics> First Steps in React> Create a React Element

I am using VSCode. Here is my app.js file:

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

console.log(title);

From the Terminal Window within VSCode I have opened a server by entering:

python -m SimpleHTTPServer

I have entered into the browser search line"

localhost:8000

The following was returned in the terminal window:

Serving HTTP on 0.0.0.0 port 8000 ...
127.0.0.1 - - [07/Feb/2019 17:08:21] "GET / HTTP/1.1" 200 -

I opened the browser debugger with inspect. There is absolutely NO output at the console tab. No errors, nothing.

I got nothing like the object that Guil shows I should have.

What's up?

5 Answers

Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Alex:

Here is the 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>
Alex Koumparos
seal-mask
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,887 Points
Alex Koumparos
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,887 Points

Hi Doug,

Are you sure that the working directory in your VSCode terminal is the same as the directory with your code? The console output you are showing is consistent with an empty directory. What do you see in your browser: does it look like this?:

Directory listing for /

When I access the integrated terminal in VSCode it opens to my home directory, not the working directory for my files. What is the path to your index.html and what is the output from pwd in your integrated terminal?

Cheers,

Alex

Doug Hawkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points
Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

The only information that shows in the browser address field is:

localhost:8000

I tried to drop a screen shot of the path to the index.html but I couldn't get it to work. But here it is transcribed:

/Users/doug5solas/training/treehouse/scoreboard/index.html

Here is a copy of pwd from the terminal window of VSCode:

Dougs-MacBook-Pro:scoreboard doug5solas$ pwd
/Users/doug5solas/training/treehouse/scoreboard

They look the same to me.

Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Alex:

I tried to proceed with the tutorial, thinking things might shake out in the wash. They didn't. I modified the index.html to look like this:

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

    <body>
        <div id="root"></div>
        <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>

I modfiied the app.js to add the ReactDOM.render(), as follows:

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

ReactDOM.render(
    title,
    document.getElementById("root")
);

The result was the same blank browser and when I looked at the elements tab in the Chrome developers tools I could see the root div looked like this, which shows me that React is not inserting the element:

<div id="root"></div>

I then edited it in the developer tools to look like this:

<div id="root">
     <h1 id="main-title" title="This is a title.">My First React Element!</h1>
</div>

And, I got the expected output (as per the tutorial). This leads me to believe that I have a partial connection. But, I have no idea where the failure is. I am concerned that if I just keep going, things will become exacerbated.

Alex Koumparos
seal-mask
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,887 Points
Alex Koumparos
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,887 Points

Hi Doug,

This is very mysterious. Can you try a couple of things for me?

First, with your SimpleHTTPServer running, click the reload button on your browser a few times, a few seconds apart: do you see repeated connections in the output of SimpleHTTPServer?

Something like this:

$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
127.0.0.1 - - [08/Feb/2019 14:28:15] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [08/Feb/2019 14:30:43] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [08/Feb/2019 14:30:47] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [08/Feb/2019 14:30:48] "GET / HTTP/1.1" 200 -

If you do, then your browser is definitely able to reach the server. If not, there is an issue with your browser connecting to the server.

Next, press CTRL-C to quit the server and run ls. What output do you get?

Start the server up again then try browsing to localhost:8000 from Chrome in incognito mode: any differences? What if you try from Safari?

What if you try 127.0.0.1:8000 instead of localhost:8000?

What happens if you try running the server on port 8080 instead of 8000?

You could also try using Python3's built-in http server instead of Python2's:

$ python3 -m http.server

Let me know what results you get from each of the above.

Cheers,

Alex

Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Alex:

In case you hadn't guessed (and how could you) I am on a Macbook Pro running Mojave.

I tried refiring the browser. Here is the result (looks good):

127.0.0.1 - - [08/Feb/2019 13:43:24] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [08/Feb/2019 13:43:29] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [08/Feb/2019 13:43:35] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [08/Feb/2019 13:43:41] "GET / HTTP/1.1" 200 -

Here is the ls:

Dougs-MacBook-Pro:scoreboard doug5solas$ ls
Starting        app.css         app.js          index.html

BTW "Starting" is a folder that carries the earlier versions of app.js. I have kept pushing on in hopes that when I did get the fix it would retroactively solve all the problems.

As it turns out I may be right about that assumption. I just tried it in both Google Incognito and Safari. It is working in both.

my python is v2.7.14_3 so the command

python3 -m http.server

returns

Dougs-MacBook-Pro:scoreboard doug5solas$ python3 -m http.server
bash: python3: command not found

when I tried http://127.0.0.1:8000/ it refused to connect

And, finally when I fire up the server I use:

Dougs-MacBook-Pro:scoreboard doug5solas$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

I don't know how to redirect it to port 8080.

But, I am guessing that because it works incognito and on safari (BTW it works on firefox too) we might be able to figure out why it is messing up on Chrome.

FYI: The extensions I use on Chrome are: Dashlane (password control), JSON formatter, React Developer Tools and one Google App, Postman. I have deliberately loaded these. I periodically go through and remove extensions that get placed there inadvertently because of sites I have visited. MY Motto: If I didn't specifically ask for it, I get rid of it.

Hope this helps

Alex Koumparos
seal-mask
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,887 Points
Alex Koumparos
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,887 Points

Hi Doug,

I suggest as a next step that in a regular Chrome window you try disabling all your extensions. If it works with all your extensions turned off, then the problem is with one of the extensions. You can try adding them back one by one, reloading your server each time until you identify which one causes the problem. My guess would be Postman since that's probably got the ability to manipulate HTTP requests/responses (for testing APIs).

If that works, then the following might be redundant, but for completeness:

  • For the Python version, I would recommend installing Python 3: it's pretty mature now (it should be, it's more than 10 years old) and Python 2.7 is living on borrowed time.

  • I'm not super concerned about not being able to connect on 127.0.0.1 now that we know that you can connect using localhost in certain circumstances. If I had to guess I'd say either your firewall settings are allowing localhost through but not 127.0.0.1 or maybe you have different mapping in /etc/hosts.

  • To run the simple server on a different port, you can just add the port number as an argument when running the server:

    $ python -m SimpleHTTPServer 8080
Serving HTTP on 0.0.0.0 port 8080 ...

Cheers

Alex

Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Alex: I installed python3. No problems. I restarted the server using python3 and 8080 (8000 didn't work). The project now works in Chrome (without extensions).

Thank you. I'm not sure I ever would have come to this solutions myself.

I just need to put my extensions back.