کدهای متورم (Bloaters) 

بد استفاده کنندگان از شیء گرایی (Object orientation abusers)  

جلوگیری کنندگان از تغییر(Change preventers) 

کدهای غیر ضروری (Dispensables) 

کدهایی بیش از اندازه وابسته به هم (Couplers) 

> create-react-app sample-04
> cd sample-04
> npm start

> npm install --save bootstrap

import "bootstrap/dist/css/bootstrap.css";

import React, { Component } from 'react';

import React, { Component } from "react";

class Counter extends Component {
  render() {
    return <h1>Hello world!</h1>;
  }
}

export default Counter;

import Counter from "./components/counter";

 ReactDOM.render(<Counter />, document.getElementById("root"));

  render() {
    return <h1>Hello world!</h1><button>Increment</button>;
  }

  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <button>Increment</button>
      </div>
    );

return ;
  <div></div>

return (
  <div></div>
);

    return (
      <React.Fragment>
        <h1>Hello world!</h1>
        <button>Increment</button>
      </React.Fragment>
    );

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span>{this.state.count}</span>
        <button>Increment</button>
      </React.Fragment>
    );
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span>{this.formatCount()}</span>
        <button>Increment</button>
      </React.Fragment>
    );
  }

  formatCount() {
    const { count } = this.state; // Object Destructuring
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

  formatCount() {
    const { count } = this.state; // Object Destructuring
    return count === 0 ? <h1>Zero</h1> : count;
  }

  state = {
    count: 0,
    imageUrl: "/logo192.png"
  };

  render() {
    return (
      <React.Fragment>
        <img src={this.state.imageUrl} alt="" />
        <span>{this.formatCount()}</span>
        <button>Increment</button>
      </React.Fragment>
    );
  }

    return (
      <React.Fragment>
        <img src={this.state.imageUrl} alt="" />
        <span className="badge badge-primary m-2">{this.formatCount()}</span>
        <button className="btn btn-secondary btn-sm">Increment</button>
      </React.Fragment>
    );

  styles = {
    fontSize: 50,
    fontWeight: "bold"
  };

    return (
      <React.Fragment>
        <img src={this.state.imageUrl} alt="" />
        <span style={this.styles} className="badge badge-primary m-2">
          {this.formatCount()}
        </span>
        <button className="btn btn-secondary btn-sm">Increment</button>
      </React.Fragment>
    );

<button style={{ fontSize: 30 }} className="btn btn-secondary btn-sm">

  render() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";

    return (
      <React.Fragment>
        <img src={this.state.imageUrl} alt="" />
        <span style={this.styles} className={classes}>
          {this.formatCount()}
        </span>
        <button style={{ fontSize: 30 }} className="btn btn-secondary btn-sm">
          Increment
        </button>
      </React.Fragment>
    );

  render() {
    let classes = this.getBadgeClasses();
    // ...
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

<span style={this.styles} className={this.getBadgeClasses()}>

using Microsoft.AspNetCore.Mvc;

namespace AngularTemplateDrivenFormsLab.Controllers
{
    [Route("api/[controller]")]
    public class ShowImagesController : Controller
    {
        [HttpGet("[action]")]
        public IActionResult GetImage()
        {
            return File("~/assets/resume.png", "image/png");
        }
    }
}

import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class DownloadBinaryDataService {

  constructor(private httpClient: HttpClient) { }

  public getImage(): Observable<Blob> {
    return this.httpClient.get("/api/ShowImages/GetImage", { responseType: "blob" });
  }
}

import { Injectable } from "@angular/core";

function getWindow(): any {
  return window;
}

@Injectable()
export class WindowRefService {
  get nativeWindow(): any {
    return getWindow();
  }
}

import { WindowRefService } from "./window.service";

@NgModule({
  providers: [
    WindowRefService
  ]
})
export class CoreModule {}

const urlCreator = this.nativeWindow.URL;
imageBlobUrl = urlCreator.createObjectURL(imageDataBlob);

<img src="blob:http://localhost:5000/9d4bae44-00bc-4ed8-9f27-cac2de5ecd5d">

 img-src 'self' data: blob:

import { WindowRefService } from "./../../core/window.service";
import { DownloadBinaryDataService } from "app/angular-http-client-blob/download-binary-data.service";
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { DomSanitizer, SafeUrl } from "@angular/platform-browser";

@Component({
  templateUrl: "./download-blobs.component.html",
  styleUrls: ["./download-blobs.component.css"]
})
export class DownloadBlobsComponent implements OnInit {

  @ViewChild("sampleImage1") sampleImage1: ElementRef;
  private nativeWindow: Window;
  imageBlobUrl: string;
  sanitizedImageBlobUrl: SafeUrl;

  constructor(private downloadService: DownloadBinaryDataService,
    private windowRefService: WindowRefService, private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.nativeWindow = this.windowRefService.nativeWindow;
    this.downloadService.getImage().subscribe(imageDataBlob => {
      const urlCreator = this.nativeWindow.URL;
      this.imageBlobUrl = urlCreator.createObjectURL(imageDataBlob); // doesn't work -> <img [src]="imageBlobUrl">
      this.sampleImage1.nativeElement.src = this.imageBlobUrl; // works -> <img #sampleImage1>
      this.sanitizedImageBlobUrl = this.sanitizer.bypassSecurityTrustUrl(this.imageBlobUrl); // works -> <img [src]="sanitizedImageBlobUrl">
    });
  }
}

<h1>Angular HttpClient Blob</h1>

<h4>#sampleImage1</h4>
<img #sampleImage1>

<h4>imageBlobUrl</h4>
<img [src]="imageBlobUrl">

<h4>sanitizedImageBlobUrl</h4>
<img [src]="sanitizedImageBlobUrl">

this.imageBlobUrl = urlCreator.createObjectURL(imageDataBlob); // doesn't work -> <img [src]="imageBlobUrl">

<h4>imageBlobUrl</h4>
<img [src]="imageBlobUrl">

<img _ngcontent-c1="" src="unsafe:blob:http://localhost:5000/a4505339-5da2-4303-949c-8e6a7cfff2fc">

Refused to load the image 'unsafe:blob:http://localhost:5000/a4505339-5da2-4303-949c-8e6a7cfff2fc' 
because it violates the following Content Security Policy directive: "img-src 'self' data: blob:".

this.sanitizedImageBlobUrl = this.sanitizer.bypassSecurityTrustUrl(this.imageBlobUrl); // works -> <img [src]="sanitizedImageBlobUrl">

<img [src]="sanitizedImageBlobUrl">

<img _ngcontent-c1="" src="blob:http://localhost:5000/a4505339-5da2-4303-949c-8e6a7cfff2fc">

<img #sampleImage1>

@ViewChild("sampleImage1") sampleImage1: ElementRef;

this.sampleImage1.nativeElement.src = this.imageBlobUrl; // works -> <img #sampleImage1>

<ng-component _nghost-c1=""><h1 _ngcontent-c1="">Angular HttpClient Blob</h1>

<h4 _ngcontent-c1="">#sampleImage1</h4>
<img _ngcontent-c1="" src="blob:http://localhost:5000/a4505339-5da2-4303-949c-8e6a7cfff2fc">

<h4 _ngcontent-c1="">imageBlobUrl</h4>
<img _ngcontent-c1="" src="unsafe:blob:http://localhost:5000/a4505339-5da2-4303-949c-8e6a7cfff2fc">

<h4 _ngcontent-c1="">sanitizedImageBlobUrl</h4>
<img _ngcontent-c1="" src="blob:http://localhost:5000/a4505339-5da2-4303-949c-8e6a7cfff2fc">
</ng-component>

برای مدیریت بهتر کامپوننت‌ها جهت استفاده مجدد از آنها بهتر است ورودی‌های کامپوننت را اعتبارسنجی کنیم. این ورودی‌ها چه برای استفاده داخلی کامپوننت، یا جهت مشخص کردن وضعیت آن، بر رفتار کامپوننت تاثیر زیادی دارند. React مجموعه‌ای از اعتبار سنجی‌ها را دارد که میشود به کامپوننت اضافه کرد. باید توجه داشته باشیم که پیام‌های خطای این اعتبارسنجی‌ها فقط در حالت Development Mode قابل استفاده هستند. به زبان ساده اگر از react.min.js استفاده کنید، پیام‌های خطا را نخواهید دید. باید فایل‌ها را به نوع react.js تبدیل کنید. اعتبارسنجی React در زمان توسعه و برای توسعه دهندگان استفاده میشود. 

مثال نوشیدنی‌ها در قسمت چهارم میتوانست نام نوشیدنی و قیمت آن را نمایش دهد و همچنین میتوانستیم به لیست نوشیدنی‌ها، موردی را اضافه کنیم. اگر ورودی قیمت، اعتبارسنجی نشود، میتوان رشته‌ای را بجای عدد به عنوان قیمت به کامپوننت ارسال کرد. نحوه اعتبارسنجی قیمت نوشیدنی‌ها به صورت زیر است. 

const MenuItem = props => (
    <li className="list-group-item">
        <span className="badge">{props.price}</span>
        <p>{props.item}</p>
    </li>
)

MenuItem.propTypes = {
    price: React.PropTypes.number
};

شیء propTypes را به کامپوننت اضافه کرده‌ایم و در تنظیمات آن میتوانیم برای هر پارامتر ورودی یکی از  اعضای PropTypes از React را که مناسب حال پارامتر است، انتخاب کنیم. در مثال بالا مشخص کرده‌ایم که ورودی price باید عدد باشد و اگر مثلا رشته‌ای را بجای عدد ارسال کنیم، پیام خطای زیر را در Console خواهیم داشت. 

Warning: Failed prop type: Invalid prop `price` of type `string` supplied to `MenuItem`, expected `number`.
    in MenuItem (created by Menu)
    in Menu

یا میتوانستیم از React.PropTypes.number.isRequired استفاده کنیم تا درج مقداری برای این ورودی الزامی باشد. اگر اعتبارسنجی‌های React کافی نبودند میتوانیم اعتبارسنجی‌های سفارشی خودمان را ایجاد کنیم. در مثال زیر میخواهیم ورودی price بیشتر از 15000 نباشد.

MenuItem.propTypes = {
    price: (props, price)=>{
        if(props[price] > 15000){
            return new Error("Too expensive!");
        }
    }
};

let MenuItem = React.createClass({
    propTypes: {
        price: React.PropTypes.number
    }
});

class MenuItem extends React.Component{
    static propTypes = {
        price: React.PropTypes.number
    };
}

MenuItem.defaultProps = {
    price: 1000
};

let MenuItem = React.createClass({
    getDefaultProps() {
        return { price: 200 }
    },
    render() {
        return (
            <li className="list-group-item">
                <span className="badge">{this.props.price}</span>
                <p>{this.props.item}</p>
            </li>
        );
    }
});

<canvas id="canvas1" width="800" height="800" ></canvas>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" >
<!--[if ie]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="orgchart.js"></script>

var o = new orgChart();

o.addNode(1, '', '', 'Root node');
o.addNode(2, 1, 'u', 'u-node 1');
o.addNode(3, 1, 'u', 'u-node 2');
o.addNode(4, 1, 'u', 'u-node 3');
o.addNode(5, 1, 'l', 'l-node 1');
o.addNode(6, 1, 'l', 'l-node 2');
o.addNode(7, 1, 'r', 'r-node 1');
o.addNode(8, 1, 'r', 'r-node 2');
o.addNode(9, 1, 'r', 'r-node 3');

o.addNode('', '', '', 'Root 2');
o.addNode('', 'Root 2', 'r', 'using');
o.addNode('', 'Root 2', 'r', 'text as\nid');

o.drawChart('canvas1');

مشکل!!

window.CallCall = (objCal1) => {
    new AMIB.persianCalendar(objCal1,{
        onchange: function(pdate) {
            DotNet.invokeMethodAsync('ShamsiDatePickerBlazor', 'DateChanged', pdate.toString()).then(
                (date) => {
                    console.log(data);
                }
            );
        }
    });
}

static string selectedDate;
[JSInvokable]
public static void DateChanged(string pdate)
{
    selectedDate = pdate;
}