Tell us what’s happening:
As the title suggests, on my local machine, my quote machine looks great, truly a labor of love. However, I’m trying to get it up on Codepen so that I can submit it, but the React I’ve written is not simpatico! I added the React external scripts, so I’m not sure what I’m doing wrong. Any advice would be highly appreciated!
I think you have too much going on. Take a look at this codepen: https://codepen.io/bradleyboy/pen/OPBpGw?editors=1010
A lot of the imports are done in the JS settings instead of in the editor. You also won’t have the same directory structure. You’re looking for a button
// import Button from ‘./Components/button’;
but you don’t have a separate Components directory to access in codepen.
I didn’t try to convert your code but let me know if these ideas get you all the way there!
You would have to use a Codepen project to do it the way you are. But you can only have one project on a free account and there are other limitations as well (like max 10 files).
I’d suggest using codesandbox or stackblitz for React projects.
import React, { Component } from 'react';
import './App.css';
import Button from './Components/button';
just copy and paste all your components in the JS window and remove all the above.
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
import { random } from 'lodash';
For the above three, include the CDN in settings .
Change class App extends Component to class App extends React.Component
export default App; won’t work in codepen. Simply add
at the bottom.
You have some funny tags in your html. Remove everything else and leave.
<div id="root"></div>
I removed some code preventing your project from displaying. You can check it Here. Hopefully it will give you ideas on how to organise your app on codepen.