TypeScript – First steps with TypeScript – part 001 . – free-tutorials.org with free tutorials and source code

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:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { ReactSVG } from 'react-svg'

ReactDOM.render(<ReactSVG src="svg.svg" />, document.getElementById('root'))

import * as React from 'react'

import * as ReactDOM from 'react-dom'

import { ReactSVG } from 'react-svg'

ReactDOM.render(<ReactSVG src="svg.svg" />, document.getElementById('root'))

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:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>%REACT_APP_DESCRIPTION%</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>%REACT_APP_DESCRIPTION%</title>

</head>

<body>

</body>

</html>

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 Cancel reply