DEPRECATED. This project is no longer in active development.
react-qml
is a bridge library that allows to use React.js with QML.
At the moment ReactQml requires special manual bundling before it can be used inside Qml, so you have to download javascript bundle manually from [releases pages|https://github.com/grassator/react-qml/releases].
After that place it in your QML root, and import by adding following line at the top your main.qml
:
.import 'ReactQml.js' as React
Usage of ReactQml
is pretty straightforward — the only difference from web version is that you need to pass id of the qml item to React.render
instead of DOM node. For example:
import QtQuick 2.4
import QtQuick.Controls 1.3
import "js/ReactQml.js" as React
ApplicationWindow {
id: root
title: qsTr("React QML")
width: 300
height: 300
visible: true
function reactRender(x, y) {
var props = {
x: 100,
y: 100,
width: 100,
height: 100,
color: '#000'
};
var childProps = {
x: 25,
y: 25,
width: 50,
height: 50,
color: '#fff'
};
var child = React.createElement(React.Rectangle, childProps);
React.render(React.createElement(React.Rectangle, props, child), root);
}
Component.onCompleted: {
reactRender();
}
}
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using gulp.
Copyright (c) 2015 Dmitriy Kubyshkin. Licensed under the MIT license.