ReactJS : Bootstrap Thumbnail Matrix / Grid Gallery

Demo code: Download

[Please refer to: http://mohiplanet.blogspot.com/2015/10/react-bootstrap-listgrid-toggle.html

for running :]

<script type="text/babel">

'use strict';

var ThumbnailMatrixItem= React.createClass({
render: function() {
return (
 <div className="col-lg-3 col-md-4 col-xs-6">
          <a href="#" className="d-block mb-4 h-100">
            <img className="img-fluid img-thumbnail" src={this.props.imgUrl} 

alt="" />
          </a>
        </div>
 );
 }
});

var ThumbnailMatrix= React.createClass({
render: function() {
var productNodes= this.props.items.map(function (product) {
 return (
  <ThumbnailMatrixItem name={product.name} description={

product.description} price={product.price} imgUrl={product.imgUrl}>

</ThumbnailMatrixItem>
        );
 });

return (
 <div className="container"> 
       <h1 className="my-4 text-center text-lg-left">{this.props.title}</h1>

        <div className="row text-center text-lg-left">
 {productNodes}
 </div>
 </div>
       );
}
});

ReactDOM.render(<ThumbnailMatrix title="Bootstrap Thumbnail Gallery" items={

productData}/>, document.getElementById('thumbnailGridDemo'));

//product data

var productData= [
{name: "Priduct 1", description: "product1 description goes here",imgUrl:
 "img/400x300.png", price: "$150"},
{name: "Product 2", description: "product2 description goes here",imgUrl:
 "img/400x300.png",price: "$50"},
{name: "Product 3", description: "product3 description goes here",imgUrl:
 "img/400x300.png",price: "$30"},
{name: "Priduct 41", description: "product1 description goes here",imgUrl:
 "img/400x300.png",price: "$150"},
{name: "Product 52", description: "product2 description goes here",imgUrl:
 "img/400x300.png",price: "$50"},
{name: "Product 63", description: "product3 description goes here",imgUrl:


 "img/400x300.png",price: "$30"},
{name: "Priduct 71", description: "product1 description goes here",imgUrl: 
"img/400x300.png",price: "$150"},
{name: "Product 82", description: "product2 description goes here",imgUrl: 
"img/400x300.png",price: "$50"},
{name: "Product 93", description: "product3 description goes here",imgUrl: 
"img/400x300.png",price: "$30"},
{name: "Product 95", description: "product3 description goes here",imgUrl:
 "img/400x300.png",price: "$30"},
{name: "Product 96", description: "product3 description goes here",imgUrl: 
"img/400x300.png",price: "$30"},
{name: "Product 99", description: "product3 description goes here",imgUrl: 
"img/400x300.png",price: "$30"},
 ];

    </script>

Dependencies:

    <script src="libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="libs/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="libs/react/0.14.2/react.js"></script>
    <script src="libs/react/0.14.2/react-dom.js"></script>
    <script src="libs/babel/babel-core/5.8.23/browser.min.js"></script>

React : Bootstrap List/Grid Toggle

Demo code Download .

Please make sure running this demo with firefox locally.
With chrome you may get this error message with default configuration:

XMLHttpRequest cannot load file:///.../js/app.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file://...//js/app.js'.

With chrome try using the --disable-web-security command line param to make it work.

References:
https://facebook.github.io/react/docs/tutorial.html
https://github.com/facebook/react
http://www.programming-free.com/2013/12/fading-list-grid-view-switch-jquery.html
https://github.com/facebook/react/tree/master/examples/jquery-bootstrap

ReactJS : Bootstrap List Example

Demo Code Download .

Javascript/JSX(app.js):

1. 'use strict';
3. // lets populate list with this JSON array dynamically
4. var data = [
5. {author: "Pete Hunt", text: "This is one comment"},
6. {author: "Jordan Walke", text: "This is *another* comment"},
7. {author: "Pete Hunt", text: "This is second comment"}
8. ];
9. var Comment = React.createClass({
10. render: function() {
11. return (
12. <li className="list-group-item">
13. <b>{this.props.text}</b> : by - <span className="author-look">{this.props.author}</span>
14. </li>
15. );
16. }
17. });
19. var CommentList = React.createClass({
20. render: function() {
21. var commentNodes = this.props.data.map(function (comment) {
22. return (
23. <Comment author={comment.author} text={comment.text}></Comment>
24. );
25. });
26. return (
27. <ul className="list-group list-look">
28. {commentNodes}
29. </ul>
30. );
31. }
32. });
34. ReactDOM.render(<CommentList data={data}/>, document.getElementById('myListDiv'));

Simplest index.html to get us started :)

1. <!doctype html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6. <title>jQuery Integration</title>
7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
8. <link rel="stylesheet" href="css/example.css" type="text/css" />
9. </head>
10. <body>
11. <div id="myListDiv"></div>
12. <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.min.js"></script>
13. <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.min.js"></script>
14. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
15. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
16. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js" charset="utf-8"></script>
17. <script type="text/babel" src="js/app.js"></script>
18. </body>
19. </html>

References:
https://facebook.github.io/react/docs/tutorial.html#hook-up-the-data-model