Note: This project is currently under active development. Documentation is incomplete and things may not work as expected. 🤯
Visit
Dismiss

React

React is a javascript library for building user interfaces. Examples below describe how you can use React to create views in your project.

Creating and using a react functional component.

// setup.js
import { render } from 'react-dom';

function App() {
    const greeting = 'Hello Functional Component!';
    return <h1 style={{margin : '0px'}}>{greeting}</h1>;
}

const view = quark.views.createTabsView('React view');
view.onDidConnectElement = () => {
    view.element.style.backgroundColor = '#f0f0f0';
    view.element.style.height = '100%';
    render(<App />, view.element);
};

view.focus();
Result

Render a react component inside another component

// setup.js
import { render } from 'react-dom';

function App() {
  return <Headline />;
}

function Headline() {
    const greeting = 'Hello Functional Component!';
    return <h1 style={{margin : '0px'}}>{greeting}</h1>;
}

const view = quark.views.createTabsView('React view');
view.onDidConnectElement = () => {
    view.element.style.backgroundColor = '#f0f0f0';
    view.element.style.height = '100%';
    render(<App />, view.element);
};

view.focus();

Using import/export statements

// headline.js
function Headline() {
    const greeting = 'Hello Functional Component!';
    return <h1 style={{ margin: '0px' }}>{greeting}</h1>;
}

export default Headline;
// setup.js
import { render } from 'react-dom';
import Headline from './headline';

function App() {
    return <Headline />;
}

const view = quark.views.createTabsView('React view');
view.onDidConnectElement = () => {
    view.element.style.backgroundColor = '#f0f0f0';
    view.element.style.height = '100%';
    render(<App />, view.element);
};

view.focus();

Creating react class components

import { render } from 'react-dom';
import Headline from './import-export/headline';
import React from 'react';

class App extends React.Component {
    render() {
        return (
            <h1 style={{ margin: '0px' }}>{this.props.greeting}</h1>
        );
    }
}

const view = quark.views.createTabsView('React view');
view.onDidConnectElement = () => {
    view.element.style.backgroundColor = '#f0f0f0';
    view.element.style.height = '100%';
    render(<App greeting = 'Hello Functional Component!' />, view.element);
};

view.focus();
Last Updated: 8/15/2019, 11:59:02 AM
MIT Licensed | Copyright © 2019-present Nishkal Kashyap