We have an existing react application (.JS not in TS) that has components that renders SVG graphics with user interactions and we are now thinking to use these components in an angular application. Can we use react components directly in angular 4+ application?.
We have tried to use the available solutions but failed with various of reason...
1) ngReact --> We are getting support to use this in angularJs 1.* applications , however we are targeting to use in angular 4+ (https://github.com/ngReact/ngReact)
2) angular-react --> we tried to use this ,and here we need to convert react application as react library and again we need to create custom modules to understand the angular-react to use the existing components.( https://github.com/Microsoft/angular-react)
do we have any direct solutions to use the existing react components in angular applications? Will that turn out to be a good approach long-term?
Related
I want to create a web application using JavaScript frameworks. The basic idea is to create a simple navbar through which we can switch to Angular and react module. I want to use webpack as a base library for hosting front-end app. For state management, I want to use rxjs
Can anyone help me in that?
I have a design of the website which contains javascript without any framework. Now I'm in the development process and I need to use javascript framework like react for a specific process. so, will it work or I need to transform everything into a framework? I'm working with Laravel and how can I make multiple react app for a single website inside Laravel framework?
Yes. This is exactly the problem that Facebook aimed to solve by creating React. They initially only used React for parts of the comment system and their chat.
You can create a React component and use it in only part of your website. You just need to provide it a place for it to mount. That is, a div where you are mounting your application.
Check the documentation for React DOM and the integration guide for more information about rendering to the DOM. The basic idea is to create your component then use the following code to render it:
ReactDOM.render(element, container[, callback])
From the React docs:
React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React.
To integrate React with other libraries or frameworks, check out the React integration guide: https://reactjs.org/docs/integrating-with-other-libraries.html
Yes you can create global window renderer functions from react library and call it from vanilla js or some other third party library like jquery .You just need to include the minified js to call that function.
Some thing like below on react
const app = (parameter1,parameter2) => (
<YourComponent parameter1={parameter1} parameter2={parameter2}/>
);
window.renderYourComponent = function (p1, p2) {
render(app(p1,p2), document.getElementById('your_div'));
}
On your vanilla js
<script type="text/javascript" src="your_minified_react.js"></script>
<div id='your_div'></div>
window.renderYourComponent("p1","p2");
Everything will be rendered inside 'your_div' and you can work separately on react
Yes, You can make multiple React apps for a single website inside the Laravel framework.
The Laravel often uses a blade template for frontend UI.
What you need to do is build the React app and integrate the built React app with the Laravel blade.
You can copy the whole built contents of the React app into the Laravel home blade, for example.
In addition, inside React to import custom Javascript files, you can use several ways like script tags and also webpack copy module.
I want to add/create a new Angular component inside an existing pure Javascript library so that the library can be easily integrated within Angular apps. The Angular component will essentially be a wrapper for the library. We already added a React wrapper to the library for this same purpose.
Given that Angular is a framework solution, and I don't want to drastically change the structure of the existing JS project, is it possible to add Angular to the existing JS project? If so, how is that done from a high-level? I normally use Angular-cli v6 in my other projects.
Angular Elements
Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way.
Building a Custom Element Using Angular Elements
Angular Elements — A Practical Introduction To Web Components With Angular 6
Browser support for custom elements
Chrome Supported natively.
Opera Supported natively.
Safari Supported natively.
Firefox Set the dom.webcomponents.enabled and dom.webcomponents.customelements.enabled
preferences to true. Planned to be enabled by default in version
60/61.
Edge Working on an implementation.
I've been working on a personal project for many years. This isn't for work and there is no money to be made. So I take my time doing the development on the project, and that means I'm still using AngularJS as my front-end UI library.
AngularJS is my "component" library where all the directives, components and services are there to "bootstrap" existing HTML from the web server. The back-end is handled with CakePHP which renders all the HTML.
There is no massive single-page app and there is no AngularJS routing. I load my UI library on each page request, and that's how I'd like to keep doing it.
I spend my day job working with Angular 5. I'm very good at it and I'm the go to guy when other developers have Angular questions.
Despite these skills I've been unable to figure out a migration path for my UI library from AngularJS to the latest Angular. Angular 2+ has been out for a couple of years and I'm still stuck with AngularJS.
Here is an example of my problem:
Take a look at the Material Angular project built with Angular 4. It's basically the same kind of library as my own UI library. It contains a collection of directives and components that you can use.
If you have a web server that responds with existing HTML and you want to use Material Angular as your UI library, then you can't. Let's take the autocomplete component as an example.
The documentation explains how to use autocomplete:
https://material.angular.io/components/autocomplete/overview
There is also a working example of the component:
https://stackblitz.com/angular/ggmpnaqqqxk
In the documentation it shows that you can use the component like this:
<mat-autocomplete>
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
But when you look at the working example you see the problem that I have. In their example, they have to bootstrap an entire Angular application container that is used to inject the Application HTML which has the autocomplete example.
They can't just use the <mat-autocomplete> component in an existing HTML page.
Now let's take a look at the exact same component done in AngularJS for the old Material Angular project.
It too has a component for autocomplete named <md-autocomplete> and the old version has basically the same features.
There is even a working example:
https://codepen.io/anon/pen/goLrpJ
It too bootstraps an AngularJS application, but it leaves the existing HTML intact. That allows you to use <md-autocomplete> directly in your existing HTML.
How do I create an Angular 5 application that can be used as a component library with existing HTML?
Angular Elements are supposed to address this problem in near future. As explained in detail in this write-up, they are able to provide self-bootstrapping, standalone custom elements.
Currently the issues remain unsolved that restrict the use of attributes and projected content on root component, this seriously narrows down the use of Angular components as custom elements in real-world scenarios.
I couldn't find an answer to this... so, when I open a new project in WebStorm I have the 4 options (and many more) mentioned above - AngularJS, Angular CLI, React Native & React App. I have found out that Angular CLI is corresponding to Angular 2.
My question is: which of the 4 or maybe another option I did not mention here is corresponding to Angular 4 which is the newer version of Angular 2 as I understand it.
Also, if someone can please help me understand better the difference between the 4 options I have mentioned: which should I use and for what purpose? For example if I want to build a minesweeper game, which of the three would you choose?
Also, in my search I've found that React Native is for mobile use (apps) so what is the difference between that and React App? And is any of these are suitable for creating a game in PC browser (and not on mobile)?
1.'Angular CLI' option allows creating Angular 4 project using Angular CLI
'AngularJS' option just clones https://github.com/angular/angular-seed - a project stub for Angular 1 application
'React Native' creates a React Native project stub using react native cli
'React App' creates a React project stub with create-react-app
React itself is a JavaScript library; React Native allows creating mobile applications using React library + native components. If you like to create a web game to be run in browser, you don't need react Native. You can use React, or Angular.x, or any other JavaScript framework that supports creating custom UI components