• react
    ASP.NET Core,  React,  SPA

    React code splitting and server-side rendering with ASP.NET Core – Part 1

    Thanks to [crayon-62849967ec0e3480127656-i/], code splitting has become easy with dynamic [crayon-62849967ec0e9171448287-i/]. However, for code splitting to work together with server-side rendering, things become more tricky and not that straight forward because at the server side, the modules have to be loaded synchronously in order to render the page correctly. There are several different available loaders that can help get the…

  • react
    ASP.NET Core,  React,  SPA

    redux-first-router vs redux-little-router for React/Redux SPA

    Client side routing is definitely one of the center piece of gears that empowers single page application. For our [crayon-62849967ed327185856630-i/] projects, we have been using [crayon-62849967ed32c506520266-i/] that fits in reasonably well. Recently, I had a chance to hand on evaluating and trying out another router package, [crayon-62849967ed32d630254498-i/]. Both packages are designed with [crayon-62849967ed32e890215304-i/] in mind and so they both work and integrate well with…

  • react
    React,  SPA

    Improve React/Redux SPA Performance, with ASP.NET Core – Part 1

    Fast web experience is what users expect nowadays. Fast mobile web experience is essential when most people are accessing websites with their mobile devices. And it’s only becoming more critical now that google takes website loading speed as a ranking factor. Improving/maximizing [crayon-62849967ed957868953930-i/] application performance therefore should be treated as a top priority. Minimize unnecessary re-render This could possibly the most…

  • react
    React

    React async rendering, getting prepared

    React async rendering, a new exciting built in feature, is coming in react version 17. While we don’t know the exact time frame, it may well be very soon. For existing projects, most likely you will have some preparation and migration works to finish before you can take advantage of this new cool feature. We finished the migration and sure…

  • react
    ASP.NET Core,  CSS,  React,  SPA

    route transition for redux-little-router, react ASP.NET Core

    [crayon-62849967ee565156690390-i/] is a good client side routing library for project that uses [crayon-62849967ee569875227612-i/] and [crayon-62849967ee56b342167323-i/]. However, adding transition to the route pages could be tricky. [crayon-62849967ee56c993701298-i/] provides a react component [crayon-62849967ee56d631531272-i/] for use to define the route pages. Each route page component will be wrapped by a [crayon-62849967ee56e673152588-i/] component. As far as I know (after looking at the coding), [crayon-62849967ee56f044254275-i/] component will render the route page…

  • react
    React,  Typescript

    Publish npm Typescript react component

    We have a couple small react component libraries to share. In addition to host the libraries at github.com, the best approach is to publish them at npm so that others can readily use them. So I went through the process to publish npm typescript module, documented it and share my steps to whoever might want to do the same. There…

  • react
    CSS,  React

    react route transition css: css-transitioner

    css-transitioner is a small footprint React wrapper component to enable react route transition (i.e. perform transition when changing route page). It works with client side routing to switch between pages. It all started out when we wanted to add transition to our page routing, instead of switching pages in a flash. However, we couldn’t find an easy way to make…

  • react
    ASP.NET Core,  React,  Webpack

    Hot Module Replacement (HMR) with React, ASP.NET Core

    Hot module replacement (HMR) or hot loading is a feature of webpack allowing real time update of modules while the application is running, which could significantly speed up development. Enable Hot module replacement Goal: To enable HMR in the React application in a simple setup. Base project code: Example code from React with Typescript, Get started with ASP.NET Core serves as starting…

  • react
    ASP.NET Core,  React,  SPA

    React Routing with redux-little-router, ASP.NET Core SPA

    React Routing with redux-little-router is part 5 of a 5 parts React with ASP.NET Core series. This series will show you the setup necessary for building React single page application with routing and server-side rendering. For traditional web site that server is responsible to render all web pages, each page change requires browser to request and re-run the page from…