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. Here's the video:

→ Watch on YouTube
→ Get the source code

Conclusion

I hope this was insightful and you learned something new today.

Subscribe to my YouTube channel to be notified when Part 3 is ready. Thanks!

Like, share and follow me 😍 for more content on Dart.

Further reading

1. js package
2. How to Use JavaScript libraries in your Dart applications
3. Full-stack web development with Dart