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

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.

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

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.

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

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

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

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

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/react@16/umd/react.development.js"></script>




<script crossorigin src="https://unpkg.com/react-dom@16/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/babel-standalone@6/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.

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).

is working on a reply...