LINUX.ORG.RU
ФорумTalks

Я вляпался в js, подскажите лопату и редактор!

 , ,


1

1

Сабж. Нет соплей про то какое говно nodejs я писать не буду, про это нам может рассказать EnterpriseMobility.

Но у меня есть пахучая куча js кода из reactjs и сопуствующих тухнологий и... смущает то что там js мягко говоря странно отличается от того что я привык видеть:

 render: function() {
    return (
      <ul className="user-list">
// вот этот вот хочется чтобы подсвечивалось и рефакторилось 
        {this.state.users.map(function(user) {
          return (
            <li key={user.id}>
              <Link to="{'/users/' + user.id}">{user.name}</Link>
            </li>
          );
        })}
      </ul>
    );
  }

И привычне мне редактор тоже удивлены, а я привык что могу переименовать переменную, найти все места где она используется в коде и т.п. есть в этом нашем линуксе программы которые помогут мне это разгрести?

Deleted

Это jsx, gedit его не понимает, может поймет атом, а может и не поймет, но есть вероятность, что поймет. Написал на днях шесть компонентов на реакте в gedit, все живы, яваскрипт кайфовый

bender ★★★★★
()

это jsx. понимает atom, но лучше webstorm.

dib2 ★★★★★
()

чувак, ты мне так говоришь, как будто бы фронтенд это одно и тоже, что и бекенд на с(т)ранной ноде.

К тому же я никогда не юзал ни React, ни Ангулар.

А сейчас я типа пых пых кодер на этой вашей Symfony, что к жо-эс не имеет никакого отношения.

EnterpriseMobility
()
Ответ на: комментарий от EnterpriseMobility

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

Deleted
()
Последнее исправление: Deleted (всего исправлений: 1)
Ответ на: комментарий от Deleted

У EnterpriseMobility просто есть синьор, у которого есть ответ на любой вопрос по ноде. Вот его мнение и интересует. А ещё он ультиматумы ставит.

Hater ★★
()

я привык что могу переименовать переменную, найти все места где она используется в коде и т.п.

только динамически модифицируемые аттрибуты обьектных сущностей в рантайме! всё остальное, ненужно!

n_play
()
Ответ на: комментарий от alwayslate

это из какой обучающей статьи в инете, там кстати напесано что так делать не надо

Deleted
()

Сочувствую, конечно. Тут скорее только плагины для реакта. Из коробки не видал.

znenyegvkby
()

Что за укурки это придумывали?

Браузеры разбирают xml что бы в виде понятных для JS объектов предоставлять, а тут он вообще вплетен в js. Надо лопатой по рукам бить за такое.
Лучше уж свое написать и переписать на него весь фронтенд (если не сильно много)

uin ★★★
()

Что-то сомнительно, чтобы прям ни один редактор не поддерживал jsx. Но я в него вляпаться еще не успел.

Vit ★★★★★
()

Мне кажется, ты несправедлив к JSX

Вот как выглядит код без JSX:

var rootElement =
  React.createElement('div', {}, 
    React.createElement('h1', {}, "Contacts"),
    React.createElement('ul', {},
      React.createElement('li', {},
        React.createElement('h2', {}, "James Nelson"),
        React.createElement('a', {href: 'mailto:james@jamesknelson.com'}, 'james@jamesknelson.com')
      ),
      React.createElement('li', {},
        React.createElement('h2', {}, "Joe Citizen"),
        React.createElement('a', {href: 'mailto:joe@example.com'}, 'joe@example.com')
      )
    )
  )

ReactDOM.render(rootElement, document.getElementById('react-app'))

Ты действительно очень хочешь вручную это всё писать? Ничего не смущает?

stevejobs ★★★★☆
()
Последнее исправление: stevejobs (всего исправлений: 1)
Ответ на: комментарий от Deleted

чтож там можно так долго делать

Потому что это react и, скорее всего, redux. Всех нубов заманивают красивыми рассказами про то, как это офигительно и удобно, но на деле оказывается, что даже относительно простые вещи делать очень нетривиально и, более того, доработка проекта может потребовать переписывания кучи ранее написанного кода. Кроме того, код бизнес-логики очень тяжело читается, ибо захламлён всякой функциональщиной, без которой в redux ничего не заработает, а сам джаваскрипт с этим не помогает.

static_lab ★★★★★
()
Ответ на: комментарий от Deleted

React.createElement получает компонент или строку
Компонент - замыкание (класс), которое получает props (второй аргумент createElement) и возвращает объект, один из методов которго - render, который собственно и вызвается React-ом
Есть куча методов, например shouldComponentUpdate, котроые модифицируют жизненный цикл компонента
Строка - это один из стандартных html элементов, которые определенны в React.DOM
Т.е. createElement('div') равно createElement(React.DOM['div'])

https://facebook.github.io/react/
Здесь есть все про реакт
Также можно посмотреть в исходники, все будет ясно
Вообще, если не понимаешь, как это устроено, не пользуйся

mystery ★★
()
Ответ на: комментарий от stevejobs

