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. 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

Comments

[Vince Ramces Oliveros]

Just finished reviewing re-introduction to JavaScript and ready to move to ReactJS just to build my own SPA Portfolio. I really wanted to integrate it with my dart project. Great Article!

[Jermaine]

Nice one Vince, glad it's helping. I'll be doing more React videos in the future. And thanks for subscribing to the channel ;) Would also be great if you could share the video