Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Ejercicio componentes React

Crear un componente al que le pasemos como props un numero y nos muestre la tabla de multiplicar de ese número.

Crear un componente al que le pasemos como props un ancho y un alto y nos cree una tabla de ese ancho y ese alto con números consecutivos. Ej ancho 3, alto 2:

1 2 3
4 5 6

Crear un componente al que le pasemos un nombre y nos pinte el nombre al revés.

Para practicar: Ejercicios React

Ejemplo de componentes

Lista.js

const Lista = ({ items }) => items.map(x => <li key={x}>{x}</li>)

export default Lista

App2.js

const App = ({ nombre, apellido, edad }) => {
  return (
    <p>
      Ola {nombre} {apellido} k ase con esos {edad} añazos que tienes'??
    </p>
  )
}

export default App

App.js

import logo from './logo.svg'
import './App.css'
import App2 from './App2'
import Lista from './Lista'

const App = () => {
  let year = new Date().getFullYear()
  let nacimiento = 1980
  let alumnos = ['Ana', 'Juan', 'Eva']
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>Hola que tal, yo bien</p>
 
        <App2 nombre='Ana' apellido='Pi' edad={year - nacimiento} />
        <ul>
          <Lista items={alumnos} />
        </ul>
      </header>
    </div>
  )
}

export default App

React, the beginning

Para empezar:

https://www.w3schools.com/react/default.asp

https://ibaslogic.com/react-tutorial-for-beginners/

https://leanpub.com/reactjsforthevisuallearner/read#leanpub-auto-chapter-1–what-is-this-all-about

Para seguir:

https://fullstackopen.com/es/about

Hooks:

https://css-tricks.com/react-hooks-the-deep-cuts/

https://usehooks.com/

https://www.freecodecamp.org/news/react-hooks-fundamentals/

Ebook:

Reactjs_Succinctly

Cambiar borrado de registros

En .NET por defecto se eliminan los registros relacionados en cascada. Para evitarlo antes de actualizar la base de datos tenemos que cambiar la migración:

constraints: table =>
                {
                    table.PrimaryKey("PK_ProfesionalesActividades", x => x.Id);
                    table.ForeignKey(
                        name: "FK_ProfesionalesActividades_Actividad_ActividadId",
                        column: x => x.ActividadId,
                        principalTable: "Actividad",
                        principalColumn: "Id",
                        onDelete: ReferentialAction.Cascade);
                    table.ForeignKey(
                        name: "FK_ProfesionalesActividades_Profesionales_ProfesionalId",
                        column: x => x.ProfesionalId,
                        principalTable: "Profesionales",
                        principalColumn: "Id",
                        onDelete: ReferentialAction.Restrict);
                });

Para que por defecto sea así en todas las relaciones lo tenemos que poner en el contexto:

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
    base.OnModelCreating(modelBuilder);

    foreach (var foreignKey in modelBuilder.Model.GetEntityTypes()
        .SelectMany(e => e.GetForeignKeys()))
    {
        foreignKey.DeleteBehavior = DeleteBehavior.Restrict;
    }
}

Y si la cosa ya está hecha añadimos una migración a mano:

In the Package Manager Console, create a new, empty migration with the Add-Migration command, then fill in the Up method like this:

        migrationBuilder.DropForeignKey(
            name: "FK_ElementsPerStrip_Strips_StripId",
            table: "ElementsPerStrip");
        migrationBuilder.AddForeignKey(
            name: "FK_ElementsPerStrip_Strips_StripId",
            table: "ElementsPerStrip",
            column: "StripId",
            principalTable: "Strips",
            principalColumn: "Id",
            onDelete: ReferentialAction.Restrict);
For completeness, do the opposite in the Down method:

        migrationBuilder.DropForeignKey(
            name: "FK_ElementsPerStrip_Strips_StripId",
            table: "ElementsPerStrip");
        migrationBuilder.AddForeignKey(
            name: "FK_ElementsPerStrip_Strips_StripId",
            table: "ElementsPerStrip",
            column: "StripId",
            principalTable: "Strips",
            principalColumn: "Id",
            onDelete: ReferentialAction.Cascade);

Evitar ciclos en la API

builder.Services.AddControllers().AddJsonOptions(x =>
x.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles);

o

[JsonIgnore]

Deshabilitar CORS

using Microsoft.EntityFrameworkCore;
using Profesiones.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
builder.Services.AddDbContext<Contexto>(options =>
               options.UseSqlServer("Server=.\\SQLExpress;Database=Profesiones;Trusted_Connection=True;"));
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        builder =>
        {
            builder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader();
        });
});
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors("AllowAll");
app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();