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.