mohi planet: JSX

Showing posts with label JSX. 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>

Getting started with Preact : helloworld standalone example

Preact looks to be the most closest React alternative in terms of code similarity. There official motto: "Fast 3kB alternative to React with the same ES6 API". You almost have to change nothing in the codes if you look to switch your React application to Preact. Lets have a quick look at a simplest Preact standalone helloworld component example with JSX/babel embedded in single html page, the very 'clock' example in their documentation :

<html>
<head></head>
<body>
<div id="abcd"></div>
<script src="https://npmcdn.com/preact@2.8.3/dist/preact.js"></script>
<script src="https://npmcdn.com/preact-compat@0.6.1/preact-compat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script>
window.React = preactCompat;
window.ReactDOM = preactCompat;
</script>
<script type="text/babel">
const { h, render, Component } = preact; // normally this would be an import statement.
class Clock extends Component {
constructor() {
super();
// set initial time:
this.state.time = Date.now();
}
componentDidMount() {
// update time every second
this.timer = setInterval(() => {
this.setState({ time: Date.now() });
}, 1000);
}
componentWillUnmount() {
// stop when not renderable
clearInterval(this.timer);
}
render(props, state) {
let time = new Date(state.time).toLocaleTimeString();
return <span>{ time }</span>;
}
}
render(<Clock/>, document.getElementById('abcd'));
</script>
</body>
</html>

Reference:

https://preactjs.com/guide/getting-started

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

Getting started with Preact : helloworld standalone example

react : update parent state from within child

React : Bootstrap List/Grid Toggle

ReactJS : Bootstrap List Example

Search This Blog

Popular Posts