React.js–Get started in Dart #2

creativ_bracket

Jermaine

Posted on January 8, 2019

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
💖 💪 🙅 🚩
creativ_bracket
Jermaine

Posted on January 8, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React.js–Get started in Dart #3
react React.js–Get started in Dart #3

January 15, 2019

React.js–Get started in Dart #2
react React.js–Get started in Dart #2

January 8, 2019

React.js–Get started in Dart #1
react React.js–Get started in Dart #1

January 1, 2019