gem-hunter

Dart wrapper for React JS

Getting Started

Installation

Wire things up

HTML

React 18

React 17 (Deprecated)

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <div id="react_mount_point">Here will be react content</div>

    <script src="packages/react/js/react.dev.js"></script>
    <script defer src="your_dart_file_name.dart.js"></script>
  </body>
</html>

Dart App

import 'dart:html';

import 'package:react/react.dart';
import 'package:react/react_dom.dart' as react_dom;

main() {
  // Something to render... in this case a simple <div> with no props, and a string as its children.
  var component = div({}, "Hello world!");

  // Render it into the mount node we created in our .html file.
  react_dom.render(component, querySelector('#react_mount_point'));
}

Build Stuff

Using browser native elements

var aDiv = div({"className": "something"}, [
  h1({"style": {"height": "20px"}}, "Headline"),
  a({"href":"something.com"}, "Something"),
  "Some text"
]);

var aButton = button({"onClick": (SyntheticMouseEvent event) => print(event)});

Defining custom components

Custom component with props

// cool_widget.dart

import 'package:react/react.dart';

class CoolWidgetComponent extends Component2 {
  @override
  render() {
    return div({}, props['text']);
  }
}

var CoolWidget = registerComponent2(() => CoolWidgetComponent());

// app.dart

import 'dart:html';

import 'package:react/react.dart';
import 'package:react/react_dom.dart' as react_dom;

import 'cool_widget.dart';

main() {
  react_dom.render(CoolWidget({"text": "Something"}), querySelector('#react_mount_point'));
}

Custom component with a typed interface

// cool_widget.dart
typedef CoolWidgetType({String headline, String text, int counter});

var _CoolWidget = registerComponent2(() => CoolWidgetComponent());

CoolWidgetType CoolWidget({String headline, String text, int counter}) {
  return _CoolWidget({'headline':headline, 'text':text});
}

class CoolWidgetComponent extends Component2 {
  String get headline => props['headline'];
  String get text => props['text'];
  int get counter => props['counter'];

  @override
  render() {
    return div({},
      h1({}, headline),
      span({}, text),
      span({}, counter),
    );
  }
}

// app.dart

import 'dart:html';

import 'package:react/react.dart';
import 'package:react/react_dom.dart' as react_dom;

import 'cool_widget.dart';

void main() {
  react_dom.render(
    myComponent(
        headline: "My custom headline",
        text: "My custom text",
        counter: 3,
    ),
    querySelector('#react_mount_point')
  );
}

React Component Lifecycle methods

class MyComponent extends Component2 {
  @override
  void componentWillMount() {}

  @override
  void componentDidMount() {}

  @override
  void componentWillReceiveProps(Map nextProps) {}

  @override
  void componentWillUpdate(Map nextProps, Map nextState) {}

  @override
  void componentDidUpdate(Map prevProps, Map prevState) {}

  @override
  void componentWillUnmount() {}

  @override
  bool shouldComponentUpdate(Map nextProps, Map nextState) => true;

  @override
  Map getInitialState() => {};

  @override
  Map getDefaultProps() => {};

  @override
  render() => div({}, props['text']);
}

Using refs and findDOMNode

var DartComponent = registerComponent2(() => _DartComponent());
class _DartComponent extends Component2 {
  @override
  render() => div({});

  void someInstanceMethod(int count) {
    window.alert('count: $count');
  }
}

var ParentComponent = registerComponent2(() => _ParentComponent());
class _ParentComponent extends Component2 {
  final inputRef = createRef<InputElement>(); // inputRef.current is the DOM node.
  final dartComponentRef = createRef<_DartComponent>(); // dartComponentRef.current is the instance of _DartComponent

  @override
  void componentDidMount() {
    print(inputRef.current.value); // Prints "hello" to the console.

    dartComponentRef.current.someInstanceMethod(5); // Calls the method defined in _DartComponent
    react_dom.findDOMNode(dartComponentRef); // Returns div element rendered from _DartComponent

    react_dom.findDOMNode(this); // Returns root dom element rendered from this component
  }

  @override
  render() {
    return div({},
      input({"ref": inputRef, "defaultValue": "hello"}),
      DartComponent({"ref": dartComponentRef}),
    );
  }
}

Example Application

Unit Testing Utilities

import 'package:test/test.dart';
import 'package:react/react.dart' as react;
import 'package:react/react_dom.dart' as react_dom;
import 'package:react/react_test_utils.dart' as react_test_utils;

class MyTestComponent extends react.Component2 {
  @override
  Map getInitialState() => {'text': 'testing...'};

  @override
  render() {
    return react.div({},
        react.button({'onClick': (_) => setState({'text': 'success'})}),
        react.span({'className': 'spanText'}, state['text']),
    );
  }
}

var myTestComponent = react.registerComponent2(() => new MyTestComponent());

void main() {
  test('should click button and set span text to "success"', () {
    var component = react_test_utils.renderIntoDocument(myTestComponent({}));

    // Find button using tag name
    var buttonElement = react_test_utils.findRenderedDOMComponentWithTag(
        component, 'button');

    // Find span using class name
    var spanElement = react_test_utils.findRenderedDOMComponentWithClass(
        component, 'spanText');

    var buttonNode = react_dom.findDOMNode(buttonElement);
    var spanNode = react_dom.findDOMNode(spanElement);

    // Span text should equal the initial state
    expect(spanNode.text, equals('testing...'));

    // Click the button and trigger the onClick event
    react_test_utils.Simulate.click(buttonNode);

    // Span text should change to 'success'
    expect(spanNode.text, equals('success'));
  });
}

Contributing

dart format -l 120 .

Running Tests

dart2js

dart run build_runner test --release -- --preset dart2js

Dart Dev Compiler ("DDC")

dart run build_runner test -- --preset dartdevc

Building React JS Source Files

yarn install

yarn run build