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