2016-07-16 166 views
5

Ho creato un file React.js per tutto il mio codice che posterò qui sotto, come potrei fare per chiamare questo dall'html, tuttavia, contiene una fiera quantità di informazioni, di conseguenza, non sono sicuro di cosa fare, ho provato diverse volte nel corso di diversi giorni, ho provato molte cose, tuttavia, non sono stato in grado di capire come chiamare il JavaScript da HTML, gradirei molto l'aiuto in questa materia, dovrei notare che sono abbastanza nuovo in HTML, in quanto ho lavorato con lui solo per diversi giorni, di conseguenza la mia conoscenza non è completa, qualsiasi aiuto sarebbe essere apprezzato, suggerimenti e mi dice quali frammenti del mio codice sono sbagliati, spero di sentirli presto!Come chiamare e formare una funzione React.js da HTML

EDIT: Per chiarire, sto solo cercando di imparare come chiamare questa funzione JavaScript da HTML, qualsiasi altra informazione sarebbe molto apprezzata.

EDIT 2: Sto seriamente avendo problemi con questo, non importa quanto leggo, mi sembra di non essere in grado di avvolgere la mia testa intorno ai concetti generali.

index.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="description" content="BonApp"> 
    <meta name="keywords" content="HTML,CSS,JavaScript"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 
    <link href="index.css" type="text/css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> 
    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script> 
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" /> 
    <link rel="stylesheet" type="text/css" href="slick.css" /> 
    <link rel="stylesheet" type="text/css" href="slick-theme.css" /> 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script> 
    <script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591530_1796350410598576_924751100_n.js"></script> 
    <script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591520_511026312439094_2118166596_n.js"></script> 
    <title>BonApp</title> 
</head> 

<body> 
I don't know what to do here. 
</body> 

<script type="text/javascript"> 
    $('.autoplay').slick({ 
     slidesToShow: 2 
     , slidesToScroll: 1 
     , autoplay: true 
     , autoplaySpeed: 2000 
    , }); 
</script> 

</html> 

index.js

require("babel-core").transform("code", options); 

