DEV Community

Let's try React without Node.js

LuisPa on December 06, 2017

Context of React React is a Open Source JavaScript library for building user interfaces. Created and supported by Facebook. You can f...
Collapse
 
ben profile image
Ben Halpern

Really like this. I think the preprocessors/packers/etc. really are the hardest part about React, as opposed to the tool itself. And it's easy to lose your mind overcoming the tooling steps. Would definitely recommend this approach to anyone not already super comfortable with the JS ecosystem.

Collapse
 
liudasstonys profile image
Liudas Stonys • Edited

Is there a difference between React or ReactJS, and React or React Native? Also what's the difference between NodeJS V8 and Chromes V8 engines? Can you write React Native without NodeJS? Also, why you want to use NodeJS in the first place for ReactJS web applications? :D

Collapse
 
luispa profile image
LuisPa • Edited

Ok,

React === ReactJS === React.js

React !== React Native: medium.com/@alexmngn/from-reactjs-...

Relationship between V8 and Node: stackoverflow.com/questions/426161...

This post is an example to how to “try React without Node” as a middleware to parse the jsx code to render it as a common JavaScript.

Most of the tools to start with React requires Node to start. Like, create-react-app, next.js, Gatsby, etc. This is a simple, basic and fast way to read and understand how React is just a way to write web apps. :)

Collapse
 
liudasstonys profile image
Liudas Stonys

WOW! Thank you very much, sir, for clearing my confusion! <3 Respect! :)

Thread Thread
 
luispa profile image
LuisPa

You’re welcome, Liudas!

Collapse
 
pyflon profile image
Carlos Vazquez

Thank you, I wanted so much to find this kind of tutorial, tooling in React is just cumbersome, opinionated and tiresome.

Collapse
 
luispa profile image
LuisPa

Sure!

This is just a simple and basic example, to get hands on react. I don’t recommend this on production btw.

I guess the best approach to learn react in today is using create-react-app.

Collapse
 
pyflon profile image
Carlos Vazquez

Yes, absolutely, it's just that you don't teach someone to swim at the deep end of the pool, you get just as scared when learning these new ideas and concepts, so (in my case anyways) I would have just dropped it a few weeks ago, I'll just keep going now.

Thread Thread
 
luispa profile image
LuisPa

Sure! Another great resource it's using CodeSandbox.com, stackblitz.com or Repl.it. They offer a good environment to start coding on the fly.

Collapse
 
tom29 profile image
Tom29

how's about routing?

Collapse
 
tvwxyz profile image
tvwxyz

This is SOOO much better than having to install and configure Node.js! I just want to create React applications with my existing file structure. Thanks for this! :)

Collapse
 
luispa profile image
LuisPa

So glad you liked it! I think it needs to be updated...

Collapse
 
sebastiannielsen profile image
Sebastian-Nielsen

Can I have a script tag in the html file in which I link to a jsx ?

Collapse
 
vt107 profile image
Van Tho • Edited

< script type="text/babel" src="/link/to/jsx" >< /script >
I've try and it works.

Collapse
 
weingartenharel profile image
WeingartenHarel

how ro import app.js to this html react project?

Collapse
 
kylemac1996 profile image
kylemac1996

Can I use functional components this way to use hooks or is it impossible

Collapse
 
afzalzbr profile image
Afzal Zubair

did you find any way to do this?

Collapse
 
sk909923 profile image
sk909923

here there is no node modules. but i used node modules(big-calendar,material-ui,moment) then how can i run in htlm file could you please explain

Collapse
 
zerkotin profile image
Itzik Cohen Arazi • Edited

Question, can i combine scripts with type=“module” and somehow combine it with your method and have a complete react app without node or a bundler, but still maintain nice file structure and classes?