¿Conecta la aplicación Angular con la aplicación ReactJS?

Question

Tengo una aplicación Angular y parte de la aplicación que quiero escribir en ReactJS.

¿Cómo puedo inyectar la aplicación ReactJS en la aplicación Angular existente? Necesito también comunicación bidireccional para componentes.

Answer 1

Puedes necesitar una opción diferente, así que la escribo en 2 párrafos:

• Angular-ReactJS sin comunicación
• Angular-ReactJS con comunicación bidireccional.

Todo el código a continuación es mínimo para mostrar un problema en un paso presentado. En GitHub usted tiene un código completo para resolver un problema, no siempre 1: 1 con el siguiente ejemplo porque este código está extendido.

Angular-ReactJS sin comunicación

Para agregar la aplicación ReactJS a la aplicación Angular existente, necesita instalar dependencias de 5 npm: react , react-dom :

npm install --save react
npm install --save react-dom
npm install --save-dev @types/react
npm install --save-dev @types/react-dom
npm install --save-dev @types/react-select

Paso siguiente: debemos permitir el uso de la plantilla jsx en los archivos .tsx , por lo que deberíamos editar tsconfig.json y agregar:

{
    ...
   "compilerOptions": {
    …
    "jsx": "react"
}

Si usa WebStorm, debe reiniciar su proyecto porque tslint muestra un error hasta que se reinicia.

Para mantener una estructura clara, creo esta estructura de directorio:

angular /
  ng-hero.component.ts // Component in Angular
  react-renderer.component.ts // ReactJS renderer without communication
react /
  react-application.tsx // React init application
  react-hero.tsx // React hero component
app.component.html
app.component.ts

Ahora necesita crear un componente especial en Angular, que será responsable de integrar la aplicación ReactJS. Este componente lo llamaré ReactRendererComponent . Este componente es muy simple y solo tiene una línea de plantilla, un constructor con un import Injector y una línea en ngOnInit :

@Component({
  selector: ''app-react-renderer'',
  template: `<div class="react-container" id="react-renderer"></div>`
})
export class ReactRendererComponent implements OnInit {
  constructor(public injector: Injector) { }

  ngOnInit() {
    ReactApplication.initialize(''react-renderer'', this.injector);
  }
}

Ahora necesitamos el componente ReactApplication donde inicializamos la aplicación ReactJS:

interface IReactApplication {
  injector: Injector;
}

class ReactApp extends React.Component<IReactApplication, any> {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={''renderer''}>
        <h2>ReactJS component: </h2>
        <br/>
        <ReactHero/>
      </div>
    );
  }
}

export class ReactApplication {

  static initialize(
    containerId: string,
    injector: Injector
  ) {
    ReactDOM.render(
      <ReactApp injector={injector}/>,
      document.getElementById(containerId)
    );
  }
}

Y necesitamos el componente ReactHero que se usó en el siguiente ejemplo:

class ReactHero extends React.Component<any, any> {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <span>
        <span>react-hero works!</span><br/>
        <span>Don''t have any data</span>
      </span>
    );
  }
}
export default ReactHero;

En la aplicación Angular debemos usar el componente ReactRenderer , así que usamos:

App.component data:
<hr>
<h2>This is Angular</h2>
<img width="100" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
<hr>

<!-- Without data binding -->
<app-react-renderer></app-react-renderer>

En este momento tenemos la aplicación Angular con la aplicación ReactJS incorporada, pero sin ninguna comunicación. ¿Es suficiente para usted? Si es así, es todo. Si necesita algún tipo de comunicación entre ambas aplicaciones, a continuación le presento la opción RxJS.

Angular-ReactJS con comunicación bidireccional.

En este ejemplo, tiene un enlace de datos bidireccional soportado por RxJS. Puede obtener estos datos y utilizarlos en su aplicación ReactJS y la aplicación Angular para ver todos los cambios. Esto es suficiente para muchos proyectos, pero puede usar diferentes opciones para obtener esta comunicación bidireccional, por ejemplo, puede usar Redux para ellos.

Para que quede claro, a continuación presento la estructura completa del directorio para esta parte:

angular /
  hero.service.ts
  ng-hero.component.ts // Component in Angular
  react-bidirectional-renderer.component.ts // ReactJS renderer with bidirectional communication
model /
  hero.ts // interface for Hero object
react-bidirectional
  react-bidirectional-application.tsx // React init application with bidirectional communication
  react-bidirectional-hero.tsx // React hero component with RxJS support
app.component.html
app.component.ts

En primer lugar, creamos IHero interfaz IHero con datos: /model/hero.ts

export interface IHero {
  name: string;
  age: number;
}

En el siguiente paso creamos el servicio angular/hero.service.ts , para usarlo en la parte angular de la aplicación:

@Injectable({
  providedIn: ''root''
})
export class HeroService {
  private heroes$: BehaviorSubject<IHero[]> = new BehaviorSubject([]);

  constructor() {
  }

  addHeroes(hero: IHero) { // To add new hero
    const actualHero = this.heroes$.value;
    actualHero.push(hero);
    this.heroes$.next(actualHero);
  }

  updateHeroAge(heroId: number, age: number) { // To update age of selected hero
    const actualHero = this.heroes$.value;
    actualHero[heroId].age = age;
    this.heroes$.next(actualHero);
  }

  getHeroes$(): BehaviorSubject<IHero[]> { // To get BehaviorSubject and pass it into ReactJS
    return this.heroes$;
  }
}

Y en app.component.ts inicializamos con datos (Zeus y Poseidon):

