How to properly display React components in codepen?

I’m trying to convert my HTML/CSS footer into a react footer, but it won’t display. I just finished working on lessons saying you could call a variable you created at any time and wanted to try and condense some code on a website I’m working on. The Footer is currently the only javascript I’m using in this assignment, so all lines of javascript make up the footers assigned const. I’ll list the codepen below if anyone could help :slight_smile:

CODEPEN: https://codepen.io/daniel-albano/pen/poJydQj?editors=1010

Hello there.

I suggest you use Babel as a preprocessor for your JavaScript, when you use React in CodePen. It is not necessary, but it could help. Also, use the formatting and analysing tool in CodePen.

Now, it is great you have created a component using React, but you have not told it where it should render… ReactDOM

Also, you have not defined this MyClass thing acting as a prop. React works with className=... for defining CSS classes. Example:

<div class="btn-blue"></div> <!-- In HTML -->

<div className="btn-blue"></div> <!-- Equivalent in React -->

Honestly, some of this stuff is fundamental. So, you should probably look at the course in fCC. So, that you get an idea of the basics first.

Hope this helps

I see, I’ll have to get a little further into the material before trying again I suppose. I thought with what I knew I could already implement this and I feel like I learn a bit more if I apply it into a real world scenario so I try as I go along. I’ll get back to you after I finish all of react if I can’t figure it out.

Thank you for the response though, I cleaned up a bit of it.