catindev

{ 
   "paid":true,
   "point":0,
   "pointTime":0,
   "project":1,
   "data":{ 
      "Document":{ 
         "Id":122531,
         "IdShift":21072,
         "IdUser":3052,

catindev

import React, { Component } from "react";
import { render } from "react-dom";
import "./index.css";

class Widget extends Component {
  state = { text: "" };
  handleChange = (e) => {
    this.setState({ text: e.target.value });
  };
  render() {

catindev

<!-- 1. Добавляем id контейнеру с радиокнопками для выбора пользователя -->
<div class="form-group" id="reg_type">
  ...
</div>  

<!-- 2. Под этот контейнер ставим сообщение об ошибке -->
<div class="alert alert-danger" style="display:none" id="regTypeAlert">
  <strong>Не выбран тип пользователя</strong><br/>
  Без него вы не сможете заполнить данные для участия в мероприятиях.
</div>

catindev

<!-- Композиция поведения в AngularJS -->
<dog murder robot></dog>

<!-- Нужно что-то ещё? Записывам в шаблон ещё одну директиву -->
<dog murder robot other-behavior></dog>

<!-- React-подход? -->
<MurderRobotDog />

catindev

/**
 * IE 5.5+, Firefox, Opera, Chrome, Safari XHR object
 * 
 * @param string url
 * @param object callback
 * @param mixed data
 * @param null x
 */
function ajax(url, callback, data, x) {
	try {

catindev

function camelCaseToDash( myStr ) {
    return myStr.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
}

var myStr = camelCaseToDash( 'thisString' );
alert( myStr ); // => this-string

catindev

function clickOutside( $document ) {
  const isOutSide = (el, evt) => el !== evt.target && !el[0].contains( evt.target );

  const link = ( scope, el ) => $document.on(
    'click',
    evt => {
      if ( isOutSide(el, evt) ) scope.$eval( scope.clickOutside );
    }
  );

catindev

/* Buttons group */

.buttons-group {

	.clearfix;

	display: inline-block;
	vertical-align: bottom;

	& .button {

catindev

.reset {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;

catindev

###Redux Egghead Video Notes###

####Introduction:#### Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.

Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language.

####1st principle of Redux:#### Everything that changes in your application including the data and ui options is contained in a single object called the state tree