Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why React.DOM is undefined?

Tags:

React 16.5.2
I am learning React by a book and try to use the factories of the "clear" React (i.e. not in JSX). I try to use one of React built factories but I get the problem:

(() => {    
    const my_h1 = React.DOM.h1(null,"Stuff") // TypeError: Cannot read property 'h1' of undefined
    ReactDOM.render(my_h1,document.getElementById('root'))
})()

Why does it happen?

UPD

This is the screen of the Learning React Functional Web Development with React and Redux book:

enter image description here

like image 912
Andrey Bushman Avatar asked Sep 23 '18 18:09

Andrey Bushman


People also ask

Why React is not defined?

The React. js error "X is not defined react/jsx-no-undef" occurs when we forget to import a function, class or a variable in our code before using it. To solve the error, make sure to import the value before using it in your code, e.g. import {myFunc} from 'my-package' . Copied!

Why React-DOM is separated from React?

The reason React and ReactDOM were split into two libraries was due to the arrival of React Native. React contains functionality utilised in web and mobile apps. ReactDOM functionality is utilised only in web apps.

Can you use the DOM in React?

React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations. In React, all DOM properties and attributes (including event handlers) should be camelCased.


1 Answers

You have to make use of React.createElement to create an element instead of React.DOM

(() => {    
    const my_h1 = React.createElement('h1',null,"Stuff")
    ReactDOM.render(React.createElement(my_h1),document.getElementById('root'))
})()

Also with the latest version in React, React.DOM is no longet valid, you instead need to include the Dom-factories with this script

<script src="https://unpkg.com/[email protected]/index.js"></script>

Then everywhere replace React.DOM with ReactDOMFactories

e.g

ReactDOMFactories.h1(null, "Hello World!")

This change was introduced around version 15.6.0 in June 2017.

like image 197
Shubham Khatri Avatar answered Sep 29 '22 08:09

Shubham Khatri