var NavBar = React.createClass({ 
    render: function() { 
    return (

     {/* Navigation */} 
     <div id="nav" className="dark_bg_color"> 
     <img src="logo.png" /> 
     <div className="table_center"> 
      <div> 
      <ul> 
       <li>daily specials</li> 
       <li>gift gallery</li> 
       <li>events</li> 
       <li><i className="fa fa-search" />&nbsp;search</li> 
      </ul> 
      </div> 
     </div> 
     <div className="right_nav"> 
      <div className="table_center"> 
      <div> 
       <button type="button">Sign Up</button> 
       <button type="button">Log In</button> 
       <div className="vertical-line">&nbsp;</div> 
       <button type="button">Cart</button> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<NavBar />, document.getElementById('nav')); 

var Gallery = React.createClass({ 
    render: function() { 
    return (

     {/* Picture Gallery */} 
     <div id="Gallery"> 
     <div align="middle"> 
      <div id="head"> 
      <img id="pic" align="middle" max-width="100%" src="title_pic.png" /> 
      <div align="left" className="big"> 
       <div> 
       <span>Dine with the Best</span> 
       <div className="words"> 
        <span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<Gallery />, document.getElementById("Gallery")); 

var WhatsNew = React.createClass({ 
    render: function() { 
    return (

     {/* What's New */} 
     <div id="whatsnew" className="dark_bg_color"> 
     <h2 style={{marginBottom: 30}}> 
      <span>What's New</span> 
     </h2> 
     <div className="autoplay"> 
      <img src="whatsnew0.png" /> 
      <img src="whatsnew1.png" /> 
      <img src="whatsnew0.png" /> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew")); 

var BonEvents = React.createClass({ 
    render: function() { 
    return (

     {/* Bon Events */} 
     <div id="events" className="dark_bg_color"> 
     <div className="box"> 
      <div className="box-text"> 
      <div className="horizontal-line" /> 
      <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div> 
      <div className="horizontal-line" /> 
      </div> 
     </div> 
     <h2> 
      <span>Bon Events</span> 
     </h2> 
     <div> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<BonEvents />, document.getElementById("events")); 

var iOS = React.createClass({ 
    render: function() { 
    return (

     {/* iOS App */} 
     <div id="advertiseApp"> 
     <h2> 
      <span /> 
     </h2> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<iOS />, document.getElementById("advertiseApp")); 

var Footer = React.createClass({ 
    render: function() { 
    return (

     {/* Footer */} 
     <div id="footer"> 
     <div className="footer_center"> 
      <div> 
      <ul> 
       <li>ABOUT</li> 
       <li>PRESS</li> 
       <li>CONTACT</li> 
       <li>SUPPORT</li> 
       <li>BONAPP FOR RESTAURANTEURS</li> 
      </ul> 
      </div> 
     </div> 
     <div className="legal_center"> 
      <div> 
      <ul> 
       <li>Copyright © 2016 BonApp Dining Inc.</li> 
       <li>Privacy Policy</li> 
       <li>Legal</li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<Footer />, document.getElementById("footer")); 
+0

Perché avete bisogno di chiamare da HTML? – gcampbell

+0

Ho appena dato per scontato che fosse così, come ho detto, ho rilevato solo JavaScript, HTML e CSS lunedì, quindi non conosco il modo in cui le cose dovrebbero essere fatte. –

+0

Bene, le cose tendono a essere più semplici quando si esegue il kelp di tutto il codice JavaScript nei propri file piuttosto che nel codice HTML. (E tra l'altro 'require (" babel-core "). Transform (" code ", options)' sta solo per trasformare la stringa "code".) – gcampbell

risposta

2

ho fissato diversi problemi con il codice scritto:

  • Reagire commenti di stile non sono consentiti al di fuori di un tag JSX, si consiglia di utilizzare le normali commenti JS. (ad esempio, rimuovi {}).
  • È necessario rimuovere tutti gli attributi id nei componenti React. Questi ID dovrebbero andare negli elementi del contenitore nel codice HTML. In ogni caso, è sempre una buona idea cambiare id per le classi in modo da permettere di utilizzare più volte lo stesso componente.
  • I componenti devono iniziare con una lettera maiuscola per differenziarli dai tag HTML. Pertanto, ho rinominato iOS in IOS.
  • Ho anche modificato l'URL delle librerie React come stackoverflow non consente l'esecuzione di script dal dominio fb.me.

Per includere i componenti nel codice HTML, è necessario trasporre il codice JSX nel JS regolare. Per fare ciò, hai diverse opzioni: Webpack, Browserify, Babel, persino la conversione nel browser. A seconda delle dimensioni e della complessità dell'applicazione, alcuni metodi sono più adatti di altri. Ti consiglierei di iniziare con quello più semplice e poi modificarlo per strumenti più potenti, come il webpack, quando sei sicuro della parte React. Imparare e configurare questi strumenti può essere piuttosto frustrante, quindi li eviterei fino alla necessità.

var NavBar = React.createClass({ 
 
    render: function() { 
 
    return (
 
     /* NavBar */ 
 
     <div className="dark_bg_color"> 
 
     <img src="logo.png" /> 
 
     <div className="table_center"> 
 
      <div> 
 
      <ul> 
 
       <li>daily specials</li> 
 
       <li>gift gallery</li> 
 
       <li>events</li> 
 
       <li><i className="fa fa-search" />&nbsp;search</li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div className="right_nav"> 
 
      <div className="table_center"> 
 
      <div> 
 
       <button type="button">Sign Up</button> 
 
       <button type="button">Log In</button> 
 
       <div className="vertical-line">&nbsp;</div> 
 
       <button type="button">Cart</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
ReactDOM.render(<NavBar />, document.getElementById('nav')); 
 

 
var Gallery = React.createClass({ 
 
    render: function() { 
 
    return (
 
     /* Gallery */ 
 
     <div > 
 
     <div align="middle"> 
 
      <div id="head"> 
 
      <img id="pic" align="middle" max-width="100%" src="title_pic.png" /> 
 
      <div align="left" className="big"> 
 
       <div> 
 
       <span>Dine with the Best</span> 
 
       <div className="words"> 
 
        <span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
ReactDOM.render(<Gallery />, document.getElementById("Gallery")); 
 

 
var WhatsNew = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div className="dark_bg_color"> 
 
     <h2 style={{marginBottom: 30}}> 
 
      <span>What's New</span> 
 
     </h2> 
 
     <div className="autoplay"> 
 
      <img src="whatsnew0.png" /> 
 
      <img src="whatsnew1.png" /> 
 
      <img src="whatsnew0.png" /> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew")); 
 

 
var BonEvents = React.createClass({ 
 
    render: function() { 
 
    return (
 
     /* Events */ 
 
     <div id="events" className="dark_bg_color"> 
 
     <div className="box"> 
 
      <div className="box-text"> 
 
      <div className="horizontal-line" /> 
 
      <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div> 
 
      <div className="horizontal-line" /> 
 
      </div> 
 
     </div> 
 
     <h2> 
 
      <span>Bon Events</span> 
 
     </h2> 
 
     <div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
ReactDOM.render(<BonEvents />, document.getElementById("events")); 
 

 
var IOS = React.createClass({ 
 
    render: function() { 
 
    /* IOS */ 
 
    return (
 
     <div > 
 
     <h2> 
 
      <span /> 
 
     </h2> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
ReactDOM.render(<IOS />, document.getElementById("advertiseApp")); 
 

 
var Footer = React.createClass({ 
 
    render: function() { 
 
    return (
 
     /* Footer */ 
 
     <div> 
 
     <div className="footer_center"> 
 
      <div> 
 
      <ul> 
 
       <li>ABOUT</li> 
 
       <li>PRESS</li> 
 
       <li>CONTACT</li> 
 
       <li>SUPPORT</li> 
 
       <li>BONAPP FOR RESTAURANTEURS</li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div className="legal_center"> 
 
      <div> 
 
      <ul> 
 
       <li>Copyright © 2016 BonApp Dining Inc.</li> 
 
       <li>Privacy Policy</li> 
 
       <li>Legal</li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
ReactDOM.render(<Footer />, document.getElementById("footer"));
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    
 

 
    <meta charset="UTF-8"> 
 
    <meta name="description" content="BonApp"> 
 
    <meta name="keywords" content="HTML,CSS,JavaScript"> 
 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 
 
    <link href="index.css" type="text/css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> 
 
    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" /> 
 
    <link rel="stylesheet" type="text/css" href="slick.css" /> 
 
    <link rel="stylesheet" type="text/css" href="slick-theme.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-with-addons.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>  
 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script> 
 
    <script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591530_1796350410598576_924751100_n.js"></script> 
 
    <script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591520_511026312439094_2118166596_n.js"></script> 
 
    
 
    <title>BonApp</title> 
 
</head> 
 

 
<body> 
 
    <div id="nav"></div> 
 
    <div id="Gallery"></div> 
 
    <div id="whatsnew"></div> 
 
    <div id="advertiseApp"></div> 
 
    <div id="events"></div> 
 
    <div id="footer"></div> 
 
</body> 
 

 
<script type="text/javascript"> 
 
    $('.autoplay').slick({ 
 
     slidesToShow: 2 
 
     , slidesToScroll: 1 
 
     , autoplay: true 
 
     , autoplaySpeed: 2000 
 
    , }); 
 
</script> 
 

 
</html>

+0

Grazie mille, non stavo cercando qualcuno per fare il lavoro per me ma lo apprezzo molto, lo userò per saperne di più la lingua in modo che non debba continuare a fare errori da principiante –

+0

Ho anche una domanda, dopo aver osservato il codice più da vicino, ho notato che quando chiami "nav", non chiami "NavBar", perché è questo , non riesco a trovare nessuna variabile per nav, tuttavia funziona ... in una certa misura, ci dovrebbe essere più testo nel 'NavBar' –

+0

colpire la parte sul testo mancante, ho perso alcune righe a causa della mancanza di CSS –

0

È necessario per rendere il componente con ReactDOM. Come si dice sul blog

"Quando sei in Reagire del mondo si sta solo costruendo componenti che rientrano in altri componenti. Ogni cosa è un componente. Purtroppo non tutto intorno a te è costruito utilizzando reagire. Alla radice di il tuo albero devi ancora scrivere un codice idraulico per collegare il mondo esterno a React. "

In React non si chiama il componente da html, lo si inserisce nel DOM dal file di script.

Quindi, per il vostro esempio, è possibile includere

<div id ="app"></div> 

nel codice HTML.

Quindi, in index.js utilizzare ReactDOM (non dimenticare di includere la libreria) per eseguire il rendering del tuo componente nel DOM. Userò jsx dato che sembra che tu sia.

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

Uno degli articoli migliori che ho trovato che delinea il flusso di lavoro Reagire tra cui la creazione di Babel, Webpack, ricarico caldo, e una struttura di domanda di base è here

Ora, hai un sacco di I componenti sono tutti assegnati a variabili dichiarate con lo stesso nome, quindi sarà necessario correggerli.

Problemi correlati