How to call and form a React.js function from HTML

Question

I have created a React.js file for all of my code which I will post below, how would I go about calling this from the html however, it contains a fair amount of information, as a result, I am unsure exactly what to do, I have tried several times over the course of several days, I have tried many things, however, I have been unable to figure out out how to call the JavaScript from HTML, I would deeply appreciate some help in this matter, I should note that I am fairly new to HTML, as in I have only been working with it for several days, as a result, my knowledge is not all encompassing, any help would be appreciated, suggestions as well as telling me which fragments of my code are wrong, I hope to hear from everybody soon!

EDIT: To clarify, I am only looking to learn how to call this JavaScript function from HTML, any other information would be greatly appreciated though.

EDIT 2: I am seriously having trouble with this, no matter how much I read, I appear to be unable to wrap my head around the general concepts.

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

I just assumed that was how it was done, as I said I only picked up JavaScript, HTML and CSS on monday, so I in no way know the way that things should be done. — user1709237
– user1709237, Commented Jul 16, 2016 at 18:35
Well things tend to work out easier when you kelp all the JavaScript in its own file(s) rather than mixing it in the HTML. (And by the way require("babel-core").transform("code", options) is only going to transform the string "code".) — gcampbell
– gcampbell, Commented Jul 16, 2016 at 18:38
What would you recomment I do, is there a good site for finding information about react.js, I have looked at many sights, but all of the examples are too simple, not showing what I would need to do with a file this large. — user1709237
– user1709237, Commented Jul 16, 2016 at 18:58
Why not do the official react tutorial? facebook.github.io/react/docs/getting-started.html — azium
– azium, Commented Jul 17, 2016 at 0:25

Manolo Santos · Accepted Answer · 2016-07-22 13:07:24Z

I have fixed several problems with the posted code:

React style comments are not allowed outside of a JSX tag, you should use normal JS comments. (e.g. remove the {}).
You should remove all the id attributes in React components. This ids should go in the container elements in the HTML code. In any case, it is always a good idea to change ids for classes in order to allow using several times the same component.
Components must start with an uppercase letter to differentiate them from HTML tags. Therefore, I have renamed iOS to IOS.
I have also changed the URL of the React libraries as stackoverflow doesn't allow executing scripts from the fb.me domain.

In order to include the components into your HTML code you have to transpile your JSX code into regular JS. In order to do so, you have several options: Webpack, Browserify, Babel, even in-browser conversion. Depending on the size and complexity of your application, some methods are more suitable than others. I would recommend you to start with the simplest one and then change it for more powerful tools, like webpack, when you are confident with the React part. Learning and configuring these tools can be rather frustrating, so I would avoid them until the need comes.

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>

Thank you so much, I was not looking for someone to do the work for me but I greatly appreciate it, I will use it to learn more of the language so that I don't have to keep making rookie mistakes
I also have a question, upon looking at the code more closely, i noticed that when you call 'nav', you are not calling 'NavBar', why is this, i can find no variable for nav, however it works... to an extent, there should be more text in the 'NavBar'
strike the part about missing text, I missed a few lines owing to the lack of CSS

BMcV · Accepted Answer · 2016-07-21 12:40:57Z

You need to render your component with ReactDOM. As it says on the blog

"When you're in React's world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React."

In React you don't call the component from the html, you insert it into the DOM from your script file.

So, for your example, you might include

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

into the html.

Then, in index.js use ReactDOM (don't forget to include the library) to render youur component to the DOM. I'll use jsx since it looks like you are.

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

One of the better articles I've found outlining the React workflow including setting up Babel, Webpack, hot reloading, and a basic application structure is here

Now, you've got a lot of Components all assigned to declared variables of the same name so you will also need to fix that.

Collectives™ on Stack Overflow

How to call and form a React.js function from HTML

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related