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

> npm install --save bootstrap
> npm install --save font-awesome
 

import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";

body {
  margin: 0;
  padding: 20px 0 0 0;
  font-family: sans-serif;
}

  return (
    <main className="container">
      <h1>Hello world!</h1>
    </main>
  );

export const genres = [
  { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  // ...
];

const movies = [
  {
    _id: "5b21ca3eeb7f6fbccd471815",
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    numberInStock: 6,
    dailyRentalRate: 2.5,
    publishDate: "2018-01-03T19:04:28.809Z"
  },

  //...
];

import Movies from "./components/movies";

return (
    <main className="container">
      <Movies />
    </main>
  );

 import { getMovies } from "../services/fakeMovieService";

 state = {
    movies: getMovies()
  };

import React, { Component } from "react";

import { getMovies } from "../services/fakeMovieService";

class Movies extends Component {
  state = {
    movies: getMovies()
  };

  handleDelete = movie => {
    const movies = this.state.movies.filter(m => m._id !== movie._id);
    this.setState({ movies });
  };

  render() {
    const { length: count } = this.state.movies;

    if (count === 0) return <p>There are no movies in the database.</p>;

    return (
      <React.Fragment>
        <p>Showing {count} movies in the database.</p>
        <table className="table">
          <thead>
            <tr>
              <th>Title</th>
              <th>Genre</th>
              <th>Stock</th>
              <th>Rate</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {this.state.movies.map(movie => (
              <tr key={movie._id}>
                <td>{movie.title}</td>
                <td>{movie.genre.name}</td>
                <td>{movie.numberInStock}</td>
                <td>{movie.dailyRentalRate}</td>
                <td>
                  <button
                    onClick={() => this.handleDelete(movie)}
                    className="btn btn-danger btn-sm"
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </React.Fragment>
    );
  }
}

export default Movies;

 "Missing method System.Web.Security.FormsAuthentication::get_IsEnabled() in assembly System.Web.dll

Compiler Error Message: CS1703: An assembly with the same identity `mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' 
has already been imported. Consider removing one of the references

 git clone git://github.com/mono/xsp.git
cd xsp
./autogen.sh --prefix=/opt
make
sudo make install

 System.IO.FileNotFoundException: Could not load file or assembly XSP, Version=3.0.0.0

 cd xsp/src/Mono.WebServer.XSP/bin/Debug
sudo gacutil -i Mono.WebServer.XSP.exe
sudo gacutil -i Mono.WebServer.dll

 cd myMvcAppPath
sudo mono Mono.WebServer.XSP.exe

 CS0234: The type or namespace name `Helpers' does not exist in the namespace `System.Web'.
Are you missing an assembly reference?

  <system.web> 
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.Helpers, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />        
        <add assembly="System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />        
      </assemblies>
    </compilation>

 $ gacutil -l Microsoft.Web.Infrastructure
The following assemblies are installed into the GAC:
Microsoft.Web.Infrastructure, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35
Number of items = 1

• console.log(object[,object,...])
  
  این دستور یک پیغام در کنسول چاپ می‌کند .
  

  console.log("This is a log message!");

  نتیجه :
  
  

  
  
  

  این دستور را می‌توانیم به شکل‌های مختلفی فراخوانی کنیم .
  مثلا :
  

  console.log(1 , "+" , 2 , "=", (1+2));

  نتیجه :
  
  

  
  

  در این دستور می‌توانیم از چند حرف جایگزین هم استفاده کنیم .
  
  

  
  مثال :
  

  console.log("Firebug 1.0 beta was %s in December %i.","released",2006);

  نتیجه :
  
  

  
  

  عملکرد 3 جایگزین نخست با توجه با مثال قبل مشخص شد . پس به سراغ جایگزین %o و %c می‌رویم .
  اگر در رشته‌ی مورد نظر ، یک شیء ( تابع ، آرایه ، ... ) برای جایگزین %o ارسال کنیم ، در خروجی آن شیء بصورت لینک نمایش داده می‌شود که با کلیک بروی آن ، فایرباگ آن شیء را در تب مناسبش Inspect می‌کند .
  مثال :
  

  console.log("this is a test functin : %o",testFunc);

  نتیجه :
  
  

  
  
  

  و زمانی که بروی لینک testFunc کلیک کنیم :
  
  

  
  
  

  یک ترفند : بوسیله جایگزین %o توانستیم به تابع مورد نظر لینک بدهیم . اگر بجای جایگزین %o از %s استفاده کنیم ، می‌توانیم بدنه‌ی تابع را ببینیم :
  

  console.log("this is a test functin : %s",testFunc);

  نتیجه :
  
  

  
  
  
  توسط جایگزین %c هم می‌توانید خروجی را فرمت کنید .
  

  console.log("%cThis is a Style Formatted Log","color:green;text-decoration:underline;");

  نتیجه :
  
  
  

• console.debug(object[, object, ...])
• console.info(object[, object, ...])
• console.warn(object[, object, ...])
• console.error(object[, object, ...])
  
  مشابه با دستور log عمل می‌کنند با این تفاوت که خروجی را با استایل متفاوتی نمایش می‌دهند .
  همچنین هر یک از این دستورات ، توسط دکمه‌های همنام در کنسول قابل فیلتر شدن هستند .
  
  

  
  
  

• console.assert(expression[, object, ...])
  
  چک می‌کند که عبارت ارسال شده true هست یا نه . اگر true نبود ، پیغام وارد شده را چاپ و یک استثناء ایجاد می‌کند .
  

  console.assert(1==1,"this is a test error");
  console.assert(1!=1,"this is a test error");

  نتیجه :
  
  
  
  

• console.clear()
• console.dir(object)
• console.dirxml(node)
• console.profile([title])
• console.profileEnd()

این توابع معادل توابع همنامشان در خط فرمان هستند که در قسمت قبل با عملکردشان آشنا شدیم .


• console.trace()
  
  با این متد می‌توانید پی ببرید که از کجا و توسط چه متدهایی برنامه به قسمت trace رسیده . برای درک بهتر مجددا اسکریپت صفحه‌ی تست این مقاله را بررسی کنید ( جایی که متد trace قرار داده شده است ) .
  اکنون صفحه‌ی تست را باز کنید و بروی دکمه‌ی startTrace کلیک کنید . خروجی ظاهر شده در کنسول را از پایین به بالا بررسی کنید .
  
  

  

  
  حتما متوجه شدید که متد method3 چگونه در کدهایمان فراخوانی شده است !؟
  ابتدا با کلیک بروی دکمه‌ی startTrace ، متد startTrace اجرا شده و به همین ترتیب متد startTrace متد method1 ، متد method1 هم متد method2 و در نهایت method2 متد method3 را فراخوانی کرده است .
  دستور trace زمانی که در حال بررسی کدهای برنامه نویسان دیگر هستید ، بسیار می‌تواند به شما کمک کند .
  
  
• console.group(object[, object, ...])
  
  با این دستور می‌توانید لاگ‌های کنسول را بصورت تو در تو گروه بندی کنید .
  

  console.group("Group1");
  console.log("Log in Group1");
  console.group("Group2");
  console.log("Log in Group2");
  console.group("Group3");
  console.log("Log in Group3");

  نتیجه :
  
  

  
  
  

• console.groupCollapsed(object[, object, ...])
  
  این دستور معادل دستور قبلی است با این تفاوت که هنگام ایجاد ، گروه را جمع می‌کند .
  
  
• console.groupEnd()
  
  به آخرین گروه بندی ایجاد شده خاتمه می‌دهد .
  
  
• console.time(name)
  
  یک تایمر با نام داده شده ایجاد می‌کند . زمانی که نیاز دارید زمان طی شده بین 2 نقطه را اندازه گیری کنید ، این تابع مفید خواهد بود .
  
  
• console.timeEnd(name)
  
  تایمر همنام را متوقف و زمان طی شده را چاپ می‌کند .
  

  console.time("TestTime");
  var t = 1;
  for (var i = 0; i < 100000; i++) { t *= (i + t) }
  console.timeEnd("TestTime");

  نتیجه :
  
  

  
  

• console.timeStamp()
  
  توضیحات کامل را از اینجا دریافت کنید .
  
  
• console.count([title])
  
  تعداد دفعات فراخوانی شدن کدی که این متد در آنجا قرار دارد را چاپ می‌کند .
  البته ظاهرا در ورژن 10.0.1 که بنده با آن کار می‌کنم ، این دستور بی عیب کار نمی‌کند . زیرا بجای آنکه در هربار فراخوانی ، در همان خط تعداد فراخوانی را نمایش بدهد ، فقط اولین لاگ را آپدیت می‌کند .
  
  

  
  

• console.exception(error-object[, object, ...])
  
  یک پیغام خطا را به همراه ردیابی کامل اجرای کدها تا زمان رویداد خطا ( مانند متد trace ) چاپ می‌کند .
  در صفحه‌ی تست این متد را اجرا کنید :
  

  startError();

  نتیجه :
  
  

  

   توجه کنید که ما برای مشاهده‌ی عملکرد صحیح این دستور ، آن را در تابع testError قرار دادیم و بوسیله تابع startError آن فراخوانی کردیم .
  
  
• console.table(data[, columns])
  
  بوسیله این دستور می‌توانید مجموعه ای از اطلاعات را بصورت جدول بندی نمایش بدهید .
  این متد از متدهای جدیدی است که در فایرباگ قرار داده شده است .
  
  

  
  برای اطلاعات بیشتر به اینجا مراجعه کنید .
  

public class Program
{
    public static void Main(string[] args)
    {
        BuildWebHost(args).Run();
    }

     public static IWebHost BuildWebHost(string[] args) =>
        WebHost.CreateDefaultBuilder(args)
            .UseStartup<Startup>()
            .Build();
}

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            }; 
    }
}

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
if (app.Environment.IsDevelopment())
{
   app.UseDeveloperExceptionPage();
}
app.UseStaticFiles();
app.MapGet("/", () => "Hello World!");
app.MapRazorPages();
app.Run();

var hostBuilder = Host.CreateDefaultBuilder(args)
    .ConfigureServices(services => 
    {
        services.AddRazorPages();
    })
    .ConfigureWebHostDefaults(webBuilder =>
    {
        webBuilder.Configure((ctx, app) => 
        {
            if (ctx.HostingEnvironment.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", () => "Hello World!");
                endpoints.MapRazorPages();
            });
        });
    }); 
