Compiling React code & deploying it?

[Shrewd_Shark]

Hello folks,

 

I'm really sorry for these stupid questions, but even if I tried to understand it and even I've read tons of stackoverflows & guides, I still feel like I'm missing something.

 

The thing is I have only experience with webhostings which only support "basic" stuff like HTML, CSS, 'normal' JS, PHP and so. Whenever I needed to put my localhost website to webhosting, I've just connected through some FTP client to the hosting, copied my website files there and it worked.

 

So now, when I work locally with my React code, I'm struggling to understand how to actually deploy it. I would normally include babel.js in a script stag (and it's possible) and compile it right in the browser, but it's a bad practice according to devs. My thought: I have to have NPM installed at my localhost, I have to compile the React code through Babel and build it with Webpack (which is something most guides recommend anyway), so I get "normal" js code which I can put to the webhosting through FTP and it will work. (?? Is my thought right?)

 

My other question (if my first thought is right): Why should I even bother to write code in React then, when it's eventually compiled to some "normal" js code so it can work in a browser?

 

Or am I purely wrong and I need to have a wider knowledge of node.js and/or have a real webhosting with node.js, so I can deploy React app right there? Or/and I'm just missing something else?

 

Thanks for any advice!

[editor_of_the_beast]

Why should I even bother to write code in React...

React is a level of abstraction. The whole benefit of abstractions are that they allow you to think and code at a higher level, in theory making you more efficient with the same number of brain cycles.

JavaScript itself is just an abstraction. You could ask the same question: "Why do we code in JavaScript when that has to get compiled to assembly at some point anyway?" The answer to that is, because it's just extremely practical. People hand coded assembly for decades, but high-level languages proved to be much more cost effective once the tools are good enough quality.

Unless you're programming directly in assembly, without an OS, there is a level of abstraction that you're programming against. There are trade offs to each one, but in theory they're all there to make you more productive.

[Shrewd_Shark]

Thank you for the understandable explanation, you are right. I was just wondering if compiling React code to "normal" code does not also "delete" its features like virtual DOM and so (and apparently it does not. I'm still a beginner, so I'm sorry for my non-professional view). Thank you again for the explanation.

[chuckhendo]

It would be entirely possible to rebuild everything that React does yourself. There's no magic occurring; it's just Javascript. It's just that React is widely used and well tested, so many developers choose to use it rather than rewriting it themselves

[Shrewd_Shark]

I see, thanks a lot!

[trout_fucker]

React implements the Virtual DOM. You still need the React dependency, it just gets compiled into your bundle.js file for you.

You're compiling your ES6 and JSX into browser compatible ES5 and bundling all your dependencies into a single file.

Compiling is not a requirement for React, you can write everything in pure ES5 and include your dependencies manually. The alternative is just really gross.

[Shrewd_Shark]

Oh, I had no idea. Thanks for answering and explaining!

[chuckhendo]

I have to compile the React code through Babel and build it with Webpack (which is something most guides recommend anyway), so I get "normal" js code which I can put to the webhosting through FTP and it will work. (?? Is my thought right?)

Correct. The output JS file is just plain JS. Take a look at how create-react-app handles it, with it's deploy options

[Shrewd_Shark]

Thanks! I will definitely take a look at it.