3

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

1 Answer 1

4

A few things happen, since browsers don't support ReactJS syntax and neither do they support ES6 (newer version of JS) your code need to transpile your react and ES6 code to ES5. Babel transpiles it to ES5 and webpack bundles your modules.

Node.js Its just JS for server side. You have to install it on your computer to be able to run JS code locally.

NPM Npm is the package manager for JavaScript. You use this to download and install packages (for example react).

Webpack Webpack is a module bundler which takes modules with dependencies and generates static assets by bundling them together based on some configuration.

Babel The babel-preset-es2015 and babel-preset-react are plugins being used by the babel-loader to translate ES6 and JSX syntax respectively so your browser can interpret them.

The support of loaders in Webpack makes it a perfect fit for using it along with React.

I suggest you follow the offical docs which have very easy to follow step by step instruction:

Start here:https://facebook.github.io/react/

11
  • Hi Hevar, Thanks for the tip. I might just end up working with the hello.html doc with the script links. I had hoped to make or use an actual build though because as I said, my goal is to understand how everything works together: Less, React JS, HTML 5, Configuration Files (JSON) etc. I am checking out the ReadMe and User Guide now to determine how difficult it is to make it all run. Any idea why the index.html files weren't showing although the modules were all locally saved in the project directory? It concerns me that I do not understand how the set-up actually works.
    – April
    May 30, 2017 at 11:19
  • It might be that you don't have a div which you bind your component to.
    – Hevar
    May 30, 2017 at 11:24
  • This answered my question: github.com/facebookincubator/create-react-app#create-react-app- and in the case that anyone is trying to do what I am, here's information on deploying the app through github and heroku: github.com/facebookincubator/create-react-app/blob/master/…
    – April
    May 30, 2017 at 11:31
  • Yeah that is the offical react github repo. :)
    – Hevar
    May 30, 2017 at 11:32
  • Hi Hevar, first of all, thank you - the instructions were so easy to follow and now I see that I am connected to my localhost. I would like to use Less with my App... and I see these instructions here: github.com/facebookincubator/create-react-app/blob/master/… but they are for "Sass" and not "Less" - it's been a while since I have worked with this stuff. Do I take the same steps shown in order to add Less to my web app? Thanks in advance!
    – April
    May 31, 2017 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.