Содержание
Package separation
@angular-react is split into 2 main parts:
- Core (
@angular-react/core) - Wrapper libraries (
@angular-react/fabric,@angular-react/semantic-ui)
The core library takes care of the heavy lifting, orchestrates the rendering of the React components insider Angular, interoperability between Angular and React and provide some functionality that's commonly needed when creating wrapper components (more on that below).
Wrapper libraries create what's called "wrapper components" around React components exposed by the native UI library, as well as handle all the plumbing around binding them to Angular, the logic in these libraries is thus usually pretty limited.
Concepts
As you can expect, you need to know Angular and React, and in addition to the regular stuff like components' lifecycle etc. you also need a good understanding of how Angular rendering works (summary, full API docs), and how React rendering works in the browser (ReactDOM).
Additionally, there are a few concepts that are important to know when dealing with @angular-react, and more specifically - @angular-react/core:
ReactRenderer- an implementation of Angular'sRenderer2. This is what drives the whole library and bootstraps the rendering process for each component.ReactNode- a container of a specific React component instance, the renderer holds aSetof these to keep track of what to render. Note that these only exist for the "root" of the React render tree. Read more here.
There are a few more helper React components that we use
ReactContent- a React component used for projecting<ng-content>inside React components.ReactTemplate- a React component used for projecting<ng-template>/TemplateRefinside React components.Disguise- a React components used when a React component has a strict parent-child relationship (e.g. checking the type ofchildrenin the parent component).