How to Add TypeScript and React Together in JSFiddle?

If you’re a tech professional working with TypeScript and React, you may have encountered the need to quickly test your code in an online editor like JSFiddle. However, setting up TypeScript and React together in JSFiddle can be a bit tricky. In this blog post, we’ll explore two different solutions to help you seamlessly integrate TypeScript and React in JSFiddle.

Solution 1: Using External Resources

One way to add TypeScript and React together in JSFiddle is by utilizing external resources. Here’s how you can do it:

1. Go to JSFiddle and create a new fiddle.
2. In the HTML section, add the following code:

3. In the JavaScript section, add the following code:

const App = () => {
  return (
    

      
Hello, TypeScript and React!
    
  );
};

ReactDOM.render(, document.getElementById("app"));

4. In the CSS section, you can add any custom styling you desire.
5. In the JavaScript settings, select “Babel” as the JavaScript preprocessor.
6. In the External Resources section, add the following CDN links:

https://unpkg.com/react@17.0.2/umd/react.development.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js
https://unpkg.com/babel-standalone@6.26.0/babel.min.js

With these steps, you have successfully added TypeScript and React together in JSFiddle using external resources.

Solution 2: Using TypeScript Compiler

If you prefer to use TypeScript directly in JSFiddle without relying on external resources, you can follow this alternative solution:

1. Create a new TypeScript fiddle on TypeScript Playground.
2. Write your TypeScript and React code in the editor.
3. Click on the “Share” button and select “Export as JSON”.
4. Save the exported JSON file to your local machine.
5. Go to JSFiddle and create a new fiddle.
6. In the JavaScript section, add the following code:

const App = () => {
  return (
    

      
Hello, TypeScript and React!
    
  );
};

ReactDOM.render(, document.getElementById("app"));

7. In the JavaScript settings, select “Babel” as the JavaScript preprocessor.
8. In the JavaScript settings, select “TypeScript” as the JavaScript language.
9. In the JavaScript section, click on the “Add External JavaScript” button and upload the previously saved JSON file.
10. In the HTML section, add the following code:

By following these steps, you have successfully added TypeScript and React together in JSFiddle using the TypeScript compiler.

Now you can easily test and experiment with TypeScript and React code in JSFiddle, either by utilizing external resources or by using the TypeScript compiler directly.

Happy coding!