|
Size: 7385
Comment:
|
Size: 7391
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 7: | Line 7: |
| A [[Javascript]] library for building user interfaces. Build encapsulated components that manage their own state, then compose them to make complex UIs. | A [[Javascript]] library for building user interfaces. Build encapsulated components that manage their own state, then compose them to make complex UIs. |
| Line 16: | Line 18: |
| We can set XML node properties for the component and properties for its inner state. The component also allow inner children. | We can set XML node properties for the component and properties for its inner state. The component also allow inner children. |
Contents
react
A Javascript library for building user interfaces.
Build encapsulated components that manage their own state, then compose them to make complex UIs.
https://reactjs.org/docs/thinking-in-react.html
The main component react methods are:
- render
- componentWillUnmount
- componentDidMount
We can set XML node properties for the component and properties for its inner state. The component also allow inner children.
Structure
webpack.config.js
tsconfig.json
lib.ts
1 function getText() {
2 return "text";
3 }
4
5 interface Person {
6 firstName: string;
7 lastName: string;
8 }
9
10 function greeterPerson(p: Person) {
11 return "Hello GP, " + p.firstName + ' ' + p.lastName + ' ' + getText();
12 }
13
14 function greeter(person: string) {
15 return "Hello, " + person;
16 }
17
18 interface HumanInterface {
19 name: string;
20 getName(): void;
21 }
22
23 class Human implements HumanInterface {
24 name: string;
25
26 constructor(name: string) {
27 this.name = name;
28 }
29
30 getName() {
31 return "My name is " + this.name;
32 }
33 }
34
35 class PubSub {
36 callbacks: Function[];
37
38 constructor() {
39 this.callbacks = [];
40 }
41
42 addListener(fn: Function): void {
43 this.callbacks.push(fn);
44 }
45
46 notify(message: string): void {
47 this.callbacks.forEach((fn) => {
48 fn(message);
49 });
50 }
51 }
52 let pubSub = new PubSub();
53
54 export { greeter, greeterPerson, Human, HumanInterface, Person, getText, PubSub, pubSub }
greeter.html
package.json
App.tsx
1 import React, { ReactChild } from 'react';
2 import { Persn, greeterPerson, Human, HumanInterface } from './lib';
3 import NameHolder from './NameHolder';
4 import { pubSub } from './lib';
5
6 interface MyState {
7 currDate: string;
8 greetings: string;
9 human: HumanInterface;
10 }
11
12 function createMyState(currDate: string, greetings: string, human: HumanInterface): MyState {
13 return { currDate: currDate, greetings: greetings, human: human };
14 }
15
16 interface MyProps {
17 prop: string;
18 }
19
20 export default class App extends React.Component<MyProps, MyState> {
21 text: string;
22 timerID: number;
23
24 constructor(props: MyProps) {
25 super(props);
26 this.text = this.props.prop;
27 this.state = createMyState("waiting for date", "waiting for greetings", null); // init with MyState format
28 }
29
30 public static createHuman(name: string): HumanInterface {
31 return new Human(name);
32 }
33
34 public tickHandler() {
35 let cd = new Date().toString();
36 let greetings = greeterPerson({ firstName: "first", lastName: "last" });
37 let human: HumanInterface = App.createHuman("JohnDoe");
38 this.setState(createMyState(cd, greetings, human));
39 }
40
41 componentDidMount() {
42 // called after the 1st render !
43 console.log("First render");
44 this.timerID = setInterval(this.tickHandler.bind(this), 1000);
45 }
46
47 componentWillUnmount() {
48 // component will be destroyed
49 console.log("Will be destroyed soon");
50 clearInterval(this.timerID);
51 }
52
53 public render() {
54 // do not call set state in render !
55 return (
56 <div>
57 <p>Hello World!!! -- {this.text} -- {this.state.greetings}</p>
58 <p>Human {this.state.human != null ? this.state.human.getName() : ""} {this.state.currDate} </p>
59
60 <p> <NameHolder attr="holding..." /> </p>
61 <p> <NameHolder attr={this.state.currDate} /> </p>
62
63 <div onClick={() => { this.clickHandler(); }} > {this.props.children} </div>
64 </div>
65 );
66 }
67
68 public clickHandler() {
69 console.log("clicked. # children " + React.Children.count(this.props.children));
70
71 React.Children.forEach(this.props.children, (argx: any) => {
72
73 if (argx.hasOwnProperty("props")) {
74 console.log("props property found");
75 pubSub.notify("message from outer space !");
76 }
77
78 console.log(JSON.stringify(argx));
79 });
80 }
81 }
greeter.tsx
1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import {getText} from "./lib";
4 import App from './App'; // uses App.tsx
5 import NameHolder from './NameHolder';
6
7 console.log("Entry point");
8 let appContainer = document.getElementById('app') ;
9 let markup = <App prop="Other text inside the page"> <NameHolder attr="NameHolder child inside App "/> </App>;
10 ReactDOM.render( markup , appContainer);
NameHolder.tsx
1 import React from 'react';
2 import { pubSub } from './lib';
3
4 // Component properties (XML attributes)
5 interface NameHolderProperties {
6 attr: string;
7 }
8
9 interface NameHolderState {
10 attr: string;
11 }
12
13 // properties and state
14 export default class NameHolder extends React.Component<NameHolderProperties, NameHolderState> {
15 constructor(props: NameHolderProperties) {
16 super(props); // populates the this.props
17 this.state = { attr: this.props.attr };
18
19 pubSub.addListener(this.onMessage);
20 }
21
22 public render() {
23 return <span>!!!{this.state.attr}!!!</span>;
24 }
25
26 public onMessage(message: string): void {
27 console.log(this.state.attr + " receiVed " + message);
28 }
29 }