Rohit Nair
Reputation: 688
Finding error in jsx
Im relatively new to react and jsx. Just to try it out i made a frontend of a existing website using react. I have created many components and am rendering it to the html file.
Previously, i had made 7 components Navbar Content AboutUs MissionVision ServiceOffered Portfolio Footer and it was working fine.
Then, i added two more components into the file and the code crashed. I fixed the Jsx syntax and the page was visible. But, when i render these components and when the page loads all the components rendered before these components are visible. The order of rendering:- Navbar Content AboutUs MissionVision ServiceOffered Portfolio PlaceOrder Contact Footer.
In the above order when the page loads only components till Portfolio .i.e only this order:-Navbar Content AboutUs MissionVision ServiceOffered Portfolio is visible rest nothing loads.(Not even Footer)
Then i tried removing the lately added components and rendered it in this order:-Navbar Content AboutUs MissionVision ServiceOffered Portfolio Footer. Then the whole page loads including component Footer.
This is weird! Is there something that I'm doing wrong?
My script.js and index.html code
var Navbar = React.createClass({
render: function () {
return (
<nav className="navbar navbar-default navbar-fixed-top">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#myPage"><span id="titleHeader">UmangMahilaTailors</span></a>
</div>
<div className="collapse navbar-collapse" id="myNavbar">
<ul className="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#place_order">PLACE AN ORDER</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
)
}
});
var Content = React.createClass({
render: function () {
return (
<div className="jumbotron text-center">
<img src="assets/sewing-machine.png" className="img-circle margin" width="350" height="350"></img>
<h1>Umang Mahila Tailors</h1>
<p>We specialize in custom tailoring</p>
<form className="form-inline" action="http://www.umangmahilatailors.org/assets/php/subscribe.php" method="post">
<input type="email" className="form-control" name="SubscribedEmail" id="SubscribedEmail" size="50"
placeholder="Email Address" required></input>
<button type="submit" className="btn btn-danger">Subscribe</button>
</form>
</div>
)
}
});
var AboutUs = React.createClass({
render: function () {
return (
<div id="about" className="container-fluid">
<div className="row">
<div className="col-sm-8">
<h2>About Umang Mahila</h2><br></br>
<h4>During CRH's activities in Bherampada, we made a few civil society organizations(Mahila Mandal) and
strengthened many more. This lead to the formation of Umang Mahila Federation, an Apex organization of 10
mandals.</h4><br></br>
<p>There are 450 women tailors in our community. They are doing the Tailoring Job works for almost all the
leading brands in India. Due to the middlemen, these women are getting only mere part of the income. Which
is not substaniable. So, we at CRH are trying to organize the women and empower them for better income
source.</p>
<br></br><a href="#contact" className="btn btn-default btn-lg">Get in Touch</a>
</div>
<div className="col-sm-4">
<span className="glyphicon glyphicon-scissors logo"></span>
</div>
</div>
</div>
)
}
});
var MissionVision = React.createClass({
render: function () {
return (
<div className="container-fluid bg-grey">
<div className="row">
<div className="col-sm-4">
<span className="glyphicon glyphicon-globe logo slideanim"></span>
</div>
<div className="col-sm-8">
<h2>Our Values</h2><br></br>
<h4><strong>MISSION:</strong> Our mission is to create an organized skilled-worker community. Find better
source of income for these women.</h4><br></br>
<p><strong>VISION:</strong> Our vision is to create a home-based income source for the 450 women tailors of
Umang Mahila Federation, Bherampada. These women have worked for many well-known brands, but end up
getting paid less because of the middlemen who take away major portion of their income. We aim to create
jobs for these women, so that they can earn and provide to their households, all without losing a penny to
any middlemen.<br></br><br></br>Umang Mahila Federation also runs a tailoring class, to give proper
training to the upcoming tailors in the community. Umang Mahila Tailors plan to increase their current
community level, using their present skillsets to create better income source for all.</p>
</div>
</div>
</div>
)
}
});
var ServicesOffered = React.createClass({
render: function () {
return (
<div id="services" className="container-fluid text-center">
<h2>SERVICES</h2> <br></br>
<h4>Tailoring <big>/</big> Alteration</h4> <br></br>
<div className="row slideanim">
<div className="col-sm-4">
<span className="label logo-small">1</span>
<h4>You place an order!</h4>
<p>Using any of the <a href="#place_order">order methods</a> available..</p>
</div>
<div className="col-sm-4">
<span className="label logo-small">2</span>
<h4>Our Tailor visits your home</h4>
<p>Takes Measurement and collects the material.</p>
</div>
<div className="col-sm-4">
<span className="label logo-small">3</span>
<h4>Delivery at your doorstep</h4>
<p>Our guys stitch/alters the cloth, get it delivered at your residence and collects the money.</p>
</div>
</div>
<br></br><br></br>
</div>
)
}
});
var Contact = React.createClass({
render: function () {
return (
<div id="contact" className="container-fluid bg-grey">
<h2 className="text-center">CONTACT</h2>
<div className="row">
<div className="col-sm-5">
<p>Contact us and we'll get back to you immediately.</p>
<p><span className="glyphicon glyphicon-map-marker"></span> Mumbai, IN</p>
<p><span className="glyphicon glyphicon-phone"></span> +91 9969520439</p>
<p><span className="glyphicon glyphicon-envelope"></span> <a className="inheritedLink"
href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<form method="post" action="assets/php/requestcontact.php">
<div className="col-sm-7 slideanim">
<div className="row">
<div className="col-sm-6 form-group">
<input className="form-control" id="name" name="name" placeholder="Name" type="text" required></input>
</div>
<div className="col-sm-6 form-group">
<input className="form-control" id="email" name="email" placeholder="Email" type="email"
required></input>
</div>
</div>
<textarea className="form-control" id="comments" name="comments" placeholder="Comment"
rows="5"></textarea><br></br>
<div className="row">
<div className="col-sm-12 form-group">
<button className="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
)
}
});
var PlaceOrder = React.createClass({
render: function () {
return (
<div id="place_order" className="container-fluid">
<div className="text-center">
<h2>Place an Order</h2>
<h4>Choose an order method that suits you</h4>
</div>
<div className="row slideanim">
<div className="col-xs-12 col-sm-12 col-md-8 ">
<div className="panel panel-default">
<div className="panel-heading text-center">
<h1>Online Order</h1>
</div>
<form method="post" action="http://umangmahilatailors.org/assets/php/onlineOrder.php">
<div className="panel-body">
<div className="row_space"></div>
<p><strong>Your Name <big className="text-danger">*</big></strong> <input className="form-control"
id="name" name="name"
placeholder="Your Name"
type="text"
required></input></p>
<div className="row_space"></div>
<p><strong>Email ID <big className="text-danger">*</big></strong> <input className="form-control"
id="OrderEmail"
name="OrderEmail"
placeholder="Your Email ID"
type="text" required></input>
</p>
<div className="row_space"></div>
<p><strong>Contact Number (primary) <big className="text-danger">*</big></strong> <input
className="form-control" id="Contact1" name="Contact1" placeholder="Contact Number" type="text"
required></input></p>
<div className="row_space"></div>
<p><strong>Contact Number (secondary)</strong> <input className="form-control" id="Contact2"
name="Contact2"
placeholder="Fall Back Contact Number"
type="text"></input></p>
<div className="row_space"></div>
<p><strong>Your Street Address <big className="text-danger">*</big></strong> <textarea
className="form-control" id="OrderAddress" name="OrderAddress"
placeholder="Your Precise Street Address" required></textarea></p>
<div className="row_space"></div>
<div className="row_space-10"></div>
<span className="text-danger pull-left"><big>*</big> Required Fields</span>
<button className="btn btn-lg btn-inner-orange pull-right">Place the Order</button>
</div>
</form>
<div className="row_space-10"></div>
</div>
</div>
<div className="col-xs-12 col-sm-12 col-md-4">
<div className="panel panel-default text-center" itemscope itemtype="http://schema.org/PostalAddress">
<div className="panel-heading">
<h1>Offline Order</h1>
</div>
<div className="panel-body">
<p><strong>Walk Into Our store</strong></p>
<p>
<address><span itemprop="address"><span itemprop="streetAddress">PPC Chawl, Plot No: 341, Nr. Ram Mandir, Oppo. Vijay Gas Service</span>, <span
itemprop="addressRegion">Kherwadi</span>, <span itemprop="addressLocality">Bandra(East)</span>
<span itemprop="postalCode">400 051</span></span></address>
</p>
<p><strong>Call Us</strong></p>
<p><span itemprop="telephone">+91 2265650326</span></p>
<p><span itemprop="telephone">+91 9969520439</span></p>
<p><strong>Email Us</strong></p>
<p><a className="inheritLink" href="mailto:[email protected]"
itemprop="email">[email protected]</a></p>
</div>
<hr></hr>
<h2>OR</h2>
<div className="panel-footer">
<h3>Order via Email!</h3>
<h4><strong> You can place an email order instead!</strong></h4>
<button type="button" className="btn btn-lg" data-toggle="modal" data-target="#myModal">Mail Us</button>
</div>
</div>
</div>
</div>
</div>
)
}
});
var Portfolio = React.createClass({
render: function () {
return (
<div id="portfolio" className="container-fluid text-center bg-grey">
<h2>Portfolio</h2><br></br>
<h4>What we stitch</h4>
<div className="row text-center slideanim">
<div className="col-sm-4">
<div className="thumbnail">
<img src="/assets/images/web2.jpg" className="images" alt="Paris"></img>
<p><strong>Blouse Material</strong></p>
</div>
</div>
<div className="col-sm-4">
<div className="thumbnail">
<img src="assets/images/web3.jpg" className="images" alt="New York"></img>
<p><strong>Churidaar</strong></p>
</div>
</div>
<div className="col-sm-4">
<div className="thumbnail">
<img src="assets/images/web4.jpg" className="images" alt="San Francisco"></img>
<p><strong>Salwaar Kameez</strong></p>
</div>
</div>
</div>
<br></br>
<div className="row">
<div className="col-sm-12 alert alert-info">
<h3>We alter all types of cloth!</h3>
</div>
</div>
<br></br>
<h2>What our supporters say</h2>
<div id="myCarousel" className="carousel slide text-center" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" className="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div className="carousel-inner" role="listbox">
<div className="item active">
<h4>"Hats Off! To this Novel initiative"<br></br><span className="font_normal"><div
className="row_space-5"></div>Bro. Mathew Kuplicat, Associate director, MCDS Chennai</span></h4>
</div>
<div className="item">
<h4>"One word... Brilliant!!"<br></br><span className="font_normal"><div className="row_space-5"></div> Sobha Sarath, Supervisor, CRH Mumbai</span>
</h4>
</div>
<div className="item">
<h4>"Excellent Initiative by CRH!"<br></br><span className="font_normal"><div
className="row_space-5"></div> Jayan Mitra, Secretary, GandhiServe India</span></h4>
</div>
</div>
</div>
</div>
)
}
});
var Footer = React.createClass({
render: function () {
return (
<footer className="container-fluid text-center">
<a href="#myPage" title="To Top">
<span className="glyphicon glyphicon-chevron-up"></span>
</a>
<div itemscope itemtype="http://schema.org/CreativeWork">
<p> A <span itemprop="copyrightHolder">CRH Mumbai</span> Initiative. All Rights Reserved.</p>
<p>Bootstrap Theme Build By <a href="author/" target="_blank" title="About Rohit Nair" itemprop="creator">Rohit
Nair</a></p>
</div>
</footer>
)
}
});
ReactDOM.render(
<Navbar/>,
document.getElementById('navbar')
);
ReactDOM.render(
<Content/>,
document.getElementById('content')
);
ReactDOM.render(
<AboutUs/>,
document.getElementById('aboutUs')
);
ReactDOM.render(
<MissionVision/>,
document.getElementById('missionVision')
);
ReactDOM.render(
<ServicesOffered/>,
document.getElementById('servicesOffered')
);
ReactDOM.render(
<Portfolio/>,
document.getElementById('portfolio')
);
ReactDOM.render(
<PlaceOrder/>,
document.getElementById('placeOrder')
);
ReactDOM.render(
<Contact/>,
document.getElementById('contact')
);
ReactDOM.render(
<Footer/>,
document.getElementById('footer')
);<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
<link rel="icon" href="assets/images/scissors2.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="assets/css/main.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="assets/js/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel" src="src/app.js"></script>
<style>
.images{width:400px !important;height:300px !important;}
.font_normal{font-style:normal;}
.inheritLink{text-decoration: none !important;color: inherit !important;}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" style="padding-top: 40px;">
<div id="navbar"></div>
<div id="content"></div>
<div id="aboutUs"></div>
<div id="missionVision"></div>
<div id="servicesOffered"></div>
<div id="portfolio"></div>
<div id="placeOrder"></div>
<div id="contact"></div>
<div id="footer"></div>
<script src="assets/js/myAnime.js"></script>
</body>
</html>Can someone please help me?
Upvotes: 0
Views: 397
Answers (1)
Shubham Khatri
Reputation: 281686
Create another React Component App and render all other components inside it and then render this component in you HTML as
var App = React.createClass({
render(){
return(
<div>
<Navbar />
<Content />
<AboutUs />
<MissionVision />
<ServicesOffered />
<Portfolio />
<PlaceOrder />
<Contact />
<Footer />
</div>
)
}
});//added a semi-colon
ReactDOM.render(
<App/>,
document.getElementById('app')
);
This works.
P.S. Check for other warnings in the console. They could also help you if this doesn't work.
var Navbar = React.createClass({
render: function () {
return (
<nav className="navbar navbar-default navbar-fixed-top">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#myPage"><span id="titleHeader">UmangMahilaTailors</span></a>
</div>
<div className="collapse navbar-collapse" id="myNavbar">
<ul className="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#place_order">PLACE AN ORDER</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
)
}
});
var Content = React.createClass({
render: function () {
return (
<div className="jumbotron text-center">
<img src="assets/sewing-machine.png" className="img-circle margin" width="350" height="350"></img>
<h1>Umang Mahila Tailors</h1>
<p>We specialize in custom tailoring</p>
<form className="form-inline" action="http://www.umangmahilatailors.org/assets/php/subscribe.php" method="post">
<input type="email" className="form-control" name="SubscribedEmail" id="SubscribedEmail" size="50"
placeholder="Email Address" required></input>
<button type="submit" className="btn btn-danger">Subscribe</button>
</form>
</div>
)
}
});
var AboutUs = React.createClass({
render: function () {
return (
<div id="about" className="container-fluid">
<div className="row">
<div className="col-sm-8">
<h2>About Umang Mahila</h2><br></br>
<h4>During CRH's activities in Bherampada, we made a few civil society organizations(Mahila Mandal) and
strengthened many more. This lead to the formation of Umang Mahila Federation, an Apex organization of 10
mandals.</h4><br></br>
<p>There are 450 women tailors in our community. They are doing the Tailoring Job works for almost all the
leading brands in India. Due to the middlemen, these women are getting only mere part of the income. Which
is not substaniable. So, we at CRH are trying to organize the women and empower them for better income
source.</p>
<br></br><a href="#contact" className="btn btn-default btn-lg">Get in Touch</a>
</div>
<div className="col-sm-4">
<span className="glyphicon glyphicon-scissors logo"></span>
</div>
</div>
</div>
)
}
});
var MissionVision = React.createClass({
render: function () {
return (
<div className="container-fluid bg-grey">
<div className="row">
<div className="col-sm-4">
<span className="glyphicon glyphicon-globe logo slideanim"></span>
</div>
<div className="col-sm-8">
<h2>Our Values</h2><br></br>
<h4><strong>MISSION:</strong> Our mission is to create an organized skilled-worker community. Find better
source of income for these women.</h4><br></br>
<p><strong>VISION:</strong> Our vision is to create a home-based income source for the 450 women tailors of
Umang Mahila Federation, Bherampada. These women have worked for many well-known brands, but end up
getting paid less because of the middlemen who take away major portion of their income. We aim to create
jobs for these women, so that they can earn and provide to their households, all without losing a penny to
any middlemen.<br></br><br></br>Umang Mahila Federation also runs a tailoring class, to give proper
training to the upcoming tailors in the community. Umang Mahila Tailors plan to increase their current
community level, using their present skillsets to create better income source for all.</p>
</div>
</div>
</div>
)
}
});
var ServicesOffered = React.createClass({
render: function () {
return (
<div id="services" className="container-fluid text-center">
<h2>SERVICES</h2> <br></br>
<h4>Tailoring <big>/</big> Alteration</h4> <br></br>
<div className="row slideanim">
<div className="col-sm-4">
<span className="label logo-small">1</span>
<h4>You place an order!</h4>
<p>Using any of the <a href="#place_order">order methods</a> available..</p>
</div>
<div className="col-sm-4">
<span className="label logo-small">2</span>
<h4>Our Tailor visits your home</h4>
<p>Takes Measurement and collects the material.</p>
</div>
<div className="col-sm-4">
<span className="label logo-small">3</span>
<h4>Delivery at your doorstep</h4>
<p>Our guys stitch/alters the cloth, get it delivered at your residence and collects the money.</p>
</div>
</div>
<br></br><br></br>
</div>
)
}
});
var Contact = React.createClass({
render: function () {
return (
<div id="contact" className="container-fluid bg-grey">
<h2 className="text-center">CONTACT</h2>
<div className="row">
<div className="col-sm-5">
<p>Contact us and we'll get back to you immediately.</p>
<p><span className="glyphicon glyphicon-map-marker"></span> Mumbai, IN</p>
<p><span className="glyphicon glyphicon-phone"></span> +91 9969520439</p>
<p><span className="glyphicon glyphicon-envelope"></span> <a className="inheritedLink"
href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<form method="post" action="assets/php/requestcontact.php">
<div className="col-sm-7 slideanim">
<div className="row">
<div className="col-sm-6 form-group">
<input className="form-control" id="name" name="name" placeholder="Name" type="text" required></input>
</div>
<div className="col-sm-6 form-group">
<input className="form-control" id="email" name="email" placeholder="Email" type="email"
required></input>
</div>
</div>
<textarea className="form-control" id="comments" name="comments" placeholder="Comment"
rows="5"></textarea><br></br>
<div className="row">
<div className="col-sm-12 form-group">
<button className="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
)
}
});
var PlaceOrder = React.createClass({
render: function () {
return (
<div id="place_order" className="container-fluid">
<div className="text-center">
<h2>Place an Order</h2>
<h4>Choose an order method that suits you</h4>
</div>
<div className="row slideanim">
<div className="col-xs-12 col-sm-12 col-md-8 ">
<div className="panel panel-default">
<div className="panel-heading text-center">
<h1>Online Order</h1>
</div>
<form method="post" action="http://umangmahilatailors.org/assets/php/onlineOrder.php">
<div className="panel-body">
<div className="row_space"></div>
<p><strong>Your Name <big className="text-danger">*</big></strong> <input className="form-control"
id="name" name="name"
placeholder="Your Name"
type="text"
required></input></p>
<div className="row_space"></div>
<p><strong>Email ID <big className="text-danger">*</big></strong> <input className="form-control"
id="OrderEmail"
name="OrderEmail"
placeholder="Your Email ID"
type="text" required></input>
</p>
<div className="row_space"></div>
<p><strong>Contact Number (primary) <big className="text-danger">*</big></strong> <input
className="form-control" id="Contact1" name="Contact1" placeholder="Contact Number" type="text"
required></input></p>
<div className="row_space"></div>
<p><strong>Contact Number (secondary)</strong> <input className="form-control" id="Contact2"
name="Contact2"
placeholder="Fall Back Contact Number"
type="text"></input></p>
<div className="row_space"></div>
<p><strong>Your Street Address <big className="text-danger">*</big></strong> <textarea
className="form-control" id="OrderAddress" name="OrderAddress"
placeholder="Your Precise Street Address" required></textarea></p>
<div className="row_space"></div>
<div className="row_space-10"></div>
<span className="text-danger pull-left"><big>*</big> Required Fields</span>
<button className="btn btn-lg btn-inner-orange pull-right">Place the Order</button>
</div>
</form>
<div className="row_space-10"></div>
</div>
</div>
<div className="col-xs-12 col-sm-12 col-md-4">
<div className="panel panel-default text-center" itemscope itemtype="http://schema.org/PostalAddress">
<div className="panel-heading">
<h1>Offline Order</h1>
</div>
<div className="panel-body">
<p><strong>Walk Into Our store</strong></p>
<p>
<address><span itemprop="address"><span itemprop="streetAddress">PPC Chawl, Plot No: 341, Nr. Ram Mandir, Oppo. Vijay Gas Service</span>, <span
itemprop="addressRegion">Kherwadi</span>, <span itemprop="addressLocality">Bandra(East)</span>
<span itemprop="postalCode">400 051</span></span></address>
</p>
<p><strong>Call Us</strong></p>
<p><span itemprop="telephone">+91 2265650326</span></p>
<p><span itemprop="telephone">+91 9969520439</span></p>
<p><strong>Email Us</strong></p>
<p><a className="inheritLink" href="mailto:[email protected]"
itemprop="email">[email protected]</a></p>
</div>
<hr></hr>
<h2>OR</h2>
<div className="panel-footer">
<h3>Order via Email!</h3>
<h4><strong> You can place an email order instead!</strong></h4>
<button type="button" className="btn btn-lg" data-toggle="modal" data-target="#myModal">Mail Us</button>
</div>
</div>
</div>
</div>
</div>
)
}
});
var Portfolio = React.createClass({
render: function () {
return (
<div id="portfolio" className="container-fluid text-center bg-grey">
<h2>Portfolio</h2><br></br>
<h4>What we stitch</h4>
<div className="row text-center slideanim">
<div className="col-sm-4">
<div className="thumbnail">
<img src="/assets/images/web2.jpg" className="images" alt="Paris"></img>
<p><strong>Blouse Material</strong></p>
</div>
</div>
<div className="col-sm-4">
<div className="thumbnail">
<img src="assets/images/web3.jpg" className="images" alt="New York"></img>
<p><strong>Churidaar</strong></p>
</div>
</div>
<div className="col-sm-4">
<div className="thumbnail">
<img src="assets/images/web4.jpg" className="images" alt="San Francisco"></img>
<p><strong>Salwaar Kameez</strong></p>
</div>
</div>
</div>
<br></br>
<div className="row">
<div className="col-sm-12 alert alert-info">
<h3>We alter all types of cloth!</h3>
</div>
</div>
<br></br>
<h2>What our supporters say</h2>
<div id="myCarousel" className="carousel slide text-center" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" className="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div className="carousel-inner" role="listbox">
<div className="item active">
<h4>"Hats Off! To this Novel initiative"<br></br><span className="font_normal"><div
className="row_space-5"></div>Bro. Mathew Kuplicat, Associate director, MCDS Chennai</span></h4>
</div>
<div className="item">
<h4>"One word... Brilliant!!"<br></br><span className="font_normal"><div className="row_space-5"></div> Sobha Sarath, Supervisor, CRH Mumbai</span>
</h4>
</div>
<div className="item">
<h4>"Excellent Initiative by CRH!"<br></br><span className="font_normal"><div
className="row_space-5"></div> Jayan Mitra, Secretary, GandhiServe India</span></h4>
</div>
</div>
</div>
</div>
)
}
});
var Footer = React.createClass({
render: function () {
return (
<footer className="container-fluid text-center">
<a href="#myPage" title="To Top">
<span className="glyphicon glyphicon-chevron-up"></span>
</a>
<div itemscope itemtype="http://schema.org/CreativeWork">
<p> A <span itemprop="copyrightHolder">CRH Mumbai</span> Initiative. All Rights Reserved.</p>
<p>Bootstrap Theme Build By <a href="author/" target="_blank" title="About Rohit Nair" itemprop="creator">Rohit
Nair</a></p>
</div>
</footer>
)
}
});
var App = React.createClass({
render(){
return(
<div>
<Navbar />
<Content />
<AboutUs />
<MissionVision />
<ServicesOffered />
<Portfolio />
<PlaceOrder />
<Contact />
<Footer />
</div>
)
}
})
ReactDOM.render(
<App/>,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<title>My First React Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.images{width:400px !important;height:300px !important;}
.font_normal{font-style:normal;}
.inheritLink{text-decoration: none !important;color: inherit !important;}
</style>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" style="padding-top: 40px;">
<div id="app"></div>
</body>`
Upvotes: 1
Related Questions
- React throwing an undefined error but only in my JSX
- React showing undefined error that is not viewable
- How to fix error with checking error in reactjs?
- Simple JSX throws error in console
- Unknown error in Reactjs
- Debugging Javascript/ReactJS errors
- Trying to debug Adjacent JSX elements error
- Invalid Component Element in React.JS
- ReactJS doesn't throw any errors. How to fix?
- How to find reactJS errors?