DEV Community

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

Posted on • Originally published at creativebracket.com

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")}']),
  )
});
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

Top comments (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
 
creativ_bracket profile image
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