CODEWITHSUNDEEP
node.jselectron
Dr.YSG
Dr.YSG

Reputation: 7591

Electron require mystery

I am using electron 1.5.

On the render process I have tried three different ways of including react. All work, and that has me realy confused. Can anyone explain?

  1. I have put react directly in the window.html
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
  1. I have removed it from the window.html and put it in the window.js

require('react'); require('react-dom')

  1. I have removed it both from the window.js and window.html, and it STILL WORKS.

I am using Babel with the es2016 preset to process the following JSX file:

(counter.js) is being read in in the window.html

<script src="jsx/Counter.js"></script>

Counter.jsx

class Welcome extends React.Component {
  render() {
    return <h1>Hello Again, {this.props.name}</h1>;
  }
}

class CountWidget extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.value}</h1>
        <button onClick={this.props.onIncrement}>+</button>
        <button onClick={this.props.onDecrement}>-</button>
      </div>);
  }
}

I am not using any bundlers, or builders, just babel.

{
  "version": "0.1.0",
  "name": "index",
  "main": "main.js",
  "license": "MIT",
  "repository": {
    "url": "https://gitlab.draper.com/ysg4206/NodeWork.git",
    "type": "git"
  },
  "dependencies": {
    "jquery": "^3.1.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "redux": "^3.6.0",
    "redux-devtools": "^3.3.2",
    "redux-devtools-extension": "^1.0.0",
    "t7": "^0.3.2"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-env": "^1.1.8",
    "babel-preset-es2016": "^6.22.0",
    "babel-preset-es2016-node5": "^1.1.2",
    "babel-preset-react": "^6.22.0",
    "devtron": "^1.4.0",
    "electron": ">=1.4.15",
    "electron-devtools-installer": ">=2.0.0",
    "electron-packager": "^8.5.1"
  },
  "babel": {
    "sourceMaps": "inline",
    "presets": [
      "react",
      "es2016-node5"
    ]
  }
}

Upvotes: 0

Views: 118

Answers (3)

Dr.YSG
Dr.YSG

Reputation: 7591

My eyes got crossed from looking at too much Javascript code. I am using Visual Studio Code, and it has a insert comment feature (CTRL-/) or SHFT-ALT-A

but it is inserting javascript style comments into my HTML file

// <script src="./node_modules/react/dist/react.js"></script>
// <script src="./node_modules/react-dom/dist/react-dom.js"></script>

Which does nothing. Mystery solved. Thanks so much guys, you are great @num8er, etc.

I am going to submit this as a bug to the vscode folks.

Upvotes: 1

slebetman
slebetman

Reputation: 113896

React.js is a framework that uses a language invented by Facebook called jsx. What react.js is is actually a compiler that compiles jsx down to pure javascript that has no dependencies on any external libraries.

There are two ways to compile jsx.

  1. Compile jsx server-side which would generate a stand-alone js file that you can just include in your html.

  2. For development purposes you can optionally include the react.js library in your html which would allow you to include jsx files directly to be compiled in the browser. Since this slows down page load it is not recommended to do this on production.

Since in your comment you mention you include the compiled js file instead of the jsx file in your html then you don't need to include anything else for React.js to work

Upvotes: 0

Hum4n01d
Hum4n01d

Reputation: 1370

I don’t think that it matters where you include the libraries. You can use require("react"), <script src="./path/to/react.js"></script> or import it.

Upvotes: 0

Related Questions