Build a markdown previewer (Can I build it without codepen?)

[gxcad]

Hello,

I wanted to build the projects for the front end section without codepen because I found it rewarding to do so with the random quote generator (to know the differences, to load in jQuery using script tags, to associate the JS file with the HTML file as well as the CSS to all work together… But I am following a install react with webpack 4 tutorial (freecodecamp medium article) and it seems ridiculously complex, none of the steps seem to go into any real detail on why it is being done a certain way (at least they try, but honestly totally lost for the majority of the tutorial) and I can’t even get it to work, it just stops working part of the way through the tutorial and I’m left wondering where I went wrong. Do I even need to do this at all just to build the React front end projects separate to codepen? Should I just stick to codepen for now? I’d really like to post my completed build to a normal website once I’m done, which I cannot do with codepen (I think?).

Thanks for any input.

[Layer]

Well, at the end of the story you need a bundler to have all of your js in a single file rather than split into tenth of files (webpack, as other bundlers, do much more, just to point it out ), and you indeed need to translate the react jsx code to be understood by the browser ^^

• You can try create-react-app, a tool that creates for you all the configuration with a lot of fancy stuff added^^

• You can try Parcel, a bundler much much ( much! ) easier to use - here is a tutorial ( i didn’t tried it, but after a blink seems doable and effective ^^ ) : https://medium.com/dailyjs/lean-react-project-with-parcel-a6ffe0fac0d2

[ArielLeslie]

You don’t have to use CodePen. The requirement is that the project must be live online and that the code must be publicly viewable.

[gxcad]

Hi Layer and ArielLeslie, thanks for the feedback. I’ll look into parcel shortly!