poc-react-app v0.2.0
React Project: React components inside an Angular host application POC
General Notes
Aim
This projects aims to use React Components inside an Angular project. The project is based on Microsoft's react-angular project (Github).
Components
Angular Host project : (Github repo)
An Angular project that hosts both React components and Angular components. The angular components are based on Angular io's example project
The Wrapper project: (Github repo, npm package)
A thin wrapper for the React components that maps inputs and outputs between the host Angular component and the child React component.
The React project: (Github repo, npm package)
A sample React project that can be used as a standalone project, hosted inside another React project or hosted inside an Angular project using the Wrapper.
Installation Steps
Install packages then run
yarn
yarn start
or
npm install
npm start
Integrations Steps Walkthrough
These steps are already implented in this project. This is a walkthrough of these steps
Angular Host Project
Install angular-react, react, react-dom
yarn add angular-react react react-dom
or
npm install angular-react react react-dom
Install the React project and the wrapper in our case poc-react-app (React application) and poc-react-components (wrapper)
yarn add poc-react-app poc-react-components
In Angular’s project app.module import the AngularReactBrowserModule from @angular-react/core and use it instead of Angular’s Browser module
import { AngularReactBrowserModule } from "@angular-react/core";
...
@NgModule({
imports: [
AngularReactBrowserModule,
....
]
})
],
In Angular's project app.module import the wrapper and add it in Ngmodule imports
import { PocAppModule } from "poc-react-components";
...
@NgModule({
imports: [
...
PocAppModule,
...
],
Add the react component (imported in the above step from the wrapper) to the desired angular component using its selector ( in our case), props can be passed to the React component, using normal Angular syntax
-----------dashboard.component.html-----------
<poc-app-react
[basketItems]="basketItems"
(onStateChange)="onStateChange($event)"
>
</poc-app-react>
-----------dashboard.component.ts-----------
initialState = {};
reactState = this.initialState;
onStateChange(state): void {
this.reactState = state;
}
Add all the routes that the React app has to the Angular routing module so that they point to an Angular component that hosts the React component (Like the one created in the above step)
const routes: Routes = [
.....
//Dashbord component hosts the react component
{ path: "dashboard", component: DashboardComponent },
.....
];