当前位置：首页 > 软件库 > Web应用开发 > 网页组件 >

React Desktop

React UI 桌面组件

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、网页组件

软件类型开源软件

地区不详

投递者钱青青

操作系统跨平台

开源组织无

适用人群未知

软件概览

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

在线演示：http://gabrielbull.github.io/react-desktop/demo/

安装：

npm install react-desktop --save

OS X El Capitan

Windows 10

简单使用：

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>
    );
  }
}

使用案例

desktop中搭建react.js

1.下载npm，node 分别输入npm，node查看是否存在不存在根据指令下载 2.更新npm npm install npm -g 3.安装n模块 npm install -g n 4.更新node n stable 或更新至指定版本 n 8.9.2 5.将npm替换成淘宝镜像，提高下载速度 npm install -g cnpm --registry=https://registry.np
React 自定义ListView组件

本文主要实现ListView的适配器功能，基本可以解决列表的绝大部分问题,原文可查看React 自定义ListView组件-适配模式 ListView组件实现通过适配器的实现，适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。这种模式涉及到一个单一的类，该类负责加入独立的或不兼容的接口功能。这样就可以让Li
React学习3(React安装使用)

React的使用 1. 最简单的方式是通过 react cdn库引入开发这样的好处是不用npm搭建环境，会更加简单方便，但是不利于生态的使用示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title>  <script
VC++通过查看ReactOS开源代码，解决完整路径dll加载失败问题（附源码）

目录 1、问题实例 2、到cmd.exe中用regsvr32去手动注册控件

React Desktop

OS X El Capitan

Windows 10

同类工具

相关阅读

相关文章

相关问答

相关文档