ты вообщето пытался его только что писать на js и не смущался, что изменилось, кончилась трава?

зы. jsx - дает декларативное описание этой маеты, точто также можно сделать не выходя за рамки js синтаксиса и сохранив декларативность.

Deleted
()
Последнее исправление: Deleted (всего исправлений: 1)
Ответ на: комментарий от mystery

Вообще, если не понимаешь, как это устроено, не пользуйся

Вот еслиб ты сам следовал своим советам было бы замечательно.

Deleted
()
Ответ на: комментарий от static_lab

Прикол в том, что кроме реакта есть куча годных библиотек для UI, к примеру, Vue.js наиболее юзерфрендли. Но, из-за распиаренности реакта, про них в снг никто и не слышал, все русские хотят «проверенного» решения и чтобы в редакторах их любимых всё подсвечивалось правильно.

menangen ★★★★★
()
Ответ на: комментарий от uin

Мне тут на лоре говорят, что и картинки в base64 нужно пихать в js, чтобы грузились все ресурсы через js, чтобы на мобилках летало :)

menangen ★★★★★
()
Ответ на: комментарий от stevejobs

А вот как то вот так вот нельзя что ли сразу написать?

var rootElement = React.createElement('div', {}, (
    '<h1>Contacts</h1>'+
    '<ul><li>'+
        '<h2>James Nelson</h2>'+
        '<a href="mailto:james@jamesknelson.com">james@jamesknelson.com</a>'+
    '</li><li>'+
        '<h2>James Nelson</h2>'+
        '<a href="mailto:joe@example.com">joe@example.com</a>'+
    '</li></ul>'));
ReactDOM.render(rootElement, document.getElementById('react-app'))

uin ★★★
()
Последнее исправление: uin (всего исправлений: 1)
Ответ на: комментарий от uin

Нет, нельзя. React не имеет ни малейшего представления о HTML (это работа ReactDOM) и не парсит строки (потому, что это медленно и недостаточно гибко).

Алсо, '+' применительно к уйме строк — вообще ужас.

x3al ★★★★★
()
Ответ на: комментарий от menangen

Прикольная штука
Вообще, море таких библиотек, но не все они идеальны
Фишка реакта в его популярности
Комьюнити таки решает

mystery ★★
()
Ответ на: комментарий от bender

атом

это просто вин - оно даже удалить директорию не может

Deleted
()
Ответ на: комментарий от x3al

var rootElement = React.createElement('div') что запишет в rootElement?

var rootElement = React.createElement('div')
    rootElement.innerHTML = '\
      <h1>Contacts</h1>\
      <ul><li>\
         <h2>James Nelson</h2>\
         <a href="mailto:james@jamesknelson.com">james@jamesknelson.com</a>\
      </li><li>\
         <h2>James Nelson</h2>\
         <a href="mailto:joe@example.com">joe@example.com</a>\
      </li></ul>';
ReactDOM.render(rootElement, document.getElementById('react-app'))

Так то же не катит?

Алсо, '+' применительно к уйме строк — вообще ужас.

Тогда только или в строчку писать или переносы экранировать (как выше), но при такой схеме все вот эти отступы то же запишутся.

uin ★★★
()
Ответ на: комментарий от Deleted

ты вообщето пытался его только что писать на js и не смущался, что изменилось, кончилась трава?

я показал, что тебя ждёт, если ты попытаешься отказаться от jsx

вывод прост - нужно продолжать использовать jsx

или написать что-то лучшее, что будет компилироваться в цепочку createElement'ов. Чегой-то я сомневаюсь, что ты сможешь во вменяемые сроки изобразить что-то лучше jsx.

stevejobs ★★★★☆
()
Ответ на: комментарий от uin

нет, не катит.

на самом деле, поздравляю, ты только что изобрёл jsx, на который гонит ТС

в твоем варианте реакт будет знать только о самом верхнеуровневом диве (том, что ты сделал через createElement). Всё остальное будет тупо строкой, реакт не сможет этим управлять, и соответственно смысла в использовании реакта в данном подходе нет.

чтобы довести твою идею до конца, реактовцы и изобрели jsx. Оно выглядит примерно как строка с HTML, НО это уже не просто строка, а строка написанная по четким правилам. Соответственно, её можно проанализировать и скопилировать в последовательность вызовов createElement. Результат такого разбора будет закэширован и последовательные вызовы станут очень быстрыми.

предмет бугурта ТСа я не понимаю, он еще не предложил ничего лучше на замену

stevejobs ★★★★☆
()
Ответ на: комментарий от Deleted

точто также можно сделать не выходя за рамки js синтаксиса и сохранив декларативность.

дизайнеры/верстальщики обычно не умеют работать с «js маетой», они HTML то выучивают со скрипом

сейчас с jsx ты можешь взять продукт работы дизайнера, просто скопипастить в свой код, и расставить плейсхолдеры

