We Keep Coding

Integrate React components into an existing NET Core app

I have an existing application build with .Net Core Framework. I would like to integrate React components for re-usability purposes which at this point will only be app specific. I have gone through numerous "Hello World!!" tutorials but that doesn't satisfy my need. I have also looked at reactjs.net but that also is not going to help me as the components gets rendered on the View
Scenario
Application has lots of Modals with a form which gets rendered on numerous pages. Currently it is being handled with JavaScript. The JavaScript code gets duplicated a lot to achieve it.
Goal
Would like to have a react component to replace above mentioned functionality to reduce code getting duplicated.
The problem I am facing is I am not sure how will I be able to interact with the component from a jQuery/JavaScript point of view.
Example
I have a DataTable and one of the actions is to click on a certain button to display the Modal. The code is in a separate .js file so it is separate from the View. So in this case if I click on a button I would like to render the react component. I would need to pass props through to the components and that is where I am uncertain how would I handle it :-(
Any suggestion or guidance would be appreciated.
Thanks in advance

Using react in Asp.Net Core application is easy. At first you need to know your back-end will be API based to communicate with react. So if you have not set up your Core application to an API based, it won't work. Also make sure you have installed nodeJs and other dependencies.
To get started with react, create a new folder in your Asp.Net project solution.
Open the folder in your Command line and execute:
npx create-react-app [your--folder--name]
To view your created app, run
npm start
To get started with asp.net, you need to add spa dependencies in your project.
Then you have to set up your ConfigureService method to include:
services.AddSpaStaticFiles(configuration => { configuration.RootPath = "[your--folder--name]/build"; });
Finally set up your Configure method to include:
app.UseSpaStaticFiles();
app.UseRouting();
app.UseEndpoints( ... );
app.UseSpa(spa => {
spa.Options.SourcePath = "[your--folder--name]";
if (env.IsDevelopment()) {
spa.UseReactDevelopmentServer(npmScript: "start");
}
});

Render dynamic templates in Ember.js

I am new to Ember, so this might be a stupid question, but bear with me. Is there a specific reason one can't render templates with a dynamic string? Specifically, I push various objects to a controller variable like this:
this.controllerFor('application').get('popups').pushObject({
resource: article,
template: 'article'
});
And then try to render them:
{{#each popup in model}}
{{ render popup.template popup.resource }}
{{/each}}
This doesn't work in Ember as-is, since it expects a string as the template. I just patched this in my ember source in the renderHelper function:
if(name.value) name = name.value();
This makes sure that if the name comes from a property, it gets converted to a string correctly. It works perfectly fine. What is the reason Ember doesn't support this out-of-the-box? Am I missing something?
A little background for the stuff above: I want to open lots of different resources in popups on the page, but I want to keep the popups separated from the rest of the current route so I can show them on their own page if needed without duplicating code. My idea was that I push all open popups to a global array, and they are rendered at the bottom of the page (A bit like we do it at the moment without ember). Maybe there is a better way to do this that I missed!

You want to
Create a popup template independent of route
Pass data to template and render it any where
Right ? If yes there is a very good concept of component in Ember.js
Component is a small module with is separate from application. It only depends upon the data passed into it.
It can be reused in different portion without ever effecting each other. They are especially good to run third party plugins like qtip etc.
here is good article about use case of component.

Laravel 4: How would you integrate user definable templates?

I am building an application in Laravel 4. This application needs to be skinnable by the client. In essence, the owner of the app needs to be able to create his own template / styling / layout for his version, and upload it (ideally in a zip). Could you suggest any ideas / best practices / tips for building in functionality where this is possible?
Where should I locate the templates? Would you use the app/views folder or would you create a writable folder in the public folder?
Any ideas or suggestions or even links to a tutorial would be appreciated.

In a nutshell the way this is handled in Laravel is to use cascading views and a view namespace. Creating a namespace is easy, just pick a name and add the paths you want it to search in in the order of priority.
View::addNamespace('template', ['path/to/public/views', 'path/to/app/views']);
Now, when using View::make you can prefix with your namespace and it'll first search in path/to/public/views, if the view is not there it will then look in path/to/app/views. This is extremely handy when you want to provide a sort of base template and simply allow them to provide their own templates that overwrite the base.
Here is how you reference the namespaced views.
return View::make('template::example.view');

Ember.js: How do I associate my component with a model?

I am new to Ember.js and am trying to figure out how to piece things together at this point. One component I built, since I need a re-usable "widget" to use across many portions of my application, is a "site nav" widget. Basically, it's almost like the buttons/links you see in StackOverflow when you open a new question titled: "Questions Tags Users Badges Unanswered". In my app, these links have a name and id associated with them on the server-side. I want to be able to use this navigation widget on multiple parts of my app and it should be as simple as putting:
{{site-nav}}
into a template. I got that part working just fine, but the navigation is currently hard coded in handlebars. My question is, for a component, where is the right place to retrieve/populate model data from the server? For a controller, we do it directly from the controller's route definition. The component is not associated with a router. In fact, it can be re-used, as mentioned before, in several parts of the app.
I want to be able to drop this component into templates and have it populated with modeled nav from the server which has the name/IDs of the navigation I need. Where is the best place to do this? I'm guessing I'll still extend from something like DS.Model, but I'm not entirely sure where/when/how to integrate this with the component. When do I create the model and invoke a .find() type call to the server to populate site-nav with data?

you can pass value to component Passing properties to component
via handlebars.
{{my-nav navlist=listfromserver}}
so the list from server is in our controller can be passed to the component

Does Angular JS support routing of multiple views on the same page

Does Angular JS support having multiple ng-view sections each with its own templates on the same page? When setting up its configuration you need to wire up the different url path to different controllers and templates. But when you have multiple views on the same page, then they will each need to adjust their template and controller using the #path value from the url, and to change the view template we'll be need to switch as the #path value changes.
So how would the different ng-view sections play with each other - as each would need to append its own unique #path value to the url. Or is the url path and #value somehow kept as a private construct within each ng-view and therefore allowing multiple ng-view sections on the same page.

Multiple views is a limitation in angularjs and the documentation does not make it clear how to structure an application with complex views properly. Please have a look at Jan Varwig's posts on this topic
How to do nested views in AngularJS (Hint: Don’t)
AngularJS: Views vs. Directives
Relevant Sections:
"Views are not what you use to structure your application!
In fact, views are more of a crutch, a shortcut, to create structures similar to traditional websites, only with angular as a driver. When developing a web application, the way to deal with complex interfaces is to use, in combination:
Scope objects/variables that store your desired view state explicitly
ngSwitch directives on this view state
Directives to include custom templates/perform complex DOM manipulation behavior
Stop thinking of your application in terms of views that need to be loaded. That kind of thinking aligns better with imperative frameworks but doesn't work well in angular."
"View-Containers are meaningless, separated from their semantics through the routes.
The other, secondary gripe that I have with UI-Routers nested views is that they violate another core idea of AngularJS: Your DOM is the main place to describe the structure of your app. Reading a template should give you an idea of what goes where. If you want to edit a user, put a directive into your template:
A reader will immediately see what that directive does and what data it depends on.
If you write the directive correctly it will be location independent, you can place it somewhere else in your app, as long as you pass in a user through the attribute it will work.
Using views litters you templates with meaningless containers, outsourcing the actual purpose of every view into the routes/states defined elsewhere. If you nest routes, the context of every view becomes implicit, it is harder to move them around and the only way to pass data into a view is through the scope."

ng-route does not support multiple ng-view inside ng-app.
You can take a look at ui-router as a project which provides some support for having multiple layouts (including nested layouts) tied to the URL.
Caveat Emptor
Note: UI-Router is under active development. As such, while this
library is well-tested, the API may change. Consider using it in
production applications only if you're comfortable following a
changelog and updating your usage accordingly.

Use ui-router instead of the canned ng-route! ui-router totally has nested views, and its awesome and really easy to learn. I would reccomend using ui-router instead of ngRoute to anyone.

Having done further reading on this, it appears that although functionality for multiple ng-view has had number of requests it was not able to make it into the Angular release, but there is possibility of something in future releases.
In this discussion Misko Hevery pointed out another approach, which is to use ng-include.
Then there is also the custom directive approach in Jan Varwig's posts which Vikas has already cited.
Also found this Angular Multiple View project on github which can be a further approach.

For this sort of thing you can use templates.
Create a file e.g. firstNavigation.html which has your snippet of html. Then call it in the controller like so.
$scope.nav = 'src/partials/firstNavigation.html';