FCUI2
What is FCUI2?
- 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.
See FCUI2 examples
See FCUI2 Doc locally
- 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:
Use FCUI2 in browser
- 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({
getDefaultProps: function () {
return {
name: 'Brian',
age: '18'
};
},
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>
);
}
});
});
How to run FCUI2 test
or
How to build FCUI2 Doc System
Author
Contributors
- Han Bingfeng
- Wang Yi
- Hao Cuicui
- Han Cong
- Sun WenFei
- Chen Xiao