Skip to content

Instantly share code, notes, and snippets.

samuel ogundipe samuelayo

Block or report user

Report or block samuelayo

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View tsconfig.json
{
"compilerOptions": {
"target": "es6",
"jsx": "react",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
View 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"]
View 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")
);
View 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>
View 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>
View 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")
);
View UserInterface.ts
export default interface User{
name: string;
age: number;
address: string;
dob: Date;
}
View UserComponent.ts
import * as React from "react";
import UserInterface from './UserInterface'
export default class UserComponent extends React.Component<UserInterface, {}> {
constructor (props: UserInterface){
super(props);
}
View 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()} />
View gist.js
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
You can’t perform that action at this time.