How can I add component (without import/export to html) in React variable global

Question

How can I add component (without import/export to html) in React variable global

Example

//HTML

<body>
    <div id="App"></div>

      <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
      <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
      <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></scrip   
      <script>
        var App, Search
      </script>

      <script type="text/babel" src="component/App.js"></script>
      <script type="text/babel" src="component/Search.js"></script>
  </body>

//App.js

var App = React.createClass({
    render: function() {

        var styles = {
            margin: '0 auto',
            border: '1 px solid red',
            width: '50%'
        };

        return (
          <div style={styles}>
                <h1>sdadasssd!</h1>
                <p>fgfgfgfggf</p>
          </div>
        );
    }
});

//Search.js

var Search = React.createClass({
   render: function() {
    var styles = {fontSize: '1.5em', width: '90%', maxWidth: '350px'};
    return <input
             type="text"
             placeholder="gfgff"
             style={styles}
            />
  }
});

How can I add component (without import/export to html) in React variable global

Answer 1

If by add you mean render to html, use:

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

Demo:

 var App = React.createClass({ render: function() { var styles = { margin: '0 auto', border: '1 px solid red', width: '50%' }; return ( <div style={styles}> <h1>sdadasssd!</h1> <p>fgfgfgfggf</p> </div> ); } }); ReactDOM.render( <App />, document.getElementById('App') );

 <div id="App"></div> <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"> <script> var App, Search </script> <script type="text/babel" src="component/App.js"></script>

How can I add component (without import/export to html) in React variable global

Question

1 answers

solution1
0 2017-10-24 21:02:27

How can I add component (without import/export to html) in React variable global

Question

1 answers

solution1 0 2017-10-24 21:02:27

solution1
0 2017-10-24 21:02:27