Using Origami with React:

To run

npm run start

Method 1: Custom Webpack

This method assumes a knowledge of React and basic knowledge of Webpack, if you'd rather not deal with Webpack and Bower, skip to Method 2, using the Origami Build Tools as a convenient layer over Webpack and Bower.

Set up a React project with Webpack. You can reuse code in this repo if it covers your use case.

NB: you cannot use a scaffold like Create React App here, because you need to edit the webpack.config.js file, and Create React App won’t (easily) let you do that.

Add bower as a dependency: npm i bower --save-dev
Add a bower.json file - including the components you want:

{
  "name": "react-origami",
  "private": true,
  "dependencies": {
    "o-colors": "^4.1.1",
    "o-buttons": "^5.3.1",
    "o-table": "^6.2.1"
  }
}

Add a .bowerrc file - for example:

{
  "directory": "bower_components",
  "registry": {
    "search": [
      "https://origami-bower-registry.ft.com",
      "https://bower.herokuapp.com"
    ]
  }
}

For the Webpack config, you can copy all of webpack.config.js here or simply copy over the resolve property on module.exports AND add BowerResolvePlugin. Install it as a dependency npm i bower-resolve-webpack-plugin and require it at the top of your Webpack config file: const BowerResolvePlugin = require('bower-resolve-webpack-plugin')
To add the Origami styles, create a file like client/styles.scss, import the Origami components you need and set is-silent to false. For example:

$o-buttons-is-silent: false;
$o-colors-is-silent: false;
$o-table-is-silent: false;

@import 'o-colors/main';
@import 'o-buttons/main';
@import 'o-table/main';

Import the styles in your entry file: for example add import './styles.scss' to index.js (paying attention to what the file path should be).
To add the Origami javascript, create a React component that will contain it. Something like what's in the Table component.
In the render method of your new component, add the Origami HTML converting it to JSX (remembering to change class to className and that JSX components need to have a single element as the parent).
Import the javascript for the Origami component in your new React file. This import syntax should work:

import OTable from 'o-table'

In the render method, add a ref attribute to the element you want to attach the javascript to. For example for o-table, this will be the parent <table> element. The ref attribute takes a callback function which is given a reference to a DOM Element as its argument. It lets you access the actual DOM. Better explained in the React Documentation.

  <table className="o-table" data-o-component="o-table" ref={(table) => { this.table = table; }}>
    ...
    </table>

Add a componentDidMount function to the react component. Use the init() method on the OTable javascript class you have imported in, and pass it the reference to the DOM element (this.table, in this case) as an argument.

componentDidMount(){
  OTable.init(this.table);
}

It should now work. 🙏

GOTCHAS: Make sure you add the ref attribute to a jsx element, not a React component containing the JSX element.

Method 2: With Origami Build Tools

The Origami Build Tools installs Bower and Webpack under the hood, meaning you don't need to write all the configuration for these two tools yourself.

Do amend package.json to run the OBT commands:

"scripts": {
  "start": "obt build  --watch --runServer",
  "build": "obt build index.js",
}

And then... hopefully just pick this up from step 6.

ddigulescu/origami-react

Using Origami with React:

To run

Method 1: Custom Webpack

Method 2: With Origami Build Tools