DEV Community

loading...
Cover image for React.js–Get started in Dart #2

React.js–Get started in Dart #2

Jermaine Oppong
Web Developer | Google Dart enthusiast | Egghead.io instructor | YouTuber 📹 | Read my blog ✍🏾 https://www.creativebracket.com
Originally published at creativebracket.com ・1 min read

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")}']),
  )
});
Enter fullscreen mode Exit fullscreen mode

And we used it by doing:

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

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

Discussion (2)

Collapse
vinceramces profile image
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!

Collapse
graphicbeacon profile image
Jermaine Oppong Author

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