React without npm

Question

How to import js file with code on Babel if i'm not using npm? I'm write my own server on Golang and serving html and js files.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO APP</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type='text/babel' src="./js/App.js"></script>
    <script type='text/babel' src="./js/Info.js"></script>
</body>
</html>

App.js

class App extends React.Component {
  render(){
    return(
      <div>
        <span onClick={() => {alert('clicked')}}>{Date.now().toString()}</span>
        <Info />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

Info.js

export default class Info extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: true,
        };
        this.handleClick = this.handleClick.bind(this);
    }
    render() {
        const text = <label htmlFor="new-text">{this.state.isOpen ? 'Open' : "Closed"}</label>
        return (
            <div>
                <button onClick={this.handleClick}>
                    {text}
                </button>
            </div>
        )
    }
    handleClick(e) {
        this.setState({
            isOpen: !this.state.isOpen,
        })
    }
}

So i didn't know how to add Info to App. import didn't work cause i'm not using npm.

"import didn't work cause i'm not using npm" - it's not about if you're using npm or not, import depends on EScript version. What about require? — kind user
– kind user, Commented Dec 2, 2018 at 11:51

Santosh · Accepted Answer · 2018-12-02 12:01:38Z

3

Import and export won't work. You need to add the script tags in proper order so that the dependencies are resolved.

index.html

<html>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- Order is important -->
    <script src="/info.js" type="text/babel"></script>
    <script src="/index.js" type="text/babel"></script>

</body>
</html>

info.js

class Info extends React.Component {
  render(){
    return(
      <div>
        Hello World Info
      </div>
    )
  }
}

index.js

class App extends React.Component {
  render(){
    return(
      <div>
        Hello World
        <Info/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

answered Dec 2, 2018 at 12:01

Santosh

1,8391 gold badge19 silver badges37 bronze badges

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

3 Comments

Sam.L Over a year ago

ok, it's works. But if i have a lot of js files, i still should add it like this?

Santosh Over a year ago

Yes, unless you are using module loader like webpack, you will have to manage the dependencies manually.

Kaleem Elahi Over a year ago

@Santosh I did same, But getting errors like: 1. babel.min.js:24 Access to XMLHttpRequest at 'file:///Users/upforce/workspace/unNpmReact/info.js' from origin 'null' has been blocked by CORS policy: 2. Uncaught TypeError: Cannot read property 'loaded' of undefined 3. babel.min.js:24 Access to XMLHttpRequest at 'file:///Users/upforce/workspace/unNpmReact/app.js' from origin 'null' has been blocked by CORS policy

Collectives™ on Stack Overflow

React without npm

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related