Getting react to work in codepen

Getting react to work in codepen
0

#1

Can´t seem to get it to work here. Any ideas?


#2

Try adding React to your project in the settings like I did here:

Note, I moved some JS code around


#3

Thank you, but that doesn´t seem to be working either (or at least it´s not loading in my browser).


#4

Well you don’t have an App component yet.


#5

Not sure what you mean. I did finish the App and it runs if I start with npm start, but don´t know what else I should paste in the Codepen.


#6

Have a look at how I did mine:


#7

You need to import the react, react-dom, and marked libraries. You will need to use CDNs, because the following will only work in your local environment, because the libraries exist on your local machine.

import React, { Component } from 'react';
import marked from "marked";

The above is missing react-dom. Also, your render refers to a component named App, but you do not have a component showing in your code.


#8

Thank you for the answer. Do I have to do that because I built my project using create-react-app?


#9

You have to because Codepen can not access the files on your local machine.


#10

Sorry if I´m being annoying. I just don´t understand why other Pens do work when building classes (and pasting the React code without importing anything, like Johnny´s) and mine doesn´t. I fail to see the difference.


#11

Johnny’s is using Codepen’s external libraries module. Click on the gear by JS and you will see he added React there.


#12

It´s finally working! Thanks everyone.