cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
SarahFaustmann
Dynatrace Helper
Dynatrace Helper

half wave.png

 

 

 

 

 

Welcome to our latest newsletter. In this #13 edition, we bring you the latest updates and releases for Dynatrace apps, showcase new educational content, and announce upcoming events. We've also got a short step-by-step guide helping you upgrade to React 18 so you can ensure your projects are up-to-date and optimized!

What can you expect to see in this post:


🔊 News and events

Engage and elevate 💬

 

On July 16, we’ll hold our regular Dynatrace Office Hours: App development. As always, we’re happy to host you and look forward to answering the questions you face when developing Dynatrace apps. We'll also give you the latest updates and releases.

Want to join one of our office hours but can't find the time? Don't worry, we record our sessions, and you can watch them on YouTube▶️ 

 

Dynatrace Apps: Upgrade to React 18 now 


As you know, React version 18 comes with improved performance, new features, and enhanced stability. Allowing for an efficient and easy transition to the higher version, the Strato design system currently supports React versions 17 and 18. We encourage you to upgrade to version 18 to take full advantage of these enhancements and keep your projects running smoothly.

What do you need to do?


Follow these steps to update your Dynatrace app to React 18:

  1. Ensure you have no local, uncommitted changes.

  2. Check the version of the react and react-dom dependencies in your package.json file. If you already use an 18.x version, you’ve already updated and can skip the following steps

  3. Run npx dt-app update to update all your app's Dynatrace packages.

  4. Run npm install react@18.3.1 react-dom@18.3.1 to update the React libraries to the latest 18.x version.

  5. Adapt the code in src/main.tsx to use ReactDOM’s new API. You can find more details for this step in the official React update guide. For example, the change from React 17 to 18 could be as simple as replacing a code block and looks like this:

    React 17 code block

    import React from "react";
    import ReactDOM from "react-dom";
    import { AppRoot } from "@dynatrace/strato-components";
    import { BrowserRouter } from "react-router-dom";
    import { App } from "./app/App";

    ReactDOM.render( <AppRoot> <BrowserRouter basename="ui"> <App /> </BrowserRouter> </AppRoot>, document.getElementById("root") );


    React 18 code block

    import React from "react";
    import ReactDOM from "react-dom/client"; // ensure to import ReactDOM from react-dom/client
    import { AppRoot } from "@dynatrace/strato-components";
    import { BrowserRouter } from "react-router-dom";
    import { App } from "./app/App";

    const root = ReactDOM.createRoot(document.getElementById("root")!); root.render( <AppRoot> <BrowserRouter basename="ui"> <App /> </BrowserRouter> </AppRoot> );
  1. Optional: If you use other libraries, you might need to update them as well to ensure they’re compatible with React 18. Check the documentation of these libraries for version compatibility and upgrade steps.

If you encounter any issues during the upgrade, let us know in the Developer Community.

 

📚 Useful resources

🎥 New Quickstart Video


We’re thrilled to announce that we’ve released a new version of our quickstart video, which shows you how to create a Dynatrace app in under five minutes. This video aligns written and audiovisual content in the Dynatrace Developer quickstart section to give you a better learning experience. Step by step, developer advocate Indermohan Singh guides you through setting up your environment and making your first changes.


🎥 Inside Dynatrace Apps: New episode


Next up is the latest episode of our Inside Dynatrace Apps series, this time focussing on app functions. Do you want to learn more about or leverage the full power of app functions? If so, follow along with developer advocate Edu Campver in our latest video as he explains what app functions are, why the Dynatrace JavaScript runtime is important, and when you should use app functions. Edu also takes you through a hands-on example of how you can implement them in your app.


 

💡 Release highlights for app developers

 

Design System

Strato Components

Catch up with the latest improvements to the design system: The changes up until the current version 0.114.3 are available in the annotated release notes.

 

Dynatrace App Toolkit

Catch up with the latest improvements to the App Toolkit: The changes up until the current version 0.121.0 are available in the annotated release notes.