Tag: react

Conditional Rendering in React JSX

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}

Inside return

function List() {
    const people = [
        {id: 1, name: "Mahmood", isAdmin: true},
        {id: 2, name: "Ali", isAdmin: false},
        {id: 3, name: "Javad", isAdmin: false}
    ];

    return (
        <ul>
            {people.map((value, index) => (
                value.isAdmin?(<li key={value.id}>{value.name}</li>):null
            ))}
        </ul>
    );
}

export default List;

Preventing Component from Rendering

function WarningBanner(props) {
  if (!props.warn) {    return null;  }
  return (
    <div className="warning">
      Warning!
    </div>
  );
}

References
https://reactjs.org/docs/conditional-rendering.html

Display Lists in React JSX

function List() {
    const people = [
        {id: 1, name: "Mahmood"},
        {id: 2, name: "Ali"},
        {id: 3, name: "Javad"}
    ];

    return (
        <ul>
            {people.map((value, index) => (
                <li key={value.id}>{value.name}</li>
            ))}
        </ul>
    );
}

export default List;

Keys help React identify which items have changed, are added, or are removed. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort.

References
https://reactjs.org/docs/lists-and-keys.html

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