Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/longseespace/react-qml
Build native, high-performance, cross-platform applications through a React (and/or QML) syntax
https://github.com/longseespace/react-qml
cross-platform desktop-app native qml qml-development qt react redux
Last synced: 11 days ago
JSON representation
Build native, high-performance, cross-platform applications through a React (and/or QML) syntax
- Host: GitHub
- URL: https://github.com/longseespace/react-qml
- Owner: longseespace
- License: mit
- Created: 2017-12-10T05:16:40.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-08T16:20:52.000Z (almost 5 years ago)
- Last Synced: 2025-01-14T19:52:12.036Z (12 days ago)
- Topics: cross-platform, desktop-app, native, qml, qml-development, qt, react, redux
- Language: HTML
- Homepage:
- Size: 2.52 MB
- Stars: 121
- Watchers: 13
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-renderer - react-qml - Build native, high-performance, cross-platform applications (desktop and mobile) through a React (and/or QML) syntax. (Desktop)
README
# ReactQML
Build native, high-performance, cross-platform universal applications (desktop **and** mobile) through a React (and/or QML) syntax
🚧 **NOTE:** ReactQML is a work-in-progress! 🚧
# Features
- Native components: no Electron
- Batteries included: access to full webpack ecosystem and wide sets of [QML modules][qml_module_list]
- Cross platform: macOS/Windows/Linux/Android/iOS/tvOS/watchOS (see [Qt supported platforms][suported_platforms]).
- Write codes in modern Javascript (ES2016+) or TypeScript (transpiling with babel, bundling with webpack, highly customizable)
- Works with existing front-end libraries such as redux, lodash, rxjs, redux-observable etc.
- Supports Hot Module Reloading
- Supports react-devtools & redux-devtools (Time Travel Debugging possible)
- New in v0.5: supports React Hooks!
# Quickstart
See [react-qml-quickstart](https://github.com/longseespace/react-qml-quickstart) and [Ben](https://github.com/longseespace/ben)
# API Example
You can build UI components using JSX syntax and/or QML syntax.
### React Component
```jsx
import React from "react";
import { render, Window, ColumnLayout, Text } from "react-qml";
const styles = {
window: {
width: 400,
height: 500
},
title: {
fontSize: 20
},
subtitle: {
color: "#333"
}
};
const App = () => (
);
export default () => render();
```
### QML Components
`App.qml`
```qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
Window {
width: 400
height: 500
visible: true
ColumnLayout {
width: 200
x: (Window.width - width) / 2
y: (Window.height - height) / 2
Text {
text: "Welcome to React QML"
Layout.fillWidth: true
font.pointSize: 20
}
Text {
text: "To get started, edit App.qml"
color: "#333333"
Layout.fillWidth: true
}
}
}
```
`index.js`
```jsx
import React from "react";
import { render } from "react-qml";
import App from "./App.qml";
export default () => render();
```
# Other Awesome Projects
- [Haul][haul]: A command line tool for developing React Native apps
- [Revery][revery]: ⚡️ Native, high-performance, cross-platform desktop apps - built with Reason!
- [Proton Native][pn]: Create native desktop applications through a React syntax, on all platforms
- [React Native][rn]: Build native mobile apps using JavaScript and React
- [React Native Desktop][rnd]: A Desktop port of React Native, driven by Qt, forked from Canonical
- [React Native macOS][rnm]: React Native for macOS is an experimental fork for writing desktop apps using Cocoa
# License
- ReactQML is available under [MIT license][license]
- Qt is available under different licensing options. See [here][qt_licensing] and [here][qt5_licensing]
Copyright for portions of project React QML are held by [Mike Grabowski][mg] as part of project [Haul][haul].
All other copyright for project React QML are held by [Long Nguyen][ln].
[mg]: https://github.com/grabbou
[haul]: https://callstack.github.io/haul/
[revery]: https://github.com/revery-ui/revery
[pn]: https://github.com/kusti8/proton-native
[rn]: https://facebook.github.io/react-native/
[rnd]: https://github.com/status-im/react-native-desktop
[rnm]: https://github.com/ptmt/react-native-macos
[qt_licensing]: https://www.qt.io/licensing/
[qt5_licensing]: http://doc.qt.io/qt-5/licensing.html
[license]: https://github.com/longseespace/react-qml/blob/master/LICENSE
[suported_platforms]: http://doc.qt.io/archives/qt-5.10/supported-platforms.html
[qml_module_list]: http://doc.qt.io/archives/qt-5.10/modules-qml.html
[qt5_lang_binding]: https://en.wikipedia.org/wiki/List_of_language_bindings_for_Qt_5
[branch_next]: https://github.com/longseespace/react-qml/tree/next
[ln]: https://github.com/longseespace
[qml_app]: http://doc.qt.io/qt-5.10/qmlapplications.html