react-desktop

react-desktop 介绍

react Desktop 是提供给 OS X El Capitan 和 Windows 10 的 react UI 组件。一个使用react编写的web桌面。使用typescript来编写逻辑，react来编写view，jade写基本的dom结构，打包工具使用webpack。

react-desktop 是基于 Facebook reactjs 的 JavaScript 库，为 OS X EI Capitan 和 Windows 10 提供 Web 原生桌面体验，支持 node-webkit 和 Electron.js，但可以在任意 JavaScript 驱动的项目使用。

安装：

npm install react-desktop --save

简单使用：

import react from 'react';

import {

Window,

TitleBar,

PushButton,

TextField,

Toolbar,

Box,

SegmentedControl,

IndeterminateCircularProgressIndicator,

Form,

Label

} from 'react-desktop';

class MyApp extends React.Component {

constructor() {

super();

this.state = { selectedTab: 'login' };

}

render() {

return (

<Window>

<TitleBar

title="My App"

controls

onClosePress={() => { alert('close'); }}

onResizePress={() => { alert('resize'); }}

onMinimizePress={() => { alert('minimize'); }}

>

<Toolbar/>

</TitleBar>

<Box>

<SegmentedControl>

<SegmentedControl.Item

title="Login"

selected={this.state.selectedTab === 'login'}

onPress={() => { this.setState({ selectedTab: 'login' }) } }

>

<Form onSubmit={() => { alert('submit'); }}>

<Label color="red">Error</Label>

<Form.Row>

<Label>Username</Label>

<TextField defaultValue="" placeholder="Username"/>

</Form.Row>

<Form.Row>

<PushButton onPress={() => { alert('cancel'); }}>Cancel</PushButton>

<PushButton onPress="submit" color="blue">Submit</PushButton>

<IndeterminateCircularProgressIndicator visible absolute/>

</Form.Row>

</Form>

</SegmentedControl.Item>

</SegmentedControl>

</Box>

</Window>

);

}

}

网站地址:http://reactdesktop.js.org

GitHub:https://github.com/gabrielbull/react-desktop

网站描述:模拟 macOS 和 Windows 10 桌面效果的 React UI 组件

react-desktop

官方网站：http://reactdesktop.js.org