Visual Studio 2015/2017 +react +typescript - visual-studio

Have anyone found a complete react+typescript-tutorial in Visual Studio 2015/2017 MVC-project that works, from start to finish?
Ive tried to just get the NuGet-packages named "Reactjs Mvc4" and "typescript", created a .tsx-file, and copied some of the .config/package-files(from guide below), but the more I google, the more extra stuff I seem to be needing. In the end gets me different kinds of errors.
This one seems ok. It does produce all .config/.package-files one the correct locations, but it seems to assume you are using VS Code.

Hi check this cool template its good beginning for react typescript redux and router.
JavaScriptServices
You can generate VisualStudio project.
Form GIT:
JavaScriptServices is a set of client-side technologies for ASP.NET Core. It provides infrastructure that you'll find useful if you:
Use Angular / React / Vue / Aurelia / Knockout / etc.
Build your client-side resources using Webpack.
Execute JavaScript on the server at runtime.
Read Building Single Page Applications on ASP.NET Core with JavaScriptServices for more details.
This repo contains:
A set of NuGet/NPM packages that implement functionality for:
Invoking arbitrary NPM packages at runtime from .NET code (docs)
Server-side prerendering of SPA components (docs)
Webpack dev middleware (docs)
Hot module replacement (HMR) (docs)
Server-side and client-side routing integration (docs)
Server-side and client-side validation integration
"Lazy loading" for Knockout apps
A Yeoman generator that creates preconfigured app starting points (guide)
Samples and docs
It's cross-platform (Windows, Linux, or macOS) and works with .NET Core 1.0.1 or later.

Related

YO .net core 2.x demo project with react/redux?

This is a "Veracity Platform" question - which I guess has a fairly small audience.
I'm using the veracity platform's application generator (based on Yeoman) to generate a sample application for .net core 2.x, using node.js.
yo #veracity/veracity:netcore-webapp
This creates a good basic .net core 2.x MVC project. Is there a way to further specify that I want to additionally include the "React/Redux" project template, like I would when creating a project in Visual Studio? That way the client app and the front-end webpack stack get started for me, which is nice.
Thanks in advance for any suggestions.
We do not have these configurations included in the generator yet. Uservoice will be added to Developer.veracity.com soon, but for now you may forward such feature requests also in the github project of the generator. Open an issue, and I will see when we can get it in to the backlog.
https://github.com/veracity/generator-veracity
Brede Børhaug - Manager Veracity for Developers

Import ReactNative libraries into a NativeScript application

I have some Android development experience along with React.js. I'm working on a new mobile project and I haven't been sold entirely on either framework yet.
I'm thinking about using the NativeScript framework for its maturity and because it has more libraries with the functionality that I need but I'd like to design my views in a manner similar to ReactJS. I know I could write my own modules for ReactNative but that would require then I'd have to write modules for both Android and iOS. I'd like to avoid that if I could.
I was thinking about importing the necessary ReactNative libraries into a NativeScript project and then being able to write views in a way similar to ReactNative but still using NativeScript.
Is this doable?
Not sure about your exact question. I did just see an integration between Preact and NativeScript you may be interested in. Take a look here: https://github.com/staydecent/nativescript-preact
I believe that repo is in the early stages, but if enough people want something similar, it'll get worked on faster.
Using React Native in NativeScript is not the right approach, either of it are not built to work together and wouldn't work due to architectural reasons. Here is an NativeScript official comparison of these two.
Both are built for solving same problem (building native apps using JS, without webview hybrid app approach) by trans-compiling XML based view layer(which both these framework has its own syntax and so cant be shared) to build Native UI.
Said that view layer has its own syntax for both and cant be shared, model and controller layer cant be shared as well, due to the fact that NativeScript has few things packed as part of the application package, like JavaScript runtime, c++ and Java API layer which helps in exposing all the Native API without the need for any explicit native API wrapper we have in ReactNative.
React Native have platform specific UI components as well as hardware capabilities, which is not the case with NativeScript. Offcouse, that comes with the cost of a fatter app package size(50+MB) compared to <10MB for ReactNative. More on ReactNative vs NativeScript comparison here.

.NET Core 1.1 MVC not rendering correctly via VS2017 IDE

I have a simple .NET Core MVC solution based on a standard template which when started via the VS 2017 IDE does not seem to be rendering Bootstrap elements correctly. This happens whether I use IIS Express or Kestrel, and is browser-independent. But when I start it up from the prompt using dotnet run and browse to it manually it's fine. When I view the page source the correctly rendering version is (as per the environments defined in _Layout.cshtml) taking Bootstrap, JQuery et al from a CDN, whereas when run through the IDE it's using Bower\NPM packages under the web root.
I've tried rebuilding the dependencies to no avail. Static files are set. Any pointers as to what else to look at ?
You have to add app.UseStaticFiles(); line to your Startup class so your statics can be served by static files middleware

Using Less with .net web development

So I am very interested in using LESS with Bootstrap and Visual Studio. THe problem I'm having is that Web Essentials doesn't seem to be able to compile css from the Bootstrap LESS files. I've done some poking around and it seems that Web Essentials doesn't understand semicolons or something to that effect, which is causing it to choke on bootstrap's less files.
So, are people using LESS with bootstrap in a VS environment, or have I wandered onto the fringe?
Some tools you could use:
Web Essentials - I can tell you it does work with Bootstrap as I've used it before
Web Workbench - A paid alternative, I prefer web essentials
GruntJS - A JavaScript task runner that you can configure to build various resources and hook it up to your post-compile step so it happens automatically
Personally I'd go with grunt, while it's not very commonly used tool in '.NET', once you've used it you can see the awesome power it gives you. It's open source, and has a tonne of open source plugins that lets you do heaps of stuff, plus you can write your own.
Some examples of plugins: minify JavaScript; compile SASS, LESS, TypeScript, CoffeeScript, Markdown, etc.; copy files; delete files; optimize images and so on.
Check out WebEssentials (as you've already found, if it doesn't work, try filing a request or an issue) or the Mindscape Web Workbench and finally the BundleTransformer. Your request isn't a fringe, the web is embracing these technologies, so is Visual Studio.
If you'd share the exact messages you're seeing, or the steps you've taken so that we can reproduce, we can help you better. As far as I can tell WebEssentials should work with Bootstrap's less files just fine.

Removing default JavaScript files from ASP.net MVC 3 Project

I'm just starting out with ASP.net MVC 3 and I've created an empty project. I noticed that the scripts folder is populated with a number of JavaScript files, including:
jQuery 1.5.1
jQuery UI 1.8.11
Some jQuery plugins
ASP.net MVC libraries
I want to develop my application with the latest versions of jQuery and jQuery UI served from the Google AJAX CDN. My plan is to develop a single page AJAX application, and I don't see myself using too many of the build in features for model validation, however I would like to keep the option of using it open.
Will I run into any problems with my application if I clear out the Scripts folder completely? And will I run into compatibility problems using the latest versions of jQuery and jQuery UI with the ASP.net MVC libraries?
Will I run into any problems with my application if I clear out the Scripts folder completely?
No, if you don't use them.
And will I run into compatibility problems using the latest versions of jQuery and jQuery UI with the ASP.net MVC libraries?
No. The only compatibility problem I can think of was with jQuery UI and jQuery validate plugins but they are bot non-Microsoft so if you update them both to the latest version you won't have problems (this assumes of course that you are using client side validation, if you aren't its irrelevant to you).
So feel perfectly free to remove the scripts folder and reference external scripts from CDNs.

Resources