TypeScript – First steps with TypeScript – part 001 .

Today I start a new series of tutorials using TypeScript.
I wrote in the past this tutorial about TypeScript where you can find a sort intro and few steps to install and use it.
In this tutorial, I will show you how can you used and test your source code in a simple way.
To accomplish this issue I used this online tool named CodeSandbox.
You can use free or you can have a paid option.
After you create or sign in you need to start a Sandbox.
The new dialog let you to select a template, use Filter Templates editbox and type typescript then click on template.
This will open a tab with a file named index.tsx and with source code:

This allows you to use the dependencies like react, react-doom, react-scripts, react-svg.
Also, you can see how the ReactDOM.render takes the root id of div tag from index.html and used to show the SVG file.
To the left side of this editor, you can see a tree folder’s area.
If you open the public folder then you will see two files: index.html and svg.svg.
The index.html has this source code:

I improve the basic template and I add another div with a new id and used show a link to my twitter account.
You can see the full example bellow:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.