Use React without nodejs

Question

I have a question about how to use React without Nodejs. I know there is a CDN link that we can use React like a normal script. But what I want is be able to import React like a module (es6) without Nodejs

From React source code I see import statement like this:

import ReactVersion from 'shared/ReactVersion';

But I think it only work with Nodejs, right? Because from what I know, es6 import statement requires to ".js" to be added

Is it possible? Do you have any idea?

Thanks for your help

The import statement isn't exclusive to Nodejs but to javascript. Both Nodejs and Reactjs are written in JS — Gilad Bar, Jul 09 '19 at 08:20
Your question suggests you haven't even tried the code you've posted... — Jack hardcastle, Jul 09 '19 at 08:21
You mean you don't want to use any compiler for converting ES6 to widely supported syntax ? — Ajay Varghese, Jul 09 '19 at 08:22
Hi @GiladBar What I concern is this: https://stackoverflow.com/questions/44481851/does-es6-import-export-need-js-extension — Thelearning, Jul 09 '19 at 08:27
@AjayVarghese I just updated my question to make it more clear. My concern is es6 import statement requires to have ".js" added (React does not do it) — Thelearning, Jul 09 '19 at 08:36
@Jackhardcastle I just updated my question to make it more clear. My concern is es6 import statement requires to have ".js" added (React does not do it) — Thelearning, Jul 09 '19 at 08:44
check this answer ... it worked for me.... https://stackoverflow.com/questions/56503939/can-i-use-es-modules-in-browser-with-babel-without-bundling-my-code — M.Hefny, Dec 26 '21 at 00:49

score 0 · Answer 1 · answered Jul 09 '19 at 08:21

0

You don't need nodejs to es6 syntax. If you are using es6 syntax then due to compatibility reason you need to transpile to es5. To do that you need some bundler like web pack or parcel. They can transpile your code to es5.

answered Jul 09 '19 at 08:21

Rahul Rana

455
2
7

1

I think es6 module import requires to put ".js" at import statement – Thelearning Jul 09 '19 at 08:28

score 0 · Answer 2 · answered Jul 09 '19 at 08:44

0

it's possible but deprecated because of the bad performance check this https://cdnjs.com/libraries/babel-standalone

babel-standalone or babel-browser enable you to use es6 syntax and then you can use babel directly in the browser without compiling, the compilation is happening on the fly. it's deprecated and not recommended anyway so if it's a real project use webpack with node.js to develop it and avoid this way

answered Jul 09 '19 at 08:44

M.Elkady

1,093
7
13

2

That is not what I am looking for. I am looking for a solution to use React as a pure es6 module without any compiler tool. – Thelearning Jul 09 '19 at 08:57
No way! react is a javascript library for browsers and browsers doesn't support es 6 modules – M.Elkady Jul 09 '19 at 09:01

vincent thorpe · Answer 3 · 2021-06-18T13:50:15.287

when you use nodejs you will see

import React from 'react';
import ReactDOM from 'react-dom';

Commonly known these React and ReactDom are classes wich have export function React(...) {...}

You can try downloading both scripts and saving into your local folder and then access it. The only thing you need to tell your main script is a module <script src="main.js" type="module"></script>.

Inside of your main.js you can put those import like this

// be aware how to access these scripts in different layers of folders
import '../react.development.js'
import '../react-dom.development.js'

var name = 'Josh Perez'

var element_rct = 'hello world'

ReactDOM.render(
  element_rct,
  document.getElementById('root')
)

This will work for you. Note: there's no JSX in this example only pure React

Use React without nodejs

3 Answers3