React JS and jQuery Mobile Rendering

Question

I am trying to render a list of jQuery Mobile style but using React JS. Unfortunately React JS is not rendering the style of jQuery Mobile components. And hence the buttons appear as plain HTML buttons where as if I put the HTML directly inside the DOM it renders it in jQuery Mobile Style.

Below is my code and screenshot for comparison:

<!DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="../jqueryMobile/jquery.mobile.css">
<script src='../libs/react.js'></script>
<script src='../libs/JSXTransformer.js'></script>
<script src="../jquery/jquery.js"></script>
<script src="../jqueryMobile/jquery.mobile.js"></script>
<script src="scripts/shoppingItems.js"></script>

    <!--<li><a href="#">
                    <img src="images/book.png">
                    <h2>Broken Bells</h2>
                    <p>Broken Bells</p>
                    <p style="font-weight:bold">Books</p>
                    </a>
                </li> -->
<script type="text/jsx">
    /** @jsx React.DOM */


    var SearchProductsBar = React.createClass({
        handleChange: function()
        {
            this.props.onUserInput(
                this.refs.filterTextInput.getDOMNode().value
            );
        },
        render: function()
        {
            return(
                <input type="text" placeholder="Search Products" style={{width:'100%'}} ref="filterTextInput" onChange={this.handleChange}/>
            );
        }
    });

    var mainDivStyle = {width:'100%',color:'blue',backgroundColor:'#D5D1FF'};

    var divStyle1={
        width:'30%',
        float:'left',
        display:'inline',
        paddingTop:'30px',
        paddingLeft:'2%'
    };

    var divStyle2={
        width:'65%',
        float:'left',
        display:'inline',
        paddingLeft:'2%'
    };

    var imageStyle={
        width:'100%',
        height:'80px',
        maxWidth:'80px'
    };

    var ListItem = React.createClass({
        render: function()
        {
            var productItemObject = this.props.itemDetails;

            return(

                    <div style={mainDivStyle}>
                        <a href='#myShoppingCartHomePage2' style={{textDecoration:'none'}}>
                            <div style={divStyle1}>
                                <img src={productItemObject.image} style={imageStyle}/>
                            </div>
                            <div style={divStyle2}>
                                <h4>{productItemObject.name}</h4>
                                <h5>{productItemObject.price} INR</h5>
                                <p style={{fontWeight:'bold'}}>{productItemObject.category}</p>
                            </div>
                        </a>
                        <input type="button" value="Add To Cart" />
                        <p>_________</p>
                    </div>
            );
        }
    });

    var ProductsTable = React.createClass({
        render:function()
        {
            var productList = this.props.productList;
            var rows = [];

            productList.forEach(function(productItem){
                if(productItem.name.indexOf(this.props.filterText) === -1)
                {
                    return;
                }
                rows.push(<ListItem itemDetails={productItem}/>);
            }.bind(this));

            return(
                <span>
                    <div id="myItemListHeader" style={{fontWeight:'bold'}}>Products:</div>
                    {rows}
                </span>
            );
        }
    });

    var ShoppingApp = React.createClass({
        handleUserInput: function(fiterText)
        {
            this.setState({
                filterText: fiterText
            });
        },
        getInitialState: function()
        {
            return{
                filterText: ''
            };
        },
        render: function()
        {
            return(       
                <span>
                    <SearchProductsBar filterText={this.state.filterText} onUserInput={this.handleUserInput}/>
                    <ProductsTable filterText={this.state.filterText} productList={this.props.products}/>
                </span>
            );
        }
    });

    React.renderComponent(<ShoppingApp products={shoppingItemsObject.items} />, document.getElementById('myItemList'));
</script>
<title>Shopping Cart App</title>
</head>
<body>
    <div id="myShoppingCartHomePage" data-role="page">
        <div data-role="header" style="text-align:center;">MyShopping App</div>
        <div data-role="content">
            <input type="button" value="Add To Cart" />
            <div id="myItemList">

            </div>
        </div>
        <div data-role="footer" style="text-align:center;">Shopping Cart</div>
    </div>

    <div id="myShoppingCartHomePage2" data-role="page">
        This it the second page
    </div>
</body>
</html>

enter image description here

Is there a way to render jQuery Mobile Components using React JS?

Thanks, Ankit Tanna

Brigand · Accepted Answer · 2014-09-24 09:29:46Z

2

Look at the class names jQuery Mobile uses. You'll need to go to their demos, and inspect element.

jquery mobile inspect element on popup container

From there you can replicate those classes (e.g. ui-popup-container), and the extra state classes (e.g. in, pop, ui-popup-active) inside React or any other ui library without jQuery or jQuery Mobile JavaScript.

In the case of buttons, I believe it's just <button className="ui-btn">

Alternatively, you can try just using jQuery(this.getDOMNode()).somejQueryMobileFunction() in componentDidMount. This won't work if the function moves elements around, removes them, etc. If it's just changing styles and classes, it should be fine but might conflict with your code in some edge cases.

answered Sep 24, 2014 at 9:29

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ankit Tanna Over a year ago

Hey, this works. But doesn't it import a dependency on knowing the class names of the jQM components. I know its available in documentation.

Collectives™ on Stack Overflow

React JS and jQuery Mobile Rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related