DEV Community

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

Posted on • Originally published at creativebracket.com

5 1

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.


Watch on YouTube
Get the source code


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
Enter fullscreen mode Exit fullscreen mode

2. Install the js interop package

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

dependencies:
  js: ^0.6.0
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Watch the full video
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 2 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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay