Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Leon 101 posts 489 karma points
    Mar 12, 2015 @ 11:24
    Leon
    0

    React.js

    Does anyone have experience in using React.js with umbraco? I've done an initial "thing" with it and it seems to work well, but trying to get server side rendering working (SEO purposes). Server side rendering is breaking my "handleUserInputs". Any ideas?

  • Jan Skovgaard 11259 posts 23501 karma points MVP 8x admin c-trib
    Mar 12, 2015 @ 11:54
    Jan Skovgaard
    0

    Hi Leon

    I have not tried react.js with Umbraco myself but I think it would be nice if you could share some code and explain what you're doing and where things go wrong maybe? :)

    /Jan

  • Leon 101 posts 489 karma points
    Mar 12, 2015 @ 12:57
    Leon
    0

    Hi Jan.

    Thanks for getting back to me so soon.

    Facebook and Instagram use react.js

    I have just too much confusing code to share in order to explain (react javascript is different to normal js), but basically I'm doing client side filtering of elements in the dom.

    React.js has it's own javascript syntax - like coffee script, backbone etc. The translated javascript creates a "virtual dom" that gets manipulated in the background. This virtual dom is used client side, so there is no real HTML, only Javascript used to render the react components. All onclick, sorting, transitions etc are handled in this React virtual dom which works really well.

    The problem is (as far as I understand), search engines read the html and not the javascript. With ReactJs.net, there are options to render the React virtual dom physically onto the html page (server side) which is meant to be better for SEO.

    Unfortunately, when the react is rendered server side on the html page, all the filtering stops working.

    I'm considering using straight forward jquery filtering (my client side stuff isn't that good).

    Any suggestions will be appreciated.

  • Jan Skovgaard 11259 posts 23501 karma points MVP 8x admin c-trib
    Mar 12, 2015 @ 16:59
    Jan Skovgaard
    0

    Hi Leon

    Yeah I've heard a bit about it and I know that Pete Duncanson from offroadcode is quite keen on it judging from Twitter and the fact that he did a presentation about it at uwestfest last week - If you're on Twitter I think you should try making him a mention and ask if he has a spare minute to read your post and give you some suggestions / guidelines perhaps? :)

    You can also just try asking out in the wide using the #umbraco hashtag.

    Don't know if this article can be of any help btw? http://maketea.co.uk/2014/06/30/building-robust-web-apps-with-react-part-4.html

    /Jan

  • Peter Duncanson 430 posts 1358 karma points c-trib
    Mar 13, 2015 @ 16:10
    Peter Duncanson
    102

    Hi Leon,

    I'd need to see some code to give you any real help or at least some errors and your razor file that you are using to render out the React output. What do you mean by broken btw?

    On thing to check is make sure you've put your @Html.InitReact() call in your template somewhere (ideally above thetag) as that will kick off your React stuff client side. The fact you've not said that its not rendering makes me think you've actually got it working server-side and hopefully you are just missing the call to kick off React in the browser.

     

    Check out: http://reactjs.net/guides/server-side-rendering.html

    So you know the flow should go something like this:

    * Render Razor
    * Razor calls @Html.React where ever you need it
    * Razor calls @Html.ReactInitJavaScript() to start React client-side once its downloaded < I think you are missing this
    * End response and send all the HTML down the wire
    * Browser loads and renders HTML
    * Browser downloads React.js like any other JS file
    * Browser runs your "hey React please start now" code that the above Razor helper should have rendered on your page somewhere < I think this is not happening

    Let me know how you get on :)

    Pete

  • Leon 101 posts 489 karma points
    Mar 19, 2015 @ 11:41
    Leon
    0

    Hi Peter.

    Thank you very much. This helped a lot. You were right - I was missing the call to kick react off in the browser.

    I got it working. I'm still not clear on the @Html.InitReact(). Did you mean @Html.ReactInitJavaScript()?

    These were the things I had to change:

    1. I added @Html.ReactInitJavaScript()
    2. Removed the React.render from my .jsx file
    3. I still needed to keep my client side .jsx script in the template (I'd removed that before - thinking that the React.Net stuff would take care of that)

    So my code looks like this now.

    @Html.React("Showcase", new
    {
        //Just my own initial data needed
        showcaseItems = showcaseItems
        , navigationItems = landingPageItems
    })
    
    <script src="http://fb.me/react-0.12.2.min.js"></script>
    <script src="@Url.Content("~/scripts/showcase.jsx")"></script> <!-- Needed to keep this -->
    @Html.ReactInitJavaScript()
    

    Thank you very much.

  • Peter Duncanson 430 posts 1358 karma points c-trib
    Mar 23, 2015 @ 15:16
    Peter Duncanson
    1

    Hi Leon,

    I was writing the commands from memory so might have got it wrong (sorry).

    I can't remember if the ReactInitJavaScript() call included react client side or not. We just include a single bundle.js file that includes everything we need so don't need to manage which files to include where anymore. I need to write that up :)

    Cheers

    Pete

  • Leon 101 posts 489 karma points
    Mar 31, 2015 @ 17:07
    Leon
    0

    Hi Peter.

    Do you have any experience with react animations? I'm having trouble with component css classes being applied when the enter and leave the dom. I'm using ReactCSSTransitionGroup

  • Peter Duncanson 430 posts 1358 karma points c-trib
    Apr 01, 2015 @ 13:01
    Peter Duncanson
    0

    Hi Leon,

    You're best bet for React queries is on stackoverflow, there are a lot of folks active on there who can look over the question and give you some answers. The more eyes the better :)

    Cheers

    Pete

  • Leon 101 posts 489 karma points
    Apr 01, 2015 @ 13:12
    Leon
    0

    Thanks Peter.

    Sadly, It looks like I'm going to have to abandon react because I just can't get good filter transition animations to work well. I'm sure there is a way, but struggling for too long now to get it to work.

    I love react though, but not for animation effects. Going to use straight forward jQuery type plug ins for my specific application.

    Leon

  • Nikhil 48 posts 159 karma points
    Feb 17, 2020 @ 17:10
    Nikhil
    0

    Umbraco 8: We have tried to use ReactJS.NET but could not get it to work. We have used babel standalone in a master template as follows:

    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    
    
    
    
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    
    
    
    
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.js"></script>
    
    
    
    
    <script crossorigin src="https://unpkg.com/[email protected]/babel.js"></script>
    

    Then wrote JSX in JS files. Passed document type data to the JS files using Html5 data attributes. Compilation and rendering on the client side. Component export, module import does not work so are using CDN Urls for the libraries like axios.

    ReactJS.NET issues (https://reactjs.net/getting-started/aspnet.html): 1) JavaScriptEngineSwitcher.V8, JavaScriptEngineSwitcher.V8.Native.win-x64 - This would not work in Azure PAAS applications as ia32 native DLL was required.

    2) Added the ia32 DLL and it still would not load the library.

    3) Tried Azure IAAS in a VM. Moved around the DLLs in different folders but that would not work either. Gave up.

    BTW added dependencies from VC++ 2019 redistributable. Moved them around with the x64 and ia32 DLLs in PAAS and IAAS but the library would not load.

  • Peter Duncanson 430 posts 1358 karma points c-trib
    Feb 18, 2020 @ 12:54
    Peter Duncanson
    0

    You've got a lot going on there Nikhil!

    Of late we've been using React just client-side and stopped with the server-side rendering. On the bits we use React for we don't need the SEO goodness (its a booking engine that you get to after submitting a form via a POST so Google won't get there anyway. Its made the development much easier and the load times are fast enough too. So in that sense its just "vanilla React" now with a bit JSON data blob that we inject into the page in the footer.

    So the up shot is, you might not need Server Side Rendering (SSR).

  • Nikhil 48 posts 159 karma points
    Feb 19, 2020 @ 15:39
    Nikhil
    0

    With babel standalone one cannot use import and export in the js files. So we cannot load modules. Module loading is still not supported by browsers. So you won't be able to use UI components like Material UI and Office Fabric. You can use bundlers like webpack but I do not wan't to go there. We have given up using React. Back to Razor, JQuery, and Axios.

Please Sign in or register to post replies

Write your reply to:

Draft