Wie zu nennen, und bilden eine React.js Funktion von HTML

Habe ich eine React.js Datei für alle meine Codes die ich nach unten, wie würde ich mich über diese aufrufen von html jedoch, es enthält eine ganze Menge Informationen, wie ein Ergebnis, ich bin unsicher, was genau zu tun ist, ich habe versucht, mehrere Male im Laufe von mehreren Tagen, habe ich viele Dinge versucht, jedoch habe ich bisher nicht herausfinden aus, wie aufrufen, die JavaScript aus HTML -, tief ich würde schätzen etwas Hilfe in dieser Angelegenheit Ich sollte anmerken, dass ich ziemlich neu in HTML, wie in ich habe nur die Arbeit mit ihm für mehrere Tage, und als ein Ergebnis, mein wissen ist nicht allumfassend, jede Hilfe würde geschätzt, Anregungen und sagen Sie mir, welche Fragmente meinem code falsch sind, ich hoffe ich höre von jeder bald!

EDIT: um Zu klären, ich bin nur auf der Suche, um zu lernen, wie Sie rufen die JavaScript-Funktion aus HTML, weitere Informationen würde sehr geschätzt werden, wenn.

EDIT 2: ich habe ernsthaft Probleme mit, egal wie viel ich lese, scheinen unfähig zu sein, zu wickeln meinem Kopf herum, die Allgemeinen Konzepte.

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"));

Ich bin einfach davon ausgegangen, dass war wie es gemacht wurde, als ich sagte, dass ich nur abgeholt, JavaScript, HTML und CSS am Montag, so dass ich in keiner Weise wissen, die Art und Weise, dass die Dinge getan werden sollte.
Auch Dinge, die sind in der Regel leichter, wenn Sie Seetang, den JavaScript in eine eigene Datei(en), anstatt mischen in den HTML-Code. (Und übrigens require("babel-core").transform("code", options) ist nur noch zum umwandeln der Zeichenkette "code".)
Was würden Sie empfehlen Ihnen, die ich tun, gibt es eine gute Seite für die Suche nach Informationen über react.js ich habe mir an vielen Sehenswürdigkeiten, aber die Beispiele sind zu einfach, nicht zu zeigen, was ich hätte tun müssen, eine Datei mit diesem großen.
Auch, ein bisschen Ausarbeitung wäre schön
Warum nicht die offiziellen reagieren tutorial? facebook.github.io/react/docs/getting-started.html
Jedoch habe ich die guides nicht bekommen Fortgeschritten genug, um meine knolege
Haben Sie vergessen, setzen Sie ein <div id='react-container'></div> im html? Es scheint, Sie brauchen nicht zu nennen, etwas in HTML als javascript bereits versucht zu Rendern, das React-Komponente. Es kann einfach nicht finden, das element zu Rendern.
Leider scheint das nicht getan haben, der trick, danke für den Versuch aber

InformationsquelleAutor Jake Orben | 2016-07-16

Habe ich behoben mehrere Probleme mit dem geposteten code:

Reagieren, Stil-Kommentare sind nicht erlaubt, außerhalb der JSX-tag verwenden, sollten Sie das normale JS Kommentare. (z.B. entfernen der {}).
Sie sollten entfernen Sie alle id-Attribute in Komponenten Reagieren. Diese ids sollten in der container-Elemente in den HTML-code. In jedem Fall ist es immer eine gute Idee zu ändern-ids für die Klassen, um zu ermöglichen, mit mehrmals der gleichen Komponente.
Komponenten müssen mit einem Großbuchstaben beginnen, um Sie zu unterscheiden von HTML-tags. Daher habe ich umbenannt in iOS zu IOS.
Habe ich auch geändert, die URL Reagieren die Bibliotheken, die stackoverflow nicht erlaubt, die Ausführung von scripts von der fb.mich domain.

Wird, um die Komponenten in Ihren HTML-code müssen Sie transpile Ihre JSX-code in regelmäßigen JS. Um dies zu tun, haben Sie mehrere Möglichkeiten: Webpack, Browserify, Babel, auch in-browser-Konvertierung. Je nach Größe und Komplexität Ihrer Anwendung einige Methoden sind besser geeignet als andere. Ich würde empfehlen, Sie beginnen mit dem einfachsten und dann ändern Sie es für mehr leistungsstarke tools, wie webpack, wenn Sie sicher sind mit dem Reagieren ein Teil. Lernen und die Konfiguration dieser tools kann ziemlich frustrierend sein, so würde ich vermeiden, bis das nötig ist.

JS:

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"));

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

Vielen Dank, ich war nicht auf der Suche nach jemanden der für mich arbeiten, aber ich es sehr zu schätzen, werde ich nutzen, um zu lernen, mehr von der Sprache, so dass ich nicht immer machen, Anfängerfehler
Ich habe auch eine Frage, bei der man den code genauer, so bemerkte ich, dass, wenn Sie anrufen, 'nav', Sie ruft nicht 'NavBar', warum ist das so, ich finde keine variable für nav, aber es funktioniert... in einem Umfang, es sollte mehr text im 'NavBar'
schlagen Sie das Teil über fehlende text, verpasste ich ein paar Zeilen wegen der fehlenden CSS
Wie werden diese beiden Dateien verbunden. /?

InformationsquelleAutor Manolo Santos

0

Müssen Sie zum Rendern Ihrer Komponente mit ReactDOM. So heißt es auf der blog

"Wenn Sie in der Reagieren Welt, Sie sind nur Bauteile, die sich in anderen Komponenten. Alles ist eine Komponente. Leider nicht alles, was um Sie herum gebaut mit Reagieren. An der Wurzel des Baums haben Sie immer noch schreiben, Sanitär-code, um die Verbindung der äußeren Welt zu Reagieren."

In Reagieren Sie nicht, rufen Sie die Komponente aus der html fügen Sie ihn in den DOM aus Ihrer script-Datei.

Also für dein Beispiel ließe sich auch
```
<div id ="app"></div>
```
in den html-Code.

Dann, in index.js verwenden ReactDOM (vergessen Sie nicht die library) zum Rendern von youur Komponente der DOM. Ich verwende jsx, da es so aussieht, wie Sie sind.
```
ReactDOM.render(<NewComponent />, document.getElementById('app'));
```
Einer der besseren Artikel, die ich gefunden habe, umreißt die Reagieren workflow einschließlich der Einrichtung Babel, Webpack, hot nachladen, und ein basic-Anwendung Struktur ist hier

Nun, Sie haben eine Menge von Komponenten, die jeweils deklarierte Variablen mit dem gleichen Namen, so werden Sie auch brauchen, um das zu beheben.

InformationsquelleAutor BMcV

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.