Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2016, 12:00
Аватар для vflash
Профессор
Отправить личное сообщение для vflash Посмотреть профиль Найти все сообщения от vflash
 
Регистрация: 09.07.2007
Сообщений: 304

js стиль render для react.js
откровенно render() в стиле псевдо тегов меня раздражает. Хотя и понимаю что "блондинкам" проше его принять.
1) Атрибуты вовсе не атрибуты, но это думаю со временем всеже станет атрибутами также как к этому пришли с элементами svg.
2) Компиляция. решает очень маленькую задачу - только внешний вид. Имхо столь малое не повод коверкать спецификацию синтексиса js.
3) Ломает разметку. Пропушу проблему подсветки, но то как выглядит код если писать все атрибуты не в одну строку хочесться глаза вырвать. Чуть болеше чем подстановка переменных преврашается в кашу.

Я предпочитаю js стиль кода в js. Поначалу React позволял писать обычным js не сильно сложнее чем тегами. Но когда компоненты стали классами, а не фабриками это стало невозможно.
Для того чтоб и дальше писать js на js написал инструмен https://www.npmjs.com/package/jso-to-react . Элементы представлены как массив [свойства, child, child, ...] . Простая конструкция дает очень компактный результат шаблона, а также гибкость в его форматировании.
В комбинации с https://www.npmjs.org/package/bem-name шаблон становиться еще проще, но это уже опционально.

Исходники и документация с примером тут https://github.com/vflash/jso-to-react
__________________
лучшая rss читалка zzreader.com
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2016, 14:13
Кандидат Javascript-наук
Отправить личное сообщение для yazonnile Посмотреть профиль Найти все сообщения от yazonnile
 
Регистрация: 25.05.2012
Сообщений: 133

В чем проблема перейти на нормальную IDE?
Использую phpstorm.
Там jsx поддерживается на ура
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2016, 16:48
Аватар для vflash
Профессор
Отправить личное сообщение для vflash Посмотреть профиль Найти все сообщения от vflash
 
Регистрация: 09.07.2007
Сообщений: 304

мой редактор меня устраивает. параметр выбора редактора это не только посветка кода.

<cmps.PaymentPage
    tabs={this.props.tabs}
    step={this.props.step}
    productType={this.props.productType}
    boxOnBack={this.props.goBack}
    boxTitle={null}
>
  ...
</cmps.PaymentPage>


[
  {
      class: cmps.PaymentPage,
      tabs: this.props.tabs,
      step: this.props.step,

      productType: this.props.productType,
      boxOnBack: this.props.goBack,
      boxTitle: null,
  }
  , ...
]

"на вкус и цвет" каждому свое но по мне js в js получается чише
__________________
лучшая rss читалка zzreader.com

Последний раз редактировалось vflash, 01.04.2016 в 23:17.
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2016, 19:07
Кандидат Javascript-наук
Отправить личное сообщение для yazonnile Посмотреть профиль Найти все сообщения от yazonnile
 
Регистрация: 25.05.2012
Сообщений: 133

Ну вы же сказали, что не поддерживает редактор, и это как видимо - один из ваших доводов против jsx.
Поэтому я предложил довод в ответ

Но в примере вы все же имхо, недоговариваете

http://jamesknelson.com/learn-raw-re...x-es6-webpack/

Вот это ближе к правде
React.createElement('li', {className: 'Contact'},
        React.createElement('h2', {className: 'Contact-name'}, this.props.name)
      )

vs
<li className="Contract">
	<h2 className="Contract-name">{ this.props.name }</h2>
</li>


Цитата:
каждому свое
Тут вы правы.
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2016, 23:15
Аватар для vflash
Профессор
Отправить личное сообщение для vflash Посмотреть профиль Найти все сообщения от vflash
 
Регистрация: 09.07.2007
Сообщений: 304

для IDE за $ 199.00 наверно позорно не прикрутить подсветку.

Про ломает разметку это я про то как выглядит код. Теги обычно не принято разбивать на несколько строк, и выглядит это не так эффектно как в одну строку. Найдите гденибуть хоть в одной документации чтобы использовали переносы строк.
И когда в шаблоне чуть больше логике чем в примерах, то от разметки тега остаются рожки да ножки. Вот и получается что или живи с этой кашей или вычисления выносишь по максимум за пределы разметки. Но тогда теряем контекст.

Цитата:
Но в примере вы все же имхо, недоговариваете
React.createElement('div', {},

никто так руками писать разметку не станет.
для сравнения как это можно записать в "jso"
['+li.Contract'
    , ['+h2.Contract-name', this.props.name]
]
__________________
лучшая rss читалка zzreader.com
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2016, 23:57
Кандидат Javascript-наук
Отправить личное сообщение для yazonnile Посмотреть профиль Найти все сообщения от yazonnile
 
Регистрация: 25.05.2012
Сообщений: 133

Ваша позиция знакома и ясна.
Ок
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Существует ли Тотал Коммандер для ВЕБ на основе JS? aRpi Javascript под браузер 9 26.05.2015 13:00
Как заставить JS обрабатывать функции для всех блоков с заданным классом? GTX14 Общие вопросы Javascript 1 04.04.2015 17:12
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 13:50
Можно ли узнать, определен ли CSS стиль для класса? Почемучкин (X)HTML/CSS 1 25.10.2012 06:27
Что выбрать XML или JSON для передачи Ajax - ом из PHP в JS Gozar Общие вопросы Javascript 20 16.08.2009 23:36