Commit 48e6186d authored by Joseph Jude's avatar Joseph Jude

props vs state

parent 2b0bcd38
......@@ -5,7 +5,7 @@ export interface HelloProps { compiler: string; framework: string; }
// 'HelloProps' describes the shape of props.
// State is never set so we use the 'undefined' type.
export class Hello extends React.Component<HelloProps, undefined> {
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
......@@ -4,6 +4,6 @@ import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
<Hello compiler="TypeScript" framework="React" />,
<Hello compiler="TypeScript" framework="React" />,
# Difference between props and state in React.js
`props` and `state` of a component looks the same and leads to confusion.
Props = properties. Properties can be passed to a component. The component can't change properties.
State on the other hand can be created and changed by a component. State can be created by component in the constructor and can be changed by `setState`.
Let us build a timer component to understand `props` and `state`.
We are going to display a timer on the browser. Updating the timer value is done with `state`. The initial value will be passed via `props`.
<!DOCTYPE html>
<meta charset="utf-8">
<title>Getting started with ReactJS and Typescript</title>
<div id="main"></div>
<!-- we pick from cdn so can be cached by browsers -->
<script src=""></script>
<script src=""></script>
<!-- compiled file for this project -->
<script src="build/bundle.js"></script>
"name": "01-react-tsc",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"author": "Joseph Jude",
"scripts": {
"build": "webpack"
"devDependencies": {
"@types/react": "^15.0.30",
"@types/react-dom": "^15.5.0",
"ts-loader": "^2.1.0",
"typescript": "^2.3.4",
"webpack": "^3.0.0"
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
import * as React from "react";
interface Props { startWith: number }
interface State { currentValue: number }
export class Timer extends React.Component<Props, State> {
// initialise state in constructor
constructor(props: Props) {
this.state = { currentValue: this.props.startWith }
setInterval(() => {
this.setState((prevState: State, props: Props) => ({
currentValue: prevState.currentValue - 1
}, 1000);
render() {
return (
<div className="Timer">
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Timer } from "./components/Timer";
<Timer startWith={500} />,
"compilerOptions": {
"outDir": "./build/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
"include": [
var path = require("path");
var config = {
* index.tsx represents the entry point to your web application. Webpack will
* recursively go through every "require" statement in index.tsx and
* efficiently build out the application's dependency tree.
entry: ["./src/index.tsx"],
* The combination of path and filename tells Webpack what name to give to
* the final bundled JavaScript file and where to store this file.
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
* resolve lets Webpack now in advance what file extensions you plan on
* "require"ing into the web application, and allows you to drop them
* in your code.
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
module: {
* Each loader needs an associated Regex test that goes through each
* of the files you've included (or in this case, all files but the
* ones in the excluded directories) and finds all files that pass
* the test. Then it will apply the loader to that file.
loaders: [
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
module.exports = config;
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment