Hello,
Just starting the Front End Dev Challenges at the end of the Module… I’m struggling with getting codepen to work properly.
This line of code in particular seems to make everything stop working, but codepen doesn’t throw any errors. import { Provider, connect } from 'react-redux'
I guess my first question is, are all these imports necessary in the FCC template which was provided?
Sorry, just struggling with wrapping my head around loading in these libraries and such, as in the lessons prior they were loaded in for us and just worked in the background.
Imports on Codepen have to come from a URL. If you use the “Settings”, on the JS tab at the bottom you can add dependencies (Add Packages).
For the type of import you have the environment would have to support installing the dependencies (e.g. StackBlitz/CodeSandbox which I would suggest you use anyway for framework/library projects).
You only need Redux if you plan on using it. Which you really do not need for any of the projects and especially not for the Random Quote project as it barely has any state or a deep component tree requiring you to pass props down a long way. That is not to say you can’t use this project to practice with it (I wouldn’t bother with it just yet).
In the settings where you can search/paste links to scripts, I ended up pasting some links from another pen, because the ones that come up in the search don’t work. Which is odd. But the older links apparently do.
Some of the skypack.dev imports are broken at times. You can usually fix it by replacing it with esm.sh
import { Provider, connect } from "https://esm.sh/react-redux@8.0.5";
Personally, I just wouldn’t use Codepen for React. Use StackBlitz or CodeSandbox, they are much better geared for framework code and they give a better dev experience as well.