hostBuilder.Build().Run();

 var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSingleton<MyThingy>();

builder.Logging.AddFile();

var app = builder.Build();

app.UseStaticFiles();
app.MapRazorPages();

var o = new orgChart();

o.setColor('#99CC99', '#CCFFCC');
o.setFont('arial', 18);
o.addNode(0, '', '', 'Arial 18', 1);

o.setColor('#CCCC66', '#FFFF99');
o.setFont('arial', 10, '#000000');
o.addNode(11, 0, 'u', 'text will be split if it does not fit. ThisIsAVeryLongWordAndItWillBeClipped. Too many lines will be clipped too.');

o.setFont('arial', 10, '#000000', 0);
o.addNode(12, 0, 'u', 'aligned at top');

o.setFont('arial', 10, '#000000', 1);
o.addNode(13, 0, 'u', 'centered');
o.setColor('#CC4950', '#FF7C80');

o.setFont('times', 16, '#FF0F00');
o.addNode(21, 0, 'l', 'Times 16 red');

o.setFont('times', 16, '#000000');
o.addNode(22, 0, 'l', 'Times 16');

o.setFont('times', 48, '#000000');
o.addNode(23, 0, 'l', 'Times 48 does not fit at all');
o.setColor('#CC9966', '#FFCC99');

