DEV Community

LuisPa
LuisPa

Posted on

37 2

Let's try React without Node.js

react banner

Context of React

React is a Open Source JavaScript library for building user interfaces. Created and supported by Facebook.

You can find the documentation here: https://reactjs.org/tutorial/tutorial.html#overview

If you're a web developer that can handle HTML, CSS and JavaScript you can try React without Node.js or any other complex tool to manage this.

Easy as a cake!

1. Create a index.html with react, react-dom and babel references.

You can use this on your text editor.




<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Local</title>
<!-- Import the React, React-Dom and Babel libraries from unpkg -->
  <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
  <div id="root"></div>

<script type="text/javascript">

</script>

</body>

</html>


Enter fullscreen mode Exit fullscreen mode

2. Add text/babel script tag

Replace the script tag:


 html
<script type="text/javascript">

</script>


Enter fullscreen mode Exit fullscreen mode

for


html
<script type="text/babel">

</script>

Enter fullscreen mode Exit fullscreen mode



  1. Write any react example on the web in your new text/babel script tag

You have the most basic environment to try react, let's give it a try!



<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
<div id="root"></div>

<script type="text/babel">
// Obtain the root
const rootElement = document.getElementById('root')
// Create a ES6 class component
class ShoppingList extends React.Component {
// Use the render function to return JSX component
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Create a function to wrap up your component
function App(){
return(
<div>
<ShoppingList name="@luispagarcia on Dev.to!"/>
</div>
)
}

// Use the ReactDOM.render to show your component on the browser
ReactDOM.render(
<App />,
rootElement
)
</script>

</body>

</html>

Enter fullscreen mode Exit fullscreen mode




And that's it!

You can drag this index.html file to the browser and you will get your first try of react interface.

It's important to be clear that this way is the most weak and simple way to build a react application, if you want to explore more you can learn about react basics on this free course: https://egghead.io/courses/the-beginner-s-guide-to-reactjs

I hope you can give it a try, there's always a easy and simple way to do anything.

đź‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (19)

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

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
 
afzalzbr profile image
Afzal Zubair •

did you find any way to do this?

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
 
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

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay