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

neftali
neftali
5,294 Points
Posted by neftali
neftali
5,294 Points

Like all the comments below, this is not working for me either. Once I called ReatDOM.render(), Nothing.

ReactDOM.render(); method not being called or rending the element on the HTML side.

Michael Stedman
Michael Stedman
1,120 Points

So, I came at this from already knowing create-react-app (much better to use, by the way). Anyway, I could not get the text "My First React Element!" to display in the browser either. In create-react-app, you import React and React-Dom at the start of each component, and refer to it in the code below, so I was looking for that.

Since it was CDN, I was toying around with stuff and got it to work and found out that my habits from create-react-app bled over into this. When importing React and React-Dom into each component, you also assign it a variable name. I got into the habit of naming my variable fro React-Dom, "ReactDom".

So, when starting out, I did this: 

ReactDom.render(
    title,
    document.getElementById('root')

I did not get anything rendered on the browser, and got an error in my console. So below is my finished code for the app.js file. All I did was change from "ReactDom.render()" to "ReactDOM.render()"

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

ReactDOM.render(
    title,
    document.getElementById('root')
)

3 Answers

robin blaauw
robin blaauw
2,062 Points
robin blaauw
robin blaauw
2,062 Points

I would advise you to take a loot at your setup. This gave me issues as well so I decided to use NPM to create the project. Ill try and walk you through what i did to get it working.

You will need nodejs for this, if you don't have that visit: https://nodejs.org/en/

Now open your command prompt and type npm i -g create-react-app. After you install that package go to the folder you want for your project. For me it's C/Documents/Coding. Type npx create-react-app my-app. Note that npx is not a typo.

This will create your react app. Visit your folder, go to src and type del * if you are on windows or rm -f * when on windows or mac. Now add 2 files in the folder src. index.css, that you can leave empty and index.js

copy this code to index.js:

import React from "react"; import ReactDOM from "react-dom"; import "./index.css";

const title = React.createElement( "h1", { id: "main-title" }, "my first react element" );

console.log(title);

// ========================================

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

Let me know if this works.

Regards, Robin

Waylan Sands
PLUS
Waylan Sands
Courses Plus Student 5,824 Points
Waylan Sands
Waylan Sands
Courses Plus Student 5,824 Points

Make sure your scripts are in the bottom of the body, not the head!

Joshua Ouma
Joshua Ouma
20,865 Points
Joshua Ouma
Joshua Ouma
20,865 Points

Clearing cache did it for me