React и ReactDOM - это две разные библиотеки, которые используются в React-приложениях. Но обычно импортируются обе библиотеки, чтобы использовать их функциональности вместе.

React - это библиотека JavaScript для создания пользовательских интерфейсов.

const React = {
    Children: {
        map: function() { /* ... */ },
        forEach: function() { /* ... */ },
        count: function() { /* ... */ },
        toArray: function() { /* ... */ },
        only: function() { /* ... */ }
    },
    Component: function Component(props, context, updater) { /* ... */ },
    Fragment: Symbol('react.fragment'),
    Profiler: Symbol('react.profiler'),
    PureComponent: function PureComponent(props, context, updater) { /* ... */ },
    StrictMode: Symbol('react.strict_mode'),
    Suspense: Symbol('react.suspense'),
    cloneElement: function cloneElementWithValidation(element, props, children) { /* ... */ },
    createContext: function createContext(defaultValue, calculateChangedBits) { /* ... */ },
    createElement: function createElementWithValidation(type, props, children) { /* ... */ },
    createFactory: function createFactoryWithValidation(type) { /* ... */ },
    createRef: function createRef() { /* ... */ },
    forwardRef: function forwardRef(render) { /* ... */ },
    isValidElement: function isValidElement(object) { /* ... */ },
    lazy: function lazy(ctor) { /* ... */ },
    memo: function memo(type, compare) { /* ... */ },
    useCallback: function useCallback(callback, deps) { /* ... */ },
    useContext: function useContext(context, unstable_observedBits) { /* ... */ },
    useDebugValue: function useDebugValue(value, formatterFn) { /* ... */ },
    useEffect: function useEffect(create, deps) { /* ... */ },
    useImperativeHandle: function useImperativeHandle(ref, create, deps) { /* ... */ },
    useLayoutEffect: function useLayoutEffect(create, deps) { /* ... */ },
    useMemo: function useMemo(create, deps) { /* ... */ },
    useReducer: function useReducer(reducer, initialArg, init) { /* ... */ },
    useRef: function useRef(initialValue) { /* ... */ },
    useState: function useState(initialState) { /* ... */ },
    version: "17.0.2",
    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
        ReactCurrentDispatcher: { /* ... */ }
    }
};

ReactDOM - это библиотека, которая предоставляет интеграцию React с DOM. Она используется для рендеринга React компонентов в реальный DOM. ReactDOM содержит методы для манипулирования реальным DOM, такие как ReactDOM.render(), который используется для рендеринга React-компонентов в DOM.

const ReactDOM = {
    createPortal: function createPortal(children, container) { /* ... */ },
    findDOMNode: function findDOMNode(componentOrElement) { /* ... */ },
    flushSync: function flushSync(fn, a) { /* ... */ },
    hydrate: function hydrate(element, container, callback) { /* ... */ },
    render: function render(element, container, callback) { /* ... */ },
    unmountComponentAtNode: function unmountComponentAtNode(container) { /* ... */ },
    unstable_batchedUpdates: function batchedUpdates(fn, a) { /* ... */ },
    unstable_createPortal: function unstable_createPortal(children, container) { /* ... */ },
    unstable_renderSubtreeIntoContainer: function renderSubtreeIntoContainer(parentComponent, element, container, callback) { /* ... */ },
    version: "17.0.2",
    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
        Events: [] // Пример внутренних данных
    }
};

По умолчанию React DOM экранирует все значения, включённые в JSX перед тем как отрендерить их. Это гарантирует, что вы никогда не внедрите чего-либо, что не было явно написано в вашем приложении. Всё преобразуется в строчки, перед тем как быть отрендеренным. Это помогает предотвращать атаки межсайтовым скриптингом (XSS) .

Устранение ошибки: “ReactDOM.render больше не поддерживается в React 18. Вместо этого используйте createRoot”


Назад