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 Render an Element

Posted by M J
M J
7,322 Points

Is anyone else having issues getting anything to render in the screen?

The entire module for React Basics is not working. Has anyone in 2021 been able to get there heading onto the screen?

Here is a snapshot of my code: https://w.trhou.se/c33b4hg4z6

4 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi M J! Thanks for providing a helpful snapshot of your Workspace.

It looks like you have a minor typo on line 13 – cost should be const:

const header = React.createElement(
  'header',
    null,
    title,
    desc
);

I tested that and all worked as expected. :)

M J
M J
7,322 Points

Thank you Guil! Unfortunately even with the corrections, workspaces does not render to the screen. Was this course intended just to be used with VS code? And not workspaces? That could be my problem...

alexx1000
alexx1000
16,187 Points
alexx1000
alexx1000
16,187 Points

Hi everybody! I'm having the same issue. I ran npm install --global http-server and npx http-server. Windows Powershell says that the server is running! but the screen is NOT rendering anything. My workspace is also NOT rendering at all: https://teamtreehouse.com/workspaces/41840849

Is there somebody else who can help me? Thanks in advance! :)

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi M J. It's intended to be used with both. Were you able to set up a local development server to run your project? This video talks a little bit about running your project outside of Workspaces (at 3:15), and the teacher's notes provide resources to running one using VS Code and other ways.

Hope this helps :)

Paula Hill
Paula Hill
237 Points
Paula Hill
Paula Hill
237 Points

One thing I noticed is that the instructor didn't say anything about having an import tag in the app.js, I was having the same issue until I imported React like this at the top of my app.js file and I started working in the app.js file instead of html file like this

import React from 'react'; import './App.css';

function App() { return ( <div className="App"> <header className="App-header">Hello</header> </div> ); }

export default App;

every app that I built with react, I started in the app.js file