- FCUI2 is a lightweight UI based on React(preact).
- FCUI2 adhere to AMD coding mechanism, your project need to employ javascript module loaders such as RequireJS, Webpack to import FCUI2 modules.
- All widgets in FCUI2 are written in JSX, you need to import compilation tools such as Babel to your developping environment and package tools.
- Clone a copy of the main git repo by running:
git clone https://github.com/fcfe/fcui2.git- Enter FCUI2 root directory, and install dependencies by running:
npm install
npm install babel-loader@^5.3.2- Start a local http server by running:
npm start- Visit http://localhost:8847/
- Clone a copy of the main git repo by running:
git clone https://github.com/fcfe/fcui2.git- Compile fcui2/src/css/main.less, fcui2/src/css/icon/fc-icon.less to css files, then import style sheet in your home page:
<link rel="stylesheet" href="./dep/fcui2/src/css/icon/fc-icon.css"/>
<link rel="stylesheet" href="./dep/fcui2/src/css/main.css"/>or add less compiling module to your developping environment.
- Configure the underlying dependency like:
require.config({
baseUrl: './src',
paths: {
'react-dom': '../dep/react/react-dom',
'react': '../dep/react/react-with-addons'
},
packages: [
{
name: 'fcui',
location: '../dep/fcui/src',
main: 'main'
}
]
});- Create a simple project in src/main.js like:
define(function (require) {
var ReactDOM = require('react-dom');
var React = require('react');
var App = require('./app.jsx');
var props = {};
ReactDOM.render(
React.createElement(App, props),
document.getElementById('react-container')
);
});- Create a html file for access like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./dep/fcui2/css/icon/fc-icon.css"/>
<link rel="stylesheet" href="./dep/fcui2/src/css/main.css"/>
</head>
<body><div id="react-container"></div></body>
<script type="text/javascript" src="./dep/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl: './src',
paths: {
'react-dom': '../dep/react/react-dom',
'react': '../dep/react/react-with-addons'
},
packages: [
{
name: 'fcui',
location: '../dep/fcui/src',
main: 'main'
}
]
});
require(['main']);
</script>
</html>- Here is an example for src/App.jsx.js:
define(function (require) {
var React = require('react');
var TextBox = require('fcui/TextBox.jsx');
var Button = require('fcui/Button.jsx');
return React.createClass({
// @override
getDefaultProps: function () {
return {
name: 'Brian',
age: '18'
};
},
// @override
getInitialState: function () {
return {
};
},
render: function () {
return (
<div>
Name: <TextBox value={this.props.name} /><br/>
Age: <TextBox value={this.props.age} /><br/>
<Button label="OK" />
</div>
);
}
});
});$ npm testor
$ edp test start$ npm run build- Brian Li
- email: lbxxlht@163.com
- weibo: http://weibo.com/lbxx1984
- Han Bingfeng: hanbingfeng@baidu.com
- Wang Yi: wangyispaceman@gmail.com
- Hao Cuicui: haocuicui@baidu.com
- Han Cong: hancong05@baidu.com
- Sun WenFei: sunwenfei@baidu.com
- Chen Xiao: chenxiao09@baidu.com