Last active
February 13, 2018 15:41
-
-
Save ChillyBwoy/3f8db9190a20b1e6a9891102df582bca to your computer and use it in GitHub Desktop.
TypeScript React Sample
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import * as ReactDOM from "react-dom"; | |
import Person from "./Person"; | |
function flashUser(fname: string, lname: string, isOnline: boolean) { | |
alert(`${fname} ${lname} ${isOnline ? "теперь онлайн" : "теперь офлайн"}`); | |
} | |
ReactDOM.render( | |
<PersonComponent | |
firstName="Леонид" | |
lastName="Якубович" | |
gender="male" | |
onToggleOnline={flashUser} /> | |
, document.getElementById("root")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.root { | |
position: relative; | |
} | |
.isActive { | |
background: green; | |
} | |
.gender_male { | |
border: 1px solid #00f; | |
} | |
.gender_female { | |
border: 1px solid #0f0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const root: string; | |
export const isActive: string; | |
export const gender_male: string; | |
export const gender_female: string; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as cx from "classnames"; | |
import * as React from "react"; | |
import * as styles from "./Person.css"; | |
export interface PersonProps { | |
firstName: string; | |
lastName: string; | |
gender: "male" | "female"; | |
onToggleOnline: (fname: string, lname: string, isOnline: boolean) => void; | |
age?: number; | |
email?: string; | |
defaultMessage?: string; | |
} | |
export interface PersonState { | |
isOnline: boolean; | |
statusMessage: string; | |
} | |
class PersonComponent extends React.Component<PersonProps, PersonState> { | |
public static defaultProps: Partial<PersonProps> = { | |
email: "anonymous@corp.mail.ru", | |
}; | |
constructor(props: PersonProps) { | |
super(props); | |
this.state = { | |
isOnline: false, | |
statusMessage: props.defaultMessage || "Hello, World!", | |
}; | |
} | |
public render() { | |
const { age, email, firstName, gender, lastName } = this.props; | |
const { isOnline, statusMessage } = this.state; | |
const classSet = cx(styles.root, { | |
[styles.isActive]: isOnline, | |
[styles.gender_male]: gender === "male", | |
[styles.gender_female]: gender === "female", | |
}); | |
return ( | |
<div className={classSet}> | |
<h3>{firstName} {lastName} ({email})</h3> | |
{age | |
? (<div>{age}</div>) | |
: null} | |
<div> | |
<input | |
value={statusMessage} | |
onChange={this.handleStatusChange} /> | |
</div> | |
<div> | |
<button onClick={this.handleButtonClick}> | |
{isOnline ? "go offline" : "go online"} | |
</button> | |
</div> | |
</div> | |
); | |
} | |
private handleButtonClick = (event: React.SyntheticEvent<HTMLButtonElement>) => { | |
const { onToggleOnline, firstName, lastName } = this.props; | |
this.setState({ | |
isOnline: !this.state.isOnline, | |
}, () => { | |
alert("🙈🙉🙊"); | |
onToggleOnline(firstName, lastName, this.state.isOnline); | |
}); | |
} | |
private handleStatusChange = (event: React.ChangeEvent<HTMLInputElement>) => { | |
const { value } = event.target; | |
this.setState({ | |
statusMessage: value, | |
}); | |
} | |
} | |
export default PersonComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require("path"); | |
const webpack = require("webpack"); | |
const ExtractTextPlugin = require("extract-text-webpack-plugin"); | |
module.exports = { | |
entry: { | |
index: "./src/app.tsx" | |
}, | |
output: { | |
path: "./lib", | |
filename: "[name].js" | |
}, | |
resolve: { | |
extensions: [".js", ".jsx", ".json", ".ts", ".tsx"] | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.css$/, | |
loader: ExtractTextPlugin.extract({ | |
fallback: "style-loader", | |
use: [ | |
{ | |
loader: "typings-for-css-modules-loader", | |
options: { | |
localIdentName: "[hash:10]", | |
exclude: ["node_modules"], | |
modules: true, | |
namedExport: true, | |
}, | |
}, | |
{ | |
loader: "postcss-loader", | |
}, | |
] | |
}) | |
}, | |
{ | |
test: /\.(ts|tsx)$/, | |
loader: "ts-loader", | |
}, | |
{ | |
test: /\.js$/, | |
loader: "babel-loader", | |
exclude: /(node_modules)/ | |
} | |
] | |
}, | |
plugins: [ | |
new webpack.DefinePlugin({ | |
"process.env.NODE_ENV": JSON.stringify( | |
process.env.NODE_ENV || "production" | |
) | |
}), | |
new ExtractTextPlugin({ | |
filename: "[name].css" | |
}), | |
new webpack.EnvironmentPlugin(["NODE_ENV"]) | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment