Cвоя реализация react.createElement?

Question

[Vs99]

Есть код

var reactElementUl = React.createElement(
    'ul', {
        className: 'myList'
    },
        [
        'Some text',
        React.createElement('li', {}, 'one'),
        React.createElement('li', {className: 'li2'},'two'),
        React.createElement('li', {className: 'li3'},'three')
        ]
);

React.render(reactElementUl, document.getElementById('root'));

надо создать свою версию методов

• createElement
  
• reander
  

без использования React.js
код должен рендерить на страницу список с текстом внутри
с render проблем нет а вот c createElement совсем непонятно как это выполнить
Буду рад любой какой помощи, спасибо.

Answer 1

[Антон Спирин]

Cсылки по теме:
Build your own Front-end Framework / Library
Didact: a DIY guide to build your own React
https://github.com/pomber/didact
Build Your Own React — A Step By Step Guide

Comments

[Vs99]

уже смотрел все мимо

[Антон Спирин]

Vs99, ну как же мимо?:

(() => {
  function anElement(element, children) {
    if (typeof(element) === 'function') {
      return element();
    } else {
      const anElement = document.createElement(element);
      children.forEach(child => {
        if (typeof(child) === 'object') {
          anElement.appendChild(child);
        } else {
          anElement.innerHTML += child;
        }
      });
      return anElement;
    }
  }

  function createElement(el, props, ...children) {
    return anElement(el, children);
  }

  window.React = {
    createElement
  };
  window.ReactDOM = {
    render: (el, domEl) => {
      domEl.appendChild(el);
    }
  };
})();

Еще пример

Вам для каких целей?

[Vs99]

Антон Спирин, я учу react и это домашка c курсов. Блин я сам могу написать простую апликуху на react а тут какой-то ступор я видел пример но в данном случае он мне почему-то не подходит( ну или я тупой ), меня вводит в ступор эта рекурсия с вызовами createElement из массива и я незнаю как управлять этими данными

[Антон Спирин]

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

Демо.

[Vs99]

Антон Спирин, но как их тогда перебрать если они не в массиве???

[Антон Спирин]

Vs99, rest parameters

Демо.

[Vs99]

Антон Спирин,
Мы наверное друг друга не поняли я не могу трогать код с задачей (потому что это задача) мне надо написать 2 функции render и createElement чтобы этот код заработал и срендерил элементы в дом. Действительно если бы children были не в массиве было бы проще но такая задача и я с ней уже 2 дня справиться не могу.

[Антон Спирин]

Vs99, странное задание, так как JSX транслируется по-другому. И тем ни менее вот.

я с ней уже 2 дня справиться не могу

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

[Vs99]

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

[Антон Спирин]

Vs99, вам там еще надо добавить реализацию добавления атрибутов(props). Ее там нет.

[Vs99]

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