Maria Jane Maria Jane - 28 days ago 5
React JSX Question

react vs react DOM confusion

I'm using ES6 babel with react, and now for the newer version react, react DOM is not a part of it anymore. My doubt for below code is that, is it the first line require? since nowhere I need React, but the last line I need ReactDOM.

const React = require('react')
const ReactDOM = require('react-dom')

const App = () => {
return (
<div className='app-container'>
<div className='home-info'>
<h1 className='title'>sVideo</h1>
<input className='search' type='text' placeholder='Search' />
<button className='browse-all'> or Browse All</button>

ReactDOM.render(<App />, document.getElementById('app'))


React from version 0.14 onwards is split into two parts: React and ReactDOM. You are making use of ReactDOM to render you HTML element. So it definitely makes sense for you to import ReactDOM in your Component. But as far as React is concerned although you are not making use of React directly but it is indirectly being used because whatever you write in your return statement will be transpiled into React.createElement function that will create the actual DOM elements.

Now you can see this if you omit React in your code, you will see an error that

react is not present

and it will give you that React is not recognised in React.createElement. Hope you understood it.