Tag: reactjs

React Communicating between Parent and Child Component

App.tsx

import * as React from 'react'
import {Home} from "./components/Home";
export interface AppProps { compiler: string; framework: string; }

class App extends React.Component<AppProps,undefined> {

    onGreeting()
    {
        alert("Hello World");
    }

    render() {
        return (
            <div>
                <Home greet={this.onGreeting}/>
            </div>
        );
    }
}

export default App;

components/Home.tsx

import * as React from 'react'
export interface HomeProps { greet?:any }

export class Home extends React.Component<HomeProps,undefined> {

    render() {
        return (
            <div>
                Hello World

                <div>
                    <button onClick={this.props.greet}>Say Hello</button>
                </div>
            </div>
        );
    }
}

References
https://github.com/mhdr/ReactJSSamples/tree/master/009

React Stateless Components

App.tsx

import * as React from 'react'
import {Home} from "./components/Home";
export interface AppProps { compiler: string; framework: string; }

class App extends React.Component<AppProps,undefined> {
    render() {
        return (
            <div>
                Hello World

                <Home Link="Home"/>
            </div>
        );
    }
}

export default App;

components/Home.tsx

import * as React from 'react'
export interface HomeProps {Link?:string }

export const Home = (props: HomeProps) => {
    return (
        <div>
            <a href="#">{props.Link}</a>
        </div>
    );
};

References
https://github.com/mhdr/ReactJSSamples/tree/master/008

React State of Components

/components/Home.tsx

import * as React from 'react'
export interface HomeProps {
    number?: number
}

export interface HomeState {
    number: number
}

export class Home extends React.Component<HomeProps,HomeState> {

    constructor(props: HomeProps) {
        super();
        this.state = {
            number: props.number
        };
    }

    public static defaultProps: Partial<HomeProps> = {
        number: 0
    };

    increaseNumber() {
        let newNumber: number;
        newNumber = this.state.number + 1;

        this.setState({
            number: newNumber
        });
    }

    render(): JSX.Element {
        return (
            <div>
                <p>Count : {this.state.number}</p>
                <button className="btn btn-primary" onClick={()=>{this.increaseNumber()}}>Increase Number</button>
            </div>
        );
    }
}

App.tsx

import * as React from 'react'
import {Home} from "./components/Home"

export interface AppProps { }


class App extends React.Component<AppProps,undefined> {
    render() {
        return (
            <div>
                <Home />
            </div>
        );
    }
}

export default App;

References
https://github.com/mhdr/ReactJSSamples/tree/master/007

React Events

/components/CustomButton.tsx

import * as React from 'react'
import "./CustomButton.css"

 
export interface CustomButtonProps { number: number
}

export class CustomButton extends React.Component<CustomButtonProps,undefined> {

    private number: number;

    constructor(props:CustomButtonProps) {
        super();
        this.number = props.number;
    }

    public increaseNumber()
    {
        this.number +=1;
        console.log(this.number);
    }

    render() {
        return (
            <div>
                <button className="btn btn-primary bold" onClick={this.increaseNumber.bind(this)}>Increase Number</button>
            </div>
        );
    }
}

App.tsx

import * as React from 'react'
export interface AppProps { }
import {CustomButton} from "./components/CustomButton"

export default class App extends React.Component<AppProps,undefined> {
    render() {
        return (
            <div>
                <CustomButton number={10} />
            </div>
        );
    }
}

References
https://github.com/mhdr/ReactJSSamples/tree/master/006

React Passing Data with Props

/components/Header.js

import React, {Component} from 'react';
import "./Header.css"

export class Header extends Component {

    render() {

        var classNames = "";

        if (this.props.isBold) {
            classNames += " bold";
        }

        return (
            <div className={classNames}>
                App
            </div>
        );
    }
}

Header.propTypes = {
    isBold: React.PropTypes.bool
};

/components/Content.js

import React, {Component} from 'react';
import "./Content.css"

export class Content extends Component {

    render() {

        var classNames = "";

        if (this.props.size === "small") {
            classNames += " small";
        }
        else if (this.props.size === "medium") {
            classNames += " medium";
        }
        else if (this.props.size === "large") {
            classNames += " large";
        }

        return (
            <div className={classNames}>
                {this.props.children}
            </div>
        );
    }
}

Content.propTypes = {
    size: React.PropTypes.string,
    children: React.PropTypes.array
};

App.js

import React, { Component } from 'react';
import {Header} from "./components/Header"
import {Content} from "./components/Content"


export default class App extends Component {
  render() {
    return (
      <div>
        <Header isBold={true} />
        <Content size={"large"}>
          Hello <i>World</i>
        </Content>
      </div>
    );
  }
}

References
https://github.com/mhdr/ReactJSSamples/tree/master/005

ReactJS Outputting Dynamic Data

App.tsx

import * as React from 'react'
export interface AppProps { compiler: string; framework: string;
}

class App extends React.Component<AppProps,undefined> {
    render() {

        let number2 = 17;
        let number3: any = "";
        let n4 = 5;
        let n5 = 2;

        if (true) {
            number2 = 34 + 198;
            number2 = number2 / 2;

            number3 =<i>19</i>
        }

        return (
            <div>
                <p>
                    <b>Number :</b> {2 + 4}
                </p>

                <p>
                    <b>Number 2 :</b> {number2}
                </p>

                <p>
                    <b>Number 3 :</b> {number3}
                </p>

                <p>
                    <b>Number 4 :</b> { n4 === n5 ? 18 : 19}
                </p>
            </div>
        );
    }
}

export default App;

References
https://github.com/mhdr/ReactJSSamples/tree/master/004

Configure React with TypeScript

create-react-app hello-world
npm install --save react react-dom @types/react @types/react-dom

npm install --save-dev typescript awesome-typescript-loader source-map-loader

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "jsx": "preserve",
    "noImplicitAny": true,
    "noImplicitUseStrict":true,
    "declaration":true,
    "removeComments":true
  },
  "exclude": [
    "node_modules"
  ]
}

App.tsx

import * as React from 'react'
export interface AppProps { compiler: string; framework: string; }

class App extends React.Component<AppProps,undefined> {
    render() {
        return (
            <div>
                Hello World
            </div>
        );
    }
}

export default App;

References
https://github.com/mhdr/ReactJSSamples/tree/master/003

ReactJS Multiple Components

/components/Header.js

import React, { Component } from 'react';

class Header extends Component {
    render() {
        return (
            <div>
                <h1>Header</h1>
            </div>
        );
    }
}

export default Header;

/components/Content.js

import React, { Component } from 'react';

class Content extends Component {
    render() {
        return (
            <div>
                <p>Content</p>
            </div>
        );
    }
}

export default Content;

App.js

import React, { Component } from 'react';
import Header from "./components/Header"
import Content from "./components/Content"

class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <Content/>
      </div>
    );
  }
}

export default App;

References
https://github.com/mhdr/ReactJSSamples/tree/master/002