React JSX working without importing React

Question

I'm trying to run my first React JSX file and it works! However, I don't have these two import statements included in my JSX:

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

I thought I would need these two imports so that when the JSX was transpiled to JS (by React.createElement), the React component would be in scope. But it seems to work even without the two imports.

How is it that this works without the imports?

Here is my code:

script.jsx:

var Main = React.createClass({
    getIntialState: function () {
        return {
            counter: 0
        };
    },
    clickHandler: function () {
        return {
            counter: this.state.counter + 1
        };
    },
    render: function () {
        return (
            <button onClick={this.clickHandler}>+2</button>
        )
    }
});

package.json

{
  "name": "reactjs",
  "version": "1.0.0",
  "description": "",
  "main": "react.js",
  "dependencies": {
    "webpack": "^1.13.3"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "webpack --watch",
   "build": "webpack -p"
  },
  "author": "",
  "license": "ISC"
}

HTML file

<html>
<head>

    <title>
        !My first React JS Component!
    </title>
</head>
<body>
    <div id="root"></div>
    <script src="react.js"></script>
    <script src="output.js"></script>
</body>
</html>

webpack.config.js

module.exports = {
    entry: "./app/script.jsx",
    output: {
        filename: "output.js"
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader'
            }
        ]
    }
}

You are probably using the file in a global scope with <script>. How is your project built ? — Dor Weid
– Dor Weid, Commented Dec 3, 2016 at 17:32
I've a script tag in my HTML file like <script src="output.js"></script>. My project is built using webpack bundle which use babel-loader — JavaNovice
– JavaNovice, Commented Dec 3, 2016 at 17:41
What are the contents of react.js? Is that a copy of the React library? — Aurora0001
– Aurora0001, Commented Dec 3, 2016 at 17:58
Okay, I think I found it myself. It's because I have included react.js in my script tag as @DorWeid has pointed out. So it works even without the import. thanks all and sorry to be dumb! — JavaNovice
– JavaNovice, Commented Dec 3, 2016 at 17:58
Yes, it's the copy of the react library :-) That explains it. Sorry and thanks! — JavaNovice
– JavaNovice, Commented Dec 3, 2016 at 18:00

JavaNovice · Accepted Answer · 2016-12-03 18:06:56Z

4

It's because I have included react.js in my script tag as @DorWeid has pointed out. So it works even without the import. thanks all and sorry to be dumb!

answered Dec 3, 2016 at 18:06

JavaNovice

1,1521 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React JSX working without importing React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related