Tag: react

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