@Component({
  selector: ''app-root'',
  templateUrl: ''./app.component.html''
})
export class AppComponent implements OnInit {
  public heroesObj$: BehaviorSubject<IHero[]>;
  public heroes: IHero[];

  constructor(private heroService: HeroService) {}

  ngOnInit(): void {
    this.heroService.getHeroes$().subscribe((res: IHero[]) => {
      this.heroes = res;
    });

    this.heroesObj$ = this.heroService.getHeroes$();

    this.initHeroes();
  }

  initHeroes() {
    this.heroService.addHeroes({name: ''Zeus'', age: 88});
    this.heroService.addHeroes({name: ''Poseidon'', age: 46});
  }
}

En el siguiente paso, debemos preparar la parte de la aplicación ReacJS, por lo que creamos el archivo react-bidirectional/react-bidirectional-application.tsx :

interface IReactBidirectionalApp {
  injector: Injector;
  heroes$: BehaviorSubject<IHero[]>; // We use this interface to grab RxJS object
}

class ReactBidirectionalApp extends React.Component<IReactBidirectionalApp, any> {
  constructor(props) {
    super(props);

    this.state = {
      heroes$: this.props.heroes$ // and we pass this data into ReactBidirectionalHero component
    };
  }

  render() {
    return (
      <div className={''renderer''}>
        <h2>ReactJS component (bidirectional data binding): </h2>
        <ReactBidirectionalHero heroes$={this.state.heroes$}/>
      </div>
    );
  }
}

export class ReactBidirectionalApplication {

  static initialize(
    containerId: string,
    injector: Injector,
    heroes$: BehaviorSubject<IHero[]>, // This is necessary to get RxJS object
  ) {
    ReactDOM.render(
      <ReactBidirectionalApp injector={injector} heroes$={heroes$}/>,
      document.getElementById(containerId)
    );
  }
}

En el siguiente paso, necesitamos el componente ReactBidirectionalHero , así que lo creamos:

interface IReactBidirectionalHero {
  heroes$: BehaviorSubject<IHero[]>;
}

class ReactBidirectionalHero extends React.Component<IReactBidirectionalHero, any> {
  constructor(props) {
    super(props);

    this.state = {
      heroes: []
    };

    this.addAge = this.addAge.bind(this); // Register function to bump age
    this.addHero  = this.addHero.bind(this); // Register function to add new Hero
  }

  componentDidMount(): void {
    // In componentDidMount we subscribe heroes$ object
    this.props.heroes$.subscribe((res: IHero[]) => {
      // and we pass this data into React State object
      this.setState({heroes: res});
    });
  }

  addAge(i: number) {
    const temp = this.state.heroes;
    temp[i].age = temp[i].age + 1;

    // In this way we update RxJS object
    this.props.heroes$.next( temp);
  }

  addHero() {
    const temp = this.state.heroes;
    temp.push({name: ''Atena'', age: 31});

    // In this way we update RxJS object
    this.props.heroes$.next(temp);
  }

  render() {
    // Hire we render RxJS part of application with addAge button and ADD ATENA button below
    const heroes = this.state.heroes.map((hero: IHero, i) => {
      return <span key={i}>{hero.name} - {hero.age} <button onClick={() => this.addAge(i)}>Add {hero.name} age</button><br/></span>;
    });
    return (
      <span>
        <span>react-hero works!</span><br/>
        {heroes}
        <br/>
        <button onClick={this.addHero}>ADD ATENA</button>
      </span>
    );
  }
}

export default ReactBidirectionalHero;

Ahora necesitamos inicializar la aplicación ReactJS en la aplicación Angular, así que creamos angular/react-bidirectional-renderer.component.ts - es muy simple, con solo un cambio en comparación con la versión sin comunicación:

@Component({
  selector: ''app-react-owc-renderer'',
  template: `<div class="react-container" id="react-owc-renderer"></div>`
})
export class ReactBidirectionalRendererComponent implements OnInit {
  // Hire we get data from parent component, but of course we can also subscribe this data directly form HeroService if we prefer this way
  @Input() heroes$: BehaviorSubject<IHero[]>;

  constructor(public injector: Injector) { }

  ngOnInit() {
    // We add only one parameter into initialize function
    ReactBidirectionalApplication.initialize(''react-owc-renderer'', this.injector, this.heroes$);
  }
}

Y ahora deberíamos cambiar un poco ng-hero.component.ts para ver todos los efectos:

@Component({
  selector: ''app-ng-hero'',
  template: `
    <div>
      <span>ng-hero works!</span><br/>
      <span *ngFor="let hero of heroes; let i = index;">{{hero.name}} - {{hero.age}} - <button (click)="addAge(i)">Add {{hero.name}} age</button><br/></span>
      <br/>
      <button (click)="addHero()">ADD AFRODITA</button>
    </div>
  `
})
export class NgHeroComponent implements OnInit {
  public heroes: IHero[];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.heroService.getHeroes$().subscribe((res: IHero[]) => {
      this.heroes = res;
    });
  }

  addAge(heroId: number) {
    this.heroService.updateHeroAge(heroId, this.heroes[heroId].age + 1);
  }

  addHero() {
    this.heroService.addHeroes({name: ''Afrodita'', age: 23});
  }

}

Finalmente cambiamos app.component.html :

App.component data:
<hr>
<h2>This is Angular component: </h2>
<app-ng-hero></app-ng-hero>
<hr>

<!-- With bidirectional data binding-->
<app-react-owc-renderer [heroes$]="heroesObj$"></app-react-owc-renderer>
<hr>

Y todo debería funcionar. Si tiene algún problema, no dude en preguntar.

Completa el repositorio con esta solución que puedes encontrar en GitHub .

Si buscas demo, haz clic en hire .