I'm extremely new to ReactJS and am trying to use it to make a simple fitness web app. Currently, if I was to do this using JQuery, I would end up with a thousand lines in a single file, which isn't what I want, so I'm trying to get as much externalisation in as possible while keeping one html file. The premise is that when the user hits the page, the "Main" class will be rendered to the screen. When they press one of the video images, the DOM will unrender the main and replace it with the specific page linked to the video. As thing stand, I'm trying to create large classes full of html to render each time, and it's throwing a simple error that I don't understand enough to fix. Could you explain to me what I'm doing wrong.
Index.html
<!DOCTYPE html> <html> <head> <title> Get Fit </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500' rel='stylesheet' type='text/css'> <link href = "css/styles.css" rel = "stylesheet"> <script type = "text/javascript" src = "js/male.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("button").removeClass("active"); $(this).addClass("active"); }); }); </script> </head> <body> </body> </html> Male.js
var Main = React.createClass({ render: function() { return ( <div class = "header"> <img class = "img-responsive" src = "assets/header.png" alt = "header" /> </div> <div class = "content"> <div class = "genderSelection"> <h1 class = "title"> YOUR WORKOUT PLAN </h1> <button id = "male"> Male </button> <button id = "female"> Female </button> </div> <div class = "dayContainer"> <h2 class = "workoutDay"> Monday </h2> <img class = "video img-responsive" src = "assets/back.png" alt = "monday-1" /> <img class = "video img-responsive" src = "assets/back.png" alt = "monday-2" /> <img class = "video img-responsive" src = "assets/back.png" alt = "monday-3" /> <img class = "video img-responsive" src = "assets/back.png" alt = "monday-4" /> <img class = "video img-responsive" src = "assets/back.png" alt = "monday-5" /> <img class = "video img-responsive" src = "assets/back.png" alt = "monday-6" /> </div> </div> <div class = "footer"> </div> ); } }); var MaleMonday1 = React.createClass({ render: function() { return ( ); } }); ReactDOM.render( <Main /> ); Any links to helpful documentation is also much appreciated, the documentation I followed for this has seemed to lead me in to trouble so far.
