在SAP WebIDE里开发一个React component

项目文件夹如下：

```html

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="crossorigin="anonymous"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><script src="https://unpkg.com/react@15.3.2/dist/react.js"></script><script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.5/react-bootstrap.js"></script><script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script><script src="/js/main.js" type="text/babel"></script><link href="/css/main.css" rel="stylesheet"></head><body><div class="container"><div id="product-list"></div></div></body>

```

var ListBox = React.createClass({render: function() {return (<button type="button" className="list-group-item" id="product-list"><div className="row vertical-align"><div className="col-sm-8 top"><h4>Top Label</h4><p>10 boxes at 20 bags</p></div><div className="col-sm-3 text-right top"><h4>99.99<small className="text-muted"> EUR</small></h4><p>Available</p></div><div className="col-sm-1 center"><span className="glyphicon glyphicon-chevron-right pull-right" aria-hidden="true"></span></div></div></button>);}
});var ProductList = React.createClass({render: function() {return (<div className="list-group"><ListBox /><ListBox /><ListBox /></div>)}
});ReactDOM.render(<ProductList />,document.getElementById('product-list')
);

.vertical-align {display: flex;align-items: baseline;
}
.vertical-align .top {align-self: baseline;
}
.vertical-align .center {align-self: center;
}
.available {color: green;font-weight: bold;
}
.discontinued {color: red;font-weight: bold;
}

最终结果：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

在SAP WebIDE里开发一个React component相关推荐

在SAP WebIDE里开发一个最简单的react component
源代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="ut ...
SAP WebIDE 里开发 SAP UI5 应用时，使用 Ctrl + Space 实现代码自动完成功能
Created by Wang, Jerry, last modified on Mar 23, 2015 Suppose you would like to know how to use butt ...
使用SAP WebIDE创建开发Java应用，并且在浏览器里调试
打开SAP WebIDE,新建一个项目,选择New from template,基于Multi-Target Application模板创建: 项目创建完毕后,右键选择New->Java Mod ...
如何把SAP WebIDE里的Web项目同Github仓库连接起来
我们在SAP WebIDE里进行UI5应用开发时,当然也希望能将开发的代码纳入到github版本管理中去. 步骤其实非常简单. 右键点击WebIDE里UI5应用,git->Initialize ...
react的导出是怎么实现的_从零开始开发一个 React
这个是从零开始开发一个 React 系列的第七篇.想要访问之前的内容可以点击下方的链接进行访问: 最简单的实现,包括 vdom 结构,createElement,ReactDOM.render 增加 ...
SAP WebIDE里OData service catalog的实现原理
我们在SAP WebIDE里创建UI5应用时,可以从Service catalog里选择需要的OData服务,如下图所示: 这个ag3-backend是什么意思? 是我在SAP Cloud Platf ...
怎么安装aptdaemon模块_自己开发一个React Native 模块
大纲为什么需要 React Native Module 如何创建一个 React Native的模块编写 Android Toast 功能模块如何调试 React Native 模块------ ...
SAP WebIDE里本地运行Fiori应用后，会自动生成一个新的Destination
我在Neo环境里通过SAP WebIDE的新建项目菜单创建了一个Fiori应用后,本地运行,会弹出如下的对话框,让用户输入Neo环境的用户名和密码: 确认之后,会自动生成一个新的Destination ...
SAP WebIDE 里 UI5 应用的隐藏文件 project.json
在SAP WebIDE UI5应用编辑器里的菜单View->Show Hidden files点击后,即可发现项目文件夹下有一个隐藏文件project.json: 内容如下: 这也解释了为什么b ...

在SAP WebIDE里开发一个React component

在SAP WebIDE里开发一个React component相关推荐

最新文章

热门文章