o.setFont('jokerman', 12, '#000000');
o.addNode(31, 0, 'r', 'Jokerman (if available)');

o.setFont('bold times', 16, '#000000');
o.addNode(32, 0, 'r', 'bold Times 16');

o.setFont('italic times', 16, '#000000');
o.addNode(33, 0, 'r', 'italic Times 16');

o.setFont('bold italic times', 16, '#000000');
o.addNode(34, 0, 'r', 'bold italic Times 16');

o.setColor('#B5D9EA', '#CFE8EF');
o.setFont('arial', 28, '#000000');
o.addNode(50, '', '', 'Arial 28');
o.setFont('arial', 29);
o.addNode(51, 50, 'u', 'Arial 29');
o.setFont('arial', 30);
o.addNode(52, 51, 'u', 'Arial 30');
o.setFont('arial', 31);
o.addNode(53, 52, 'u', 'Arial 31');
o.setFont('arial', 32);
o.addNode(54, 53, 'u', 'Arial 32');

o.drawChart('c_fonts');

var o = new orgChart();

o.setSize(36, 12, 4, 25, 180);

o.setColor('#99CC99', '#CCFFCC');
o.setFont('arial', 18);
o.addNode(0, '', '', 'Root node');
o.setFont('arial', 12);
o.setColor('#CCCC66', '#FFFF99');
o.addNode(11, 0, 'u', 'u-node 1');
o.addNode(12, 0, 'u', 'u-node 2');
o.addNode(13, 0, 'u', 'u-node 3');
o.setColor('#CC4950', '#FF7C80');
o.addNode(21, 0, 'l', 'l-node 1');
o.addNode(22, 0, 'l', 'l-node 2');
o.addNode(23, 0, 'l', 'l-node 3');
o.setColor('#CC9966', '#FFCC99');
o.addNode(31, 0, 'r', 'r-node 1');

o.drawChart('c_size');

var o = new orgChart();

o.setColor('#99CC99', '#CCFFCC');
o.setFont('arial', 18);
o.addNode( 0, '', '', 'Searching', 1);
o.addNode(50, '', '', 'Social', 1);
o.addNode(90, '', '', 'Misc.', 1);

o.setColor('#CCCC66', '#FFFF99');
o.setFont('arial', 12);
o.addNode(11, 50, 'u', 'Facebook', 0, 'http://facebook.com');
o.addNode(13, 90, 'u', 'Youtube', 0, 'http://youtube.com');
o.addNode(14, 13, 'l', 'Youtube Music', 0, 'http://youtube.com/music');
o.addNode(15, 13, 'l', 'Youtube Entertainment', 0, 'http://youtube.com/entertainment');

o.setColor('#CC4950', '#FF7C80');
o.addNode(21, 0, 'l', 'Google', 0, 'http://google.com');
o.addNode(22, 0, 'l', 'Bing', 0, 'http://bing.com');

o.addNode('r2', '', '', 'Top of this Page', 0, '#');
o.addNode('', 'r2', 'u', 'Back to the introduction', 0, '/orgchart');

o.drawChart('c_links');