Help with code not rendering.showing on the workshop

I’m slowly practicing React and I’m stuck on the lesson: Using and Rendering a Component.
I typed in a simple code (App.js and Index.js example provided), but the code isn’t showing up on the website at all. Am I doing something wrong?

// index.js File
import React from 'react';

import ReactDOM from 'react-dom/client';

import Message from './app';

ReactDOM.createRoot(document.getElementById('app')).render(<Message />);

// app.js File
import React from 'react';
import ReactDOM from 'react-dom/client';

function Message() {
return <h1>This is my first React project!</h1>

export default Message;
  1. The file you’re trying to import Message from is called app.js – not App.js.
  2. Check if in index.html there is an element with the id ‘app’ – we cannot see that.
  3. If you post code – make sure to properly format it by wrapping it in three backticks each or mark the code and press </> in the editor.
1 Like

Okay I edited the coding example, this is the index.html I have:

<!DOCTYPE html>

<html lang="en">


<meta charset="UTF-8">

<link rel="stylesheet" href="./styles.css">

<title>My App</title>



<div id="app"></div>

<script src=""></script>

<script src="/app.compiled.js"></script>



I completely understand the frustration of getting stuck while learning React, especially during the “Using and Rendering a Component” lesson. It’s a crucial step that sets the foundation for everything to come.

Based on your description, it seems like your code isn’t showing up on the website. Here are some additional pointers specific to React development that might help you troubleshoot the issue:

  1. Ensure you’ve called ReactDOM.render() in your index.js file to render your App component to the DOM.
  2. Verify the correct path to your App component is passed to ReactDOM.render().
  3. If using a development server, try restarting it to clear any potential errors.