samuel ogundipe samuelayo

## tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "jsx": "react",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules"
  ]
}

## webpack.config.js

var path = require("path");
var config = {
  entry: ["./app.tsx"],
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]

## app.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(
<div>
<h1>Hello, Welcome to the first page</h1>
</div>,
  document.getElementById("root")
);

## index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Getting Started with Typescript and ReactJS</title>
  </head>
  <body>
    <!-- this is where react renders into -->
    <div id="root"></div>

## FirstComponent.tsx

import * as React from "react";

let Logo ="https://logrocket.com/img/logo.png";

export default class FirstComponent extends React.Component <{}> {

        render() {
                return (
                        <div>

## app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import FirstComponent from './src/FirstComponent'
ReactDOM.render(
<div>
<h1>Hello, Welcome to the first page</h1>
<FirstComponent/>
</div>,
  document.getElementById("root")
);

## UserInterface.ts
export default interface User{
        name: string;
        age: number;
        address: string;
        dob: Date;
}

## UserComponent.ts

import * as React from "react";

import UserInterface from './UserInterface'

export default class UserComponent extends React.Component<UserInterface, {}> {

constructor (props: UserInterface){
super(props);
}

## app.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import FirstComponent from './src/FirstComponent'
import UserComponent from './src/UserComponent'
ReactDOM.render(
<div>
<h1>Hello, Welcome to the first page</h1>
<FirstComponent/>
<UserComponent name="Logrocket" age={105} address="get me if you can" dob={new Date()} />

## gist.js
"scripts": {
	    "dev": "next",
	    "build": "next build",
	    "start": "next start"
	}
	{
	"compilerOptions": {
	"target": "es6",
	"jsx": "react",
	"module": "commonjs"
	},
	"exclude": [
	"node_modules"
	]
	}

	var path = require("path");
	var config = {
	entry: ["./app.tsx"],
	output: {
	path: path.resolve(__dirname, "build"),
	filename: "bundle.js"
	},
	resolve: {
	extensions: [".ts", ".tsx", ".js"]

	import * as React from "react";
	import * as ReactDOM from "react-dom";
	ReactDOM.render(
	<div>
	<h1>Hello, Welcome to the first page</h1>
	</div>,
	document.getElementById("root")
	);

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Getting Started with Typescript and ReactJS</title>
	</head>
	<body>
	<!-- this is where react renders into -->
	<div id="root"></div>

	import * as React from "react";

	let Logo ="https://logrocket.com/img/logo.png";

	export default class FirstComponent extends React.Component <{}> {

	render() {
	return (
	<div>
	import * as React from "react";
	import * as ReactDOM from "react-dom";
	import FirstComponent from './src/FirstComponent'
	ReactDOM.render(
	<div>
	<h1>Hello, Welcome to the first page</h1>
	<FirstComponent/>
	</div>,
	document.getElementById("root")
	);
	export default interface User{
	name: string;
	age: number;
	address: string;
	dob: Date;
	}

	import * as React from "react";

	import UserInterface from './UserInterface'

	export default class UserComponent extends React.Component<UserInterface, {}> {

	constructor (props: UserInterface){
	super(props);
	}
	"scripts": {
	"dev": "next",
	"build": "next build",
	"start": "next start"
	}