более того, ты можешь просто взять код своего компонента на реакте, и отдать его на исправление дизайнеру. Даже со скудными гуманитарными знаниями предмета, дизайнеру обычно хватает соображаловки поменять вёрстку в jsx и ничего не сломать. Мы именно так и делаем.

а если перейти на «js маету», то кроме команды дизайнеров придется нанять еще и команду js-программистов, которые будут вёрстку макета превращать в js и назад. Никакого переиспользования вёрстки не будет, ничего, только тонна головняка

stevejobs ★★★★☆
()
Ответ на: комментарий от stevejobs

я показал, что тебя ждёт, если ты попытаешься отказаться от jsx

Ты показал херню, вместо jsx можно использовать json.

Deleted
()
Ответ на: комментарий от uin

Так то же не катит?

А теперь сделай так, чтобы это работало на ябблофонах без cordona и подобных костылей. С нативным интерфейсом вместо <h1>.

Хинт: в реакте это делается заменой ReactDOM на ReactNative.

Ещё можешь попробовать в своём велосипеде описать динамические элементы, реюзабельные элементы (это как-то так:

const contactElement = (name, mail) => (
  <li>
    <h2>{ name }</h2>
    <a href="{`mailto:${mail}`}">{ mail }</a>
  </li>
)

вместо копипасты твоих <ul><li>), сделать рендеринг быстрее, чем innerHTML (innerHTML — тот ещё тормоз) ну и так далее.

x3al ★★★★★
()
Последнее исправление: x3al (всего исправлений: 2)
Ответ на: комментарий от stevejobs

Это (в моем случае) стандартные методы JS почти под копирку

var rootElement = document.createElement('div');
    rootElement.innerHTML = '\
      <h1>Contacts</h1>\
      <ul><li>\
         <h2>James Nelson</h2>\
         <a href="mailto:james@jamesknelson.com">james@jamesknelson.com</a>\
      </li><li>\
         <h2>James Nelson</h2>\
         <a href="mailto:joe@example.com">joe@example.com</a>\
      </li></ul>';

var document_app = document.getElementById('react-app');
    document_app.parentNode.replaceChild(rootElement, document_app);


реакт js для такого вообще нафиг не нужен, а каскад функций ждущих результат других функций делать вообще не рекомендуется (не помню почему), всегда записывай в переменную и уже ее пихай.

createElement нужен что бы создать элемент который можно добавить на страницу но при этом сохранить с ним связь в коде для других действий, для каждого статичной ссылки или блока текста его зачем вообще вызывать.

uin ★★★
()
Последнее исправление: uin (всего исправлений: 1)
Ответ на: комментарий от Deleted

Как ты собираешься менять DSL на формат сериализации?

x3al ★★★★★
()
Ответ на: комментарий от uin

Браузеры разбирают xml что бы в виде понятных для JS объектов предоставлять

Вангую тебе судьбу анонiмуса.

Что?

Ты задолбаешь своим особо ценным мнением космического масштаба и космической же глупости, и тебя начнут банить.

tailgunner ★★★★★
()
Ответ на: комментарий от uin

createElement не создает настоящих HTML элементов, он создает элементы виртуального DOM. А у тебя в стринге хранятся элементы настоящего HTML. В этом разница.

stevejobs ★★★★☆
()
Ответ на: комментарий от uin

Там главная тема - это создание собственных компонентов и построение их в иерархию с синтаксисом кастомных HTML-тегов. Вставить пару строчек классического HTML'ля внутрь своего компонента или склеить им свои компоненты для финальной верстки на экране - это так, мелкое приятное дополнение.

bender ★★★★★
()

Практически любой совренный редактор умеет jsx

Атом - несколько тормозной и изредка падает.

VSCode - меньше плагинов чем в Атоме, но для js/jsx по моему лучше да и поддержка .d.ts (definitely typed) позволяет иметь приличный intellisence в JavaScript а eslint позволяет править ошибки форматирования мгновенно, что облегчает жизнь, если в проекте используется линтер.

WebStorm - однозначно наибольшее собрание фич, но уже наверное IDE

grim ★★☆☆
()
Ответ на: комментарий от x3al

С нативным интерфейсом вместо <h1>.
Хинт: в реакте это делается заменой ReactDOM на ReactNative.

Зукенберг вроде же сказал, что делать UI для телефона на JS было ошибкой, так как и медленно и батареи жрёт и юзеры плачут.

grim ★★☆☆
()
Ответ на: комментарий от stevejobs

писать HTML в JSON ?!!

То, что написал ты, выглядит как засохшая блевотина, а то, что будет в JSON, будет выглядеть как блевотина свежая. Сравни разницу и пойми, что ТС хочет что-то от блевотины отличное. И раз уж там JSX не переписывать же теперь все. Ну это выглядит все же более достойно, по той простой причине, что когда ты пишешь HTML (я думал все проходят этот этап, но оказывается даже сеньоры в нашей тяжелой реальности возвращаются к нему), тебе все же не хочется каждый элемент создавать через API или даже оборачивать в кавычки concat-строки, ибо это просто мерзко. Это кстати не только HTML касается...

znenyegvkby
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.