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

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

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

React without npm

1 Answers