Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
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?
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? :)
Thanks for getting back to me so soon.
Facebook and Instagram use react.js
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.
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
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:
Let me know how you get on :)
Thank you very much. This helped a lot. You were right - I was missing the call to kick react off in the browser.
These were the things I had to change:
So my code looks like this now.
//Just my own initial data needed
showcaseItems = showcaseItems
, navigationItems = landingPageItems
<script src="@Url.Content("~/scripts/showcase.jsx")"></script> <!-- Needed to keep this -->
Thank you very much.
I was writing the commands from memory so might have got it wrong (sorry).
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
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 :)
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.
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):
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).
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.
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted