React.js – Get started in Dart #2

In Part 1 of this series, we built our Greeting component that took a name parameter and rendered this onto the screen. Here’s what the snippet for this looked like:

var Greeting = createReactClass({
  "render": allowInteropCaptureThis(
    (ReactClassInterface self) => React.createElement(
      'h1', null, ['Hello, ${getProperty(self.props, "name")}']),
  )
});

And we used it by doing:

void main() {
  ReactDOM.render(
    React.createElement(
      Greeting,
      makeJsObject({
        'name': 'John'
      }),
      null,
    ),
    querySelector('#output'),
  );
}

In this part, we will refactor our solution and proceed to build out the stateful component example.

Further reading

1. js package

2. How to Use JavaScript libraries in your Dart applications

3. Full-stack web development with Dart