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:
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!
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With