Last active
August 21, 2018 00:09
-
-
Save ahmedmusawir/3fadfe423b45e11dbf01be9e41089ee3 to your computer and use it in GitHub Desktop.
REACT - HTML + APP.JS + OTHER JS MODULES - HOW TO LOAD THEM IN AN HTML FILE W/ SCRIPT TAG & ES6 + BABLE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| HTML FILE: | |
| ---------- | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> | |
| <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script> | |
| <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
| <title>React Inline</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="./Hello.js" type="text/babel"></script> | |
| <script src="./Func.js" type="text/babel"></script> | |
| <script src="./app.js" type="text/babel"></script> | |
| </body> | |
| </html> | |
| ------------------ | |
| REACT APP.JS FILE | |
| ------------------ | |
| class App extends React.Component { | |
| handleClick(e) { | |
| console.log('whaap'); | |
| } | |
| render() { | |
| return ( | |
| <div className="app-content container"> | |
| <h1 className="jumbotron text-info">React Works!</h1> | |
| <article> | |
| <h3 className="text-danger">Bootstrap 4 Added</h3> | |
| <p> | |
| Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate | |
| eos fugiat vel necessitatibus dolores molestiae quas, praesentium | |
| similique, est minima consequatur sit aspernatur nostrum nulla et | |
| maxime maiores distinctio possimus! | |
| </p> | |
| <button className="btn btn-danger" onClick={this.handleClick}> | |
| Click Works! | |
| </button> | |
| </article> | |
| <Hello /> | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<App />, document.getElementById('app')); | |
| -------------------------------------- | |
| HELLO.JS FILE W/ HELLO CLASS COMPONENT | |
| -------------------------------------- | |
| class Hello extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <h1 className="mt-5">Hello Component</h1> | |
| <ul className="list-group"> | |
| <li className="list-group-item">Item 1</li> | |
| <li className="list-group-item">Item 2</li> | |
| <li className="list-group-item">Item 3</li> | |
| <li className="list-group-item">Item 4</li> | |
| <li className="list-group-item">Item 5</li> | |
| </ul> | |
| </div> | |
| ); | |
| } | |
| } | |
| --------------------------------- | |
| FUNCTIONAL COMPONENT FROM FUNC.JS | |
| --------------------------------- | |
| const Func = () => { | |
| return ( | |
| <div className="card bg-faded mb-5"> | |
| <div className="card-block p-5 bg-danger"> | |
| <h2 className="text-warning">This is a Function based component</h2> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment