как jsx переводится в js код?

217

04 января 2022, 21:50

Не до конца понятно как именно jsx транспилируется в js код. Во всех руководствах пишется что то вроде: "вот так пишем jsx а теперь берем babel и происходит магия". Хотелось бы понять как эта магия устроена. Имеется ввиду как вот такой синтаксис:

const div = <div id='JSX'> Example </div>

Превращается вот в такой:

var div = ('div', {id='JSX'}, 'Example');

Вопрос в том как правильно передать div в функцию для обработки не вызвав ошибки SyntaxError. Подходит только вариант со строкой:

tokenizer('div')

Но в функию реакта для рендеринга мы же передаем простой jsx

Answer 1

Непосредственно JSX довольно просто заменяется вот так:

Прототип функции createElement имеет следующий вид (мы передаем не функцию в render, а объект, созданный при помощи JSX factory - результат ее вызова):

createElement(type: string, props: any, child: Element[]): Element

Для примера, я написал собственную реализацию JSX Factory

class JSX {
    static _indent = 0;
    static createElement(type = '', props = null, ...child) {
        return {
            type,
            props,
            child
        };
    }
    static render({type, props, child}) {
        const print = (type, props) => {
            const indent = [...new Array(JSX._indent)].map((c) => ' ').join('');
            console.log(indent, type, JSON.stringify(props));
        }
        print(type, props);
        JSX._indent += 2;
        child.flat(Infinity).forEach((child) => JSX.render(child));
        JSX._indent -= 2;
    }
}
JSX.render(JSX.createElement('body', null, 
    JSX.createElement('p', {text: 'Hello'}),
    JSX.createElement('p', {text: 'World'}),
    JSX.createElement('div', null, 
        [...new Array(3)].map((_, index) => JSX.createElement('p', {text: index}))
    ),
    JSX.createElement('div', null, 
        [...new Array(3)].map((_, i) => {
            return [...new Array(3)].map((_, j) => JSX.createElement('tag', {i, j}))
        })
    ),
))

В результате ее работы, можно наглядно посмотреть на преобразование вложенных map при использовании React...

Как разберетесь с JSX, про применение изменений с виртуального на реальное древо можно почитать тут...