getting-started-react.md

Getting started with Polythene for React

• Example setup
• Usage in JavaScript modules
  • Which packages do you need?
  • Installation
  • Examples
    • A single component
    • A simple app
• Usage in a HTML file, JSFiddle or flems
  • Setup
  • Example script

Example setup

• polythene-react-setup

Usage in JavaScript modules

Add Polythene to your project with npm or yarn.

Which packages do you need?

Essential:

• react
• react-dom
• polythene-react

Recommended:

• polythene-css Provides component CSS files and Material Design styles (typography and font); optionally activates CSS-in-JS more info

Optional:

• polythene-utilities Layout helper classes more info
• polythene-core-css CSS tools more info

Installation

npm install --save polythene-react polythene-css

Examples

A single component

import React from "react"
import { Button } from "polythene-react"
import "polythene-css"

<Button raised label="Click" />

A simple app

import React from "react"
import ReactDOM from "react-dom"
import { Button, Dialog } from "polythene-react"
import "polythene-css"
import { addTypography } from "polythene-css"

addTypography()

const App = () => (
  <div>
    <Button
      raised
      label="Show dialog"
      events={{
        onClick: () => Dialog.show({
          /* note the Dialog component is below the other elements in the app */
          title: "Hello",
          body: "Click outside to close, or press ESCAPE",
          backdrop: true
        })
      }}
    />
    <Dialog />
  </div>
)

const mountNode = document.querySelector("#app")
ReactDOM.render(<App />, mountNode)

Usage in a HTML file, JSFiddle or flems

A "standalone" version of Polythene - useful for demonstration purposes - is available at:

https://unpkg.com/polythene-react/dist/polythene-react-standalone.js

Included:

• All components
• All component styles, plus Material Design styles (typography and font), from polythene-css
• subscribe, unsubscribe from polythene-core
• Layout styles from polythene-utilities

Not included:

• React
• ReactDom

Setup

Add to your HTML file:

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/polythene-react/dist/polythene-react-standalone.js"></script>

To be able to write es6, add babel-standalone (not necessary for JSFiddle or flems):

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

Example script

/* global polythene */
const { Button } = polythene

const App = () =>
  <Button raised label="Button" />

ReactDOM.render(
  <App />,
  document.getElementById("root")
)

See: online flems