mohi planet: reactjs

Showing posts with label reactjs. Show all posts

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>

Standalone/Non-NodeJS version of a simple Single Page Application ( SPA ) with React Router

Project Structure:

./libs/jquery/2.1.1/jquery.min.js
./libs/react/react-router/3.0.0/react-router.js
./libs/react/0.14.2/react-dom.js
./libs/react/0.14.2/react.js
./libs/babel/babel-core/5.8.23/browser.min.js
./libs/history/3.0.0/history.js

./index.html

index.html

========

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Antwan Wimberly's React Router Tutorial via ES5 and Babel</title>
    <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>
    <script src="libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="libs/react/react-router/3.0.0/react-router.js"></script>
    <script src="libs/history/3.0.0/history.js"></script>
    <style>
    body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
    </style>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
      // To get started with this tutorial running your own code, simply remove
      // the script tag loading scripts/example.js and start writing code here.
      // make these convenietly available so we don't have to fully qualify

them (i.e Router vs ReactRouter.Router)
      var Router = ReactRouter.Router;
      var Link = ReactRouter.Link; // instead of straight up <a href="blah">

 we'll have to use the Link component instead
      var Route = ReactRouter.Route;
      var history = History.useBasename(History.createHistory)();
      var IndexPage = React.createClass({
        render: function() {
          return (
            // render the content from the child route via this.props.children

 (i.e. DetailsPage, Users, User)
            <div className="indexPage">
              Hello, world! I am a index page.
              <ul>
                <li><Link to="/details">Details</Link></li>
                <li><Link to="/users">Users</Link></li>
                <li><Link to="/stand-alone">Stand Alone</Link></li>
              </ul>
              {this.props.children}
            </div>
          );
        }
      });
      var DetailsPage = React.createClass({
        render: function() {
          return (
            <div className="detailsPage">
              Hello, world! I am a details page.
            </div>
          );
        }
      });
      var NotFound = React.createClass({
        render: function() {
          return (
            <div className="no-match">
              Woah dere!!! 404 Not Found .Fix that!!!
            </div>
          );
        }
      });
      var Users = React.createClass({
        render: function() {
          return (
            <div id="users">
              This is just the users shell, bra!!!
              <div><Link to="/users/user/1">See User #1</Link></div>
              My child content for the Users compoent is.....
              {this.props.children}
            </div>
          );
        }
      });
      var User = React.createClass({
        render: function() {
          return (
            <div id="user-{this.props.params.userId}">
              The user you are retrieving details for is {this.props.params.userId}
            </div>
          );
        }
      });
      var NonNestedPage = React.createClass({
        render: function() {
          return (
            <p>Hi, I do not share content with the IndexPage component.

 I am stand alone</p>
          );
        }
      });
      ReactDOM.render(
        <Router history={history}>
          <Route path="/" component={IndexPage}>
            <Route path="details" component={DetailsPage} />
            <Route path="users" component={Users}>
              <Route path="user/:userId" component={User} />
            </Route>
          </Route>
          <Route path="/stand-alone" component={NonNestedPage} />
          <Route path="*" component={NotFound} />
        </Router>,
        document.getElementById('content')
      );
    </script>
  </body>
</html>

-------------------------

Full working code Download .

For running refer to https://mohiplanet.blogspot.com/2015/10/react-bootstrap-listgrid-toggle.html

References:
https://github.com/armw4/react-router-example-es5

react : update parent state from within child

var Child = React.createClass({
handleClick: function(event){
if (confirm("Press a button!")) {
this.props.sendChildConfirm();
} else {
this.props.sendChildCancel();
}
}
,
render: function () {
return (
<a style={{border: 1}} onClick={this.handleClick}>update parent state from within child</a>
);
},
});
var Parent = React.createClass({
getInitialState: function() {
return {childText: 'Nothing'};
},
render: function () {
return (
<div>
<h3>Child says {this.state.childText}</h3>
<Child sendChildConfirm={this.handleConfirm} sendChildCancel={this.handleCancel} />
</div>
);
},
handleConfirm: function(event) {
this.setState({childText: 'Yes!'});
},
handleCancel: function(event) {
this.setState({childText: 'No!'});
}
});
ReactDOM.render(
<Parent />,
document.getElementById('react-child-parent-dom-node')
);

Download full working code : Download

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

'use strict';
// lets populate list with this JSON array dynamically
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"},
{author: "Pete Hunt", text: "This is second comment"}
];
var Comment = React.createClass({
render: function() {
return (
<li className="list-group-item">
<b>{this.props.text}</b> : by - <span className="author-look">{this.props.author}</span>
</li>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author} text={comment.text}></Comment>
);
});
return (
<ul className="list-group list-look">
{commentNodes}
</ul>
);
}
});
ReactDOM.render(<CommentList data={data}/>, document.getElementById('myListDiv'));

Simplest index.html to get us started :)

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

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

mohi planet

ReactJS : Bootstrap Thumbnail Matrix / Grid Gallery

Standalone/Non-NodeJS version of a simple Single Page Application ( SPA ) with React Router

react : update parent state from within child

React : Bootstrap List/Grid Toggle

ReactJS : Bootstrap List Example

Search This Blog

Popular Posts