Creative Bracket

React.js–Get started in Dart #1

Happy New Year folks!

In this three-part series, we will go through the React.js homepage examples and learn how to reproduce these in Dart using the js interop package.


Before we begin:

1. Set up your project

Set up your web project quickly with Stagehand:

mkdir getting_started_react && cd getting_started_react
stagehand web-simple

2. Install the js interop package

Ensure that the js dependency is added to your pubspec.yaml file:

dependencies:
  js: ^0.6.0

Save and run pub get to update your dependencies.

3. Import the React.js libraries

In web/index.html in the <head> before <script defer src="main.dart.js"></script> import the dev versions of the library:

<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Conclusion

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

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

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

Continue watching

Further reading

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

Jermaine Oppong

Hello 👋, I show programmers how to build full-stack web applications with the Dart SDK. I am passionate about teaching others, having received tremendous support on sites like dev.to and medium.com for my articles covering various aspects of the Dart language and ecosystem.