Commit 31affdd3 authored by Joseph Jude's avatar Joseph Jude

04-read-user-input

parent 48e6186d
......@@ -16,4 +16,4 @@ Ref: https://medium.com/@fay_jai/getting-started-with-reactjs-typescript-and-web
9. `yarn run build`
10. open index.html in browser
Detailed blog post: https://jjude.com/react-tsc/
Detailed blog post: https://jjude.com/react-with-tsc/
......@@ -22,4 +22,4 @@ In this program, we create a simple react Hello component. This program builds o
* create a `Hello.tsx`. This is our first component. We can pass parameters into components using this.props.
* Run using `yarn run build` and open index.html
Detailed blog post: https://jjude.com/react-component-with-tsc/
......@@ -11,3 +11,5 @@ State on the other hand can be created and changed by a component. State can be
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`.
Detailed blog post: https://jjude.com/props-vs-state-reactjs/
# Difference between props and state in React.js
`props` and `state` of a component looks the same and leads to confusion.
Ref: http://lucybain.com/blog/2016/react-state-vs-pros/
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`.
Detailed blog post: https://jjude.com/props-vs-state-reactjs/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with ReactJS and Typescript</title>
</head>
<body>
<div id="main"></div>
<!-- we pick from cdn so can be cached by browsers -->
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<!-- compiled file for this project -->
<script src="build/bundle.js"></script>
</body>
</html>
{
"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";
import { TimerInput } from "./TimerInput";
interface Props { startWith: number }
interface State { currentValue: number }
export class Timer extends React.Component<Props, State> {
// initialise state in constructor
constructor(props: Props) {
super(props);
this.state = { currentValue: this.props.startWith }
let timerId = setInterval(() => {
this.setState((prevState: State, props: Props) => ({
currentValue: prevState.currentValue - 1
}))
// if it reaches 0 then stop
if (this.state.currentValue === 0) {
clearInterval(timerId);
}
}, 1000);
}
render() {
const handleInputValue = (startValue: number) => {
this.setState({ currentValue: startValue });
}
return (
<div className="Timer">
<TimerInput onTimerInputSubmit={handleInputValue} />
{this.state.currentValue}
</div>
)
}
}
import * as React from "react";
interface Props { onTimerInputSubmit: (startValue: number) => void }
interface State { }
export class TimerInput extends React.Component<Props, State>{
constructor(props: Props) {
super(props);
}
render() {
const handleSubmit = (event: any) => {
event.preventDefault();
const timerValue = Number((this.refs["timerStartWith"] as HTMLInputElement).value.trim());
// invoke the callback
this.props.onTimerInputSubmit(timerValue)
}
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Timer start value" ref="timerStartWith" />
<input type="submit" value="Submit" />
</form>
)
}
}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Timer } from "./components/Timer";
ReactDOM.render(
<Timer startWith={10} />,
document.getElementById("main")
);
{
"compilerOptions": {
"outDir": "./build/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
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.
......@@ -2,5 +2,12 @@
Excercises to learn React.js
01. Getting started with React.js and Typescript
02. Creating a simple React.js component with Typescript
Blog posts: [Learn React.js with Typescript](https://jjude.com/react-ts/)
01. Getting started with React.js and Typescript ✔️
02. Creating a simple React.js component with Typescript ✔️
03. Props vs State in React.js ✔️
04. Read user input from a form ✔️
05. Display list of items from a static array
06. Make a counter with + & - which increment and decrement a value
07. Use bootstrap to style components
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