Develop Reference

How to simulate a window resize in React

I'm relatively new to React (and Javascript, for that matter) so please bear with me.
To put my question shortly: how do i trigger a resize event on my window/component in React?
Now below is a little more context, which may actually prove that i'm asking a wrong question here.
I'm trying to create a small app with several tabs. The component is taken from BlueprintJS framework. The content of these tabs is loaded using a javascript API, which in turn uses RESTful requests to a remote application. The content that will be rendered in my tabs is some tables and charts.
Here is a caveat. The actual rendering of those tables and charts is performed by the javascript API i have to use, not by my React app. I have to pass an ID of a to the API, and it will render returned content into that .
The problem: Only the content of the default active tab is rendered correctly. If i switch to any other tab of my React application, the content is not rendered. HOWEVER if i resize the window the content is rendered instantly (i believe this is handled by the javascript API i'm using). Also if i update parameters of the currently active tab to make the API load updated content from the remote application, the content is also rendered in the active tab.
So i figured if i can simulate the resize event when switching between tabs i can get my content to render.
I tried setting a conditional class on my as depending on whether the current tab is active or not:
<div className={this.state.SelectedTabId === "tab1" ? "container" : "hidden"}>
where "container" and "hidden" have different width configured in CSS file, but this doesn't help. I also tried to directly manipulate the DOM (at least as a test) but even that didn't make a difference:
let e1 = document.getElementsByClassName('container')[0];
e1.width = e1.scrollWidth - 1;
renderedElement.resize(); //this is an API method which is supposed to re-render the content it returns

How to reload current page programmatically in react-native

My native app support multi-language functionality like 'English' and 'Danish'. For this I have created a drop down on top of the header with two menu options, for example if click on Danish language,it will set the 'Danish' language, but the effect is not displayed, for this I have to click on current menu, then the effect of the language is seen.
So my questions is how to reload current page in react native programmatically.
Thanks in advance.

Try storing your locale in Redux and then update the UI from that state using container components.

I don't think your problem is reloading. You must change the state on click, but believe me do not write custom localization. Here is the great plugin to do it https://github.com/stefalda/ReactNativeLocalization

The correct way to cause a render of a page is by calling this.setState(). This will trigger the React lifecycle.

You don't need reload current page if you only need to change language, You can achive that with this library https://github.com/derniercri/react-native-redux-i18n

Dynamically loaded Tree Menu using JS or jQuery

I have an Accordian menu for navigating thru an external API (folder structure)
I am attempting to recreate the folder structure dynamically, as the user navigates.
The problem I am having currently, is that: as folders and subfolders are loaded, they lose (or never receive) the inbuilt jqueryui click handling (for un/folding)
I wish to save myself having to write my own accordian click handlers
but sadly, the structure of the (often nested) accordians is dynamically loaded and doesn't get any handlers assigned to it.

After browsing SO and randomly clicking on unrelated 'similar questions' I was able to find a most excellent solution - http://www.jstree.com/
this neat little jQuery plugin addresses every requirement I had for my folders navigation menu, and more!
Allow me to post their front page blurb:
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.
jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.
Just a few of the features worth noting:
drag & drop support
keyboard navigation
inline edit, create and delete
tri-state checkboxes
fuzzy searching
customizable node types
All modern browsers are supported, as well as IE8

Angular UI elements: do I still need jQuery?

I'm just starting out in Angular, and I get the MVC model for organizing data architecturally, but I'm not sure about building custom UI elements without using jQuery (or vanilla js).
For example, I want to build a custom slider, sort of like a progress bar that a user can click (or touch) and drag to change the value. Is angular built for that, or would it require a hack-y solution? Would it be some combination of mouseover, mousedown, mousemove, mouseup events?

AngularJS has its own lite version of jQuery. The document is here: http://docs.angularjs.org/api/angular.element
It is not supposed to handle heavy DOM manipulation and it will not support such thing in the future. If you want to build a custom slider, there is a plug-in called angular-ui: http://angular-ui.github.io/
However, Angular-ui uses jQuery as well. I also notice they don't have a built-in slider component, so my suggestion is that first you should use angular.element, if this cannot satisfy whatever you need, use jQuery.

Backbone.js: navigating between views - destroying and recreating

I'm working on a Backbone.js web application with a few different views. Let's say we have the AudioPlayer view at the top of the page that should be persistent and play audio while the rest of the page content changes. The rest of the page content should be able to be switched on demand (with the Router updating the url via navigate).
I'm looking for the correct way to hide/remove FirstView, insert a SecondView, and then hide/remove SecondView and insert/show FirstView again when the user clicks the "back" button.
I've been told that views should be removed when they are not shown to avoid memory leaks. If this is true, what's the proper way to re-create the view again, as its associated view.el has been destroyed during the remove process? Or is there a more logical way to do this?

This is the way I do it:
extend Backbone.View with a method called open that will append the view to the DOM as well as set a flag on the view that is now open, and a similar close property
make all views properties on a common views property of your app
create a method called clearViews on the app that will close all open views except the view names passed in
Here is a gist (in coffeescript) of what I've been using. Feel free to copy.
https://gist.github.com/4597528
So after extending Backbone in this way, lets suppose you want to create and open a new view in a Backbone route after closing all open views except the top nav bar, which app.views.topNav points to. You can say:
app.clearViews('topNav');
app.views.myNewView = new MyView;
app.render().open('body'); // or some other container
There are some great view and layout managers out there for larger projects like Marionette by Derick Baily and LayoutManager by Tim Branyen, but they seemed like overkill for my smaller projects.

I currently do this in several of my apps, and it is accomplished with a tabbed interface. You can see an example of those interface here:
Twitter Bootstrap
Zurb Foundation
jQueryUI
I use a backbone router to watch the url. This let's me keep deep-linking/bookmarking for users, but I usually have the view events trigger tab changes.
For my purpose I have a mult-tabbed app which has a chat window, image gallery window, and collaborative editing windows.