- 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:
<linkrel="stylesheet" href="./dep/fcui2/src/css/icon/fc-icon.css"/><linkrel="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){varReactDOM=require('react-dom');varReact=require('react');varApp=require('./app.jsx');varprops={};ReactDOM.render(React.createElement(App,props),document.getElementById('react-container'));});- Create a html file for access like:
<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><linkrel="stylesheet" href="./dep/fcui2/css/icon/fc-icon.css"/><linkrel="stylesheet" href="./dep/fcui2/src/css/main.css"/></head><body><divid="react-container"></div></body><scripttype="text/javascript" src="./dep/require.js"></script><scripttype="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){varReact=require('react');varTextBox=require('fcui/TextBox.jsx');varButton=require('fcui/Button.jsx');returnReact.createClass({// @overridegetDefaultProps: function(){return{name: 'Brian',age: '18'};},// @overridegetInitialState: function(){return{};},render: function(){return(<div>
Name: <TextBoxvalue={this.props.name}/><br/>
Age: <TextBoxvalue={this.props.age}/><br/><Buttonlabel="OK"/></div>);}});});$ npm testor
$ edp test start$ npm run build- Brian Li
- email: lbxxlht@163.com
- Han Bingfeng
- Wang Yi
- Hao Cuicui
- Han Cong
- Sun WenFei
- Chen Xiao