this isn't directly based off of this tutorial: (YouTube) ReactJS Basics - #2 Setup Workspace with Webpack
(All of the listed tutorials are respectively hosted on GitHub.)
but I have been trying to create a local React JS Environment where I can practice coding on a Mac. (The ultimate goal would be getting my files up to GitHub and publishing them through Heroku so that I can share whatever it is that I work on.)
I have used this tutorial: https://www.kirupa.com/react/setting_up_react_environment.htm - Everything seemed to work, but I couldn't host the files to Heroku due to some npm error.
In any case, I am now considerably confused because supposedly the index.hmtl / index.jsx files are "packaged" into a "myCode.js" file in output and this is what the browser sees. (I was assuming this is something that Webpack does, since it is supposed to "bundle" things... Now I am not so sure.)
However I was under the impression that If I was to change the code in the index.jsx file, that this myCode.js file would also update... but that is NOT the case. There is a function in there that causes the code from the tutorial to continue being displayed.
I noticed that this Input vs. Output Folder is really a thing in most Web App setups, therefore I need to understand what is happening here.
Here's the other thing: I have downloaded the finished Set-Up Files from: https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade and also from this tutorial (above)... when I open the index.html file, nothing shows up in my browser.
Am I missing something? I am looking for a way to say, use one set-up to continually practice and build tutorials and then when I am ready, clear out the main working files and create a little test app from scratch... Preferably as if I was working on something real (so that means with a database or some "database substitute").
I hope to limit my base structure predominately to: Node.js, React, Webpack & Babel
I am new to all of this, so any help would be greatly appreciated. I really just want to get to the coding.
Also I had some issues with npm. It's straight forward when following the first tutorial, but as soon as I already had a few things installed, I started having issues. It seems to be something to do with global vs. local files, but honestly I just want to use things like npm and git quickly as tools and not have to know them from the ground up... as learning the rest is already enough of a challenge.
Does anyone know of a source where I can just copy, paste and get in and code?! Because the tutorials above aren't making sense for me.
Thanks, April