Михаил Горячкин

В общем не совсем понятно зачем вам это все на чистом js-се, ну да ладно, вот вам демка. Вроде все учел, что вам было надо, если нет то сами подправите. Сам js такой:

(function(w, d){
  
  var childOf = function (child, parent) {
    while((child=child.parentNode) && child!==parent); 
    return !!child;
  };
  
  var initApp = function() {
      var activeTab,
          menu = d.querySelector('#menu'),
          firstLevel = menu.children || [], 
          ln = firstLevel.length;
    
      var tabClickHandler = function (e) {
        e.preventDefault();
        if (!activeTab) {
          activeTab = this;
        } else {
          activeTab.classList.remove('active');
          activeTab = this;
        }
        this.classList.add('active');
      };
  
      var innerTabClickHandler = function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (activeTab) {
          activeTab.classList.remove('active');
        }
      };
  
      var closeMenuHandler = function (e) {
        var target = e.target || e.srcElement;

        if(!childOf(target, menu)) {
            if (activeTab) {
              activeTab.classList.remove('active');
            }
        }
      };
      
      if (!ln) return;
      
      while(ln--) {
        var tab = firstLevel[ln], 
            secondLevel = tab.querySelectorAll('ul > li') || [],
            lnS = secondLevel.length;
       
        tab.addEventListener('click', tabClickHandler, false);
        while(lnS--) {
          var innerTab = secondLevel[lnS];
          innerTab.addEventListener('click', innerTabClickHandler, false);
        }
      }
      
      d.addEventListener('click', closeMenuHandler, false);
  };
  
  w.addEventListener('DOMContentLoaded', initApp);
}(window, document));

Работать будет с IE9 и выше. Для анимации раскрытия используется обычный css.

В вашем случаи, когда контент подсасывается ajax-сом, вам надо вешать клик на ссылку вот так:

$(document).on('click', '.news h2 a', function(){
    	$(this).parent('h2').parent('.news').children('.text_from_news').slideToggle();
      return false;
});

Этот обработчик будет учитывать все ссылки удовлетворяющие селектору в том числе и добавленные динамически на страницу, а ваш вариант как раз ловит только ссылки, которые находились на странице изначально.

Если не придерживаться flux архитектуры то так:

var Comp1 = React.createClass({
//code
render: function() {
    return (
        <div>
         <Comp2 data={this.state.data} />
        </div>
    );
  }
});
var Comp2 = React.createClass({
  render: function() {
    return (
        var fromOne = this.props.data;
        <div>
          {fromOne}
        </div>
    );
  }
});

А если придерживаться flux-са то вам нужен Dispatcher и Store. При получение данных с сервера вы передаете данные в хранилище при помощи Dispatcher, после этого хранилище говорит что данные изменились, а в компонентах вы ставите прослушку на изменение данных. И как только произошло изменение, вы берете свежие данные из хранилища и уже делаете с ними что хотите.

$("input[type=text]").each(function() {
    var input = $(this), id = this.id;
    input.attr('name', id);
});

Вот держите вам самую простую демочку. Эффекты смены я думаю добавите сами.

Ну тут все просто, вы инициализируете плагин для элемента у которого стоит свойство display: none;. В связи с чем скрипт не может получить размеры блока. Для того чтобы jscrollpane заработал на таком элементе необходимо вызывать его с ключом autoReinitialise и поместите этот код в $(document).ready().
В итоге будет как-то так:

$(document).ready(function() {
    $('.scroll-pane').jScrollPane({
         autoReinitialise: true
    });
});

Можно и без stora, но это уже не flux. А в чем у вас проблем при использовании одного хранилища?. Помечайте каждый компонент при его инициализации, каким-нибудь идентификатором. Запоминайте его в самом компоненте и помечайте компонент в Store с тем же ключом, но да при каждом изменении вам придется передавать и этот ключ, чтобы идентифицировать в каком именно компоненте произошло изменение. На самом деле если у компонента узкая специализация и само приложение небольшое, то я бы забил на хранилище и обрабатывал все его изменения внутри компонента. Но тут как говорится выбирайте, к чему у вас душа больше лежит, если будете делать через Store, то у вас будет и flux - архитектура и доступ к состояниям всех компонентов postsBoard, но надо будет по боле написать. Если без Store, то писать меньше и проще.

Да потому что js не будет ждать когда у вас пройдет запрос и вернутся данные, а продолжит свое выполнение, а это значит, что пока запрос не обработан result будет false. Тут вам надо использовать либо Promise, либо callback функцию.

Ну что касается viewport-та то вы можете сделать что-то вроде этого:

<meta name="viewport" content="width=device-width,initial-scale=1" id="viewport" />

(function (w, d) {
	var viewport = d.querySelector('#viewport'), 
      	viewports = {
    		default:  viewport.getAttribute('content'),
    		small: 'width=320'
  		};

	var viewport_set = function() {
        screen.width <= 320 ?  viewport.setAttribute( 'content', viewports.small) :  viewport.setAttribute( 'content', viewports.default );
	}
	//При загрузке
	viewport_set();
	// При изменении
	w.onresize = function() { 
  		viewport_set(); 
	}
}(window, document));

Ну а дальше уже в css media запросами, либо при подключении:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-device.css" />

Ну вам достаточно убрать условие if и все новые элементы будут добавляться в низ:
Вместо:

if (obj.nextSibling){
        console.log(obj.nextSibling);
        document.getElementById('inputi').insertBefore(new_input,obj.nextSibling)
    }else{ document.getElementById('inputi').appendChild(new_input);}

Оставьте:

document.getElementById('inputi').appendChild(new_input);

Ну на сайте который вы привели в пример используется метод requestAnimationFrame для запланирования перерисовки, что в итоге позволяет браузеру заранее произвести расчет для следующего кадра анимации, что в итоге дает большую плавность. Проблема только в том, что данный метод есть только в IE10+. Так что для нормальной поддержки пользовался этим кодом:

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

В свое время именно это помогло мне избавиться от тормазов при анимации.

Вот вам примерчик по быстрому накидал. Под себя я думаю сами подправите.

Если без ajax-са, то топорная заготовка вот. Но тут конечно лучше делать через ajax.

Вот держите вам маленький примерчик. Надеюсь правильно понял что